HTTP Sec-CH-Prefers-Reduced-Transparency Header

Der HTTP-Header Sec-CH-Prefers-Reduced-Transparency ist ein Request-Header aus den User Agent Client Hints, der anzeigt, ob der Nutzer reduzierte Transparenz bevorzugt. Dies ist eine Barrierefreiheitsfunktion für Menschen mit Sehbeeinträchtigung oder visuellem Stress.

Typ

Request-Header

Syntax

Der Header gibt die Transparenz-Präferenz als einfachen String-Wert an.

http 
Sec-CH-Prefers-Reduced-Transparency: reduce
Sec-CH-Prefers-Reduced-Transparency: no-preference

Direktiven

Die Direktiven definieren die Transparenz- und Opacity-Präferenz des Nutzers.

no-preference
Nutzer hat keine spezielle Präferenz bezüglich Transparenzeffekten. Standard-Wert, wenn keine Betriebssystem-Einstellung aktiv ist. Frosted Glass und Blur-Effekte können verwendet werden.
reduce
Nutzer hat "Transparenz reduzieren" in Betriebssystem-Einstellungen aktiviert. Transparente Elemente sollten durch solide Farben ersetzt werden für bessere Lesbarkeit.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für den Sec-CH-Prefers-Reduced-Transparency-Header.

Beispiel 1 Solide Hintergruende anfordern

http 
GET /dashboard HTTP/1.1
Host: app.example.com
Sec-CH-Prefers-Reduced-Transparency: reduce
Accept-CH: Sec-CH-Prefers-Reduced-Transparency

Browser sendet Präferenz für opake Elemente, Server liefert CSS mit solid backgrounds statt backdrop-filter oder rgba-Transparenz.

Beispiel 2 Glasmorphism erlaubt

http 
GET /interface HTTP/1.1
Host: design.example.com
Sec-CH-Prefers-Reduced-Transparency: no-preference

Nutzer ohne Sehbeeinträchtigung erhält moderne UI mit Blur-Effekten, Semi-Transparent Overlays und Frosted Glass Design.

Beispiel 3 CSS Custom Properties Anpassung

http 
HTTP/1.1 200 OK
Accept-CH: Sec-CH-Prefers-Reduced-Transparency
Vary: Sec-CH-Prefers-Reduced-Transparency
Content-Type: text/html

<style>
  :root {
    --overlay-bg: rgb(255, 255, 255);
    --card-opacity: 1.0;
  }
</style>

Server setzt CSS Custom Properties auf vollständig opake Werte für bessere Kontraste und Lesbarkeit bei Sehbeeinträchtigung.

Visual Accessibility Flow

Reduced Transparency Client Hint Ablauf

Vorteile für die Systemarchitektur

  • Barrierefreiheit WCAG: Unterstützt WCAG 2.1 Contrast Minimum Requirements durch Eliminierung transparenter Overlays mit niedrigem Kontrast
  • Kognitive Zugänglichkeit: Reduziert visuelle Komplexität für Nutzer mit kognitiven Beeinträchtigungen oder Aufmerksamkeitsdefiziten
  • Performance-Benefit: Eliminiert rechenintensive backdrop-filter und blur-Effekte, spart GPU-Ressourcen auf schwachen Geräten

Spezifikation

User Preference Media Features Client Hints Headers https://wicg.github.io/user-preference-media-features-headers/

Weitere Spezifikationen

Sec-CH-Prefers-Color-Scheme Header, Sec-CH-Prefers-Reduced-Motion Header