sRGB in der Kontrastberechnung verstehen

1. Was ist sRGB?

sRGB (Standard Red Green Blue) ist der Standard-Farbraum f��r das Web, definiert durch den internationalen Standard IEC 61966-2-1. 1996 von HP und Microsoft entwickelt, wurde sRGB konzipiert, um eine konsistente Farberfahrung über Monitore, Drucker und Digitalkameras hinweg zu bieten. WCAG 2.2 schreibt sRGB als Referenz-Farbraum für die Berechnung der relativen Leuchtdichte und Kontrastverhältnisse vor. Das bedeutet, jede Kontrastberechnung muss die sRGB-Transferfunktion verwenden, um vergleichbare Ergebnisse zu liefern. Die Wahl von sRGB stellt sicher, dass Barrierefreiheitsmessungen konsistent sind, unabhängig davon, welches Tool die Berechnung durchführt.

2. Die sRGB-Transferfunktion

Bildschirme emittieren Licht nicht proportional zu den gespeicherten Farbwerten. Ein Pixelwert von 128 (von 255) erzeugt nicht die Hälfte des Lichts eines Pixels bei 255. Diese nichtlineare Beziehung heißt Gamma-Kodierung, und die sRGB-Transferfunktion ist die spezifische Kurve, die sie umkehrt. Für genaue Kontrastberechnung muss jeder Farbkanal (R, G, B) zunächst linearisiert werden. Die sRGB-Spezifikation definiert eine stückweise Funktion: Werte bei oder unter 0,04045 werden durch 12,92 geteilt, höhere Werte verwenden die Formel ((Wert + 0,055) / 1,055) hoch 2,4. Dieser Linearisierungsschritt ist entscheidend. Ohne ihn würden mittlere Farbtöne erheblich falsche Luminanzwerte erzeugen.

3. sRGB vs. andere Farbräume

Moderne Displays unterstützen zunehmend breitere Farbräume wie Display P3 (Apple-Geräte) und Adobe RGB (professionelle Fotografie). Diese Räume können lebendigere Farben als sRGB darstellen. Jedoch verwenden WCAG-Kontrastberechnungen immer sRGB, auch wenn das Display einen breiteren Gamut unterstützt. In CSS mit P3 oder anderen Räumen angegebene Farben werden für die Kontrastmessung auf ihre sRGB-Äquivalente abgebildet. Dies ist eine bewusste Entscheidung: sRGB bietet eine universelle Baseline. In der Praxis bedeutet dies, dass ein Farbpaar, das den WCAG-Kontrast in sRGB besteht, auch auf Displays mit breiterem Gamut lesbar sein wird. Wenn Sie in Display P3 oder Adobe RGB entwerfen, überprüfen Sie immer Ihre Kontrastverhältnisse mit der sRGB-basierten WCAG-Formel.

4. Praktische Auswirkungen für Designer

Das Verständnis von sRGB ist für die tägliche Designarbeit in mehrfacher Hinsicht wichtig. Erstens: Geben Sie Ihre Designfarben immer als sRGB-Hex-Werte (#RRGGBB) für Webprojekte an — das ist was Browser standardmäßig rendern und was Accessibility-Tools auswerten. Zweitens: Beachten Sie, dass Farbwerte aus Design-Tools wie Figma oder Sketch möglicherweise andere Farbprofile verwenden. Beim Export für Web stellen Sie sicher, dass Sie im sRGB-Farbprofil arbeiten. Drittens: Die sRGB-Gammakurve bedeutet, dass Kontraständerungen nicht linear sind. Kleine Anpassungen an sehr dunklen oder sehr hellen Farben haben einen größeren Effekt auf das Kontrastverhältnis als dieselbe Anpassung bei mittleren Farben. Arbeiten Sie beim Feintuning mit geöffnetem Kontrast-Checker.

Beispiel ausprobieren →