Farbkontrast: Warum gerundete 4,5 trotzdem nicht genügen
Prüfen Sie sRGB-Kontrast ohne Zwischenrundung und unterscheiden Sie ein Farbpaar von einer vollständig barrierefreien Oberfläche.
Methode
Kontrast beschreibt den Unterschied der relativen Leuchtdichte von Text und tatsächlichem Hintergrund. Prüfen Sie die Farben innerhalb des Abzeichens. Blasser Text auf einer hellen Fläche kann unlesbar sein, obwohl das umgebende Ergebnisfeld dunkel ist.
Bei deckenden sRGB-Farben werden die roten, grünen und blauen Kanäle normiert und linearisiert. Daraus entsteht die relative Leuchtdichte. Teilen Sie den helleren Wert plus 0,05 durch den dunkleren plus 0,05. Schwarz auf Weiß ergibt 21:1, gleiche Farben ergeben 1:1.
Grauer Text RGB 119,119,119 auf Weiß erreicht ungefähr 4,478089:1. RGB 118,118,118 erreicht ungefähr 4,542225:1. Auf eine Nachkommastelle gerundet erscheinen beide als 4,5. Nur die zweite Kombination erreicht aber die AA-Grenze von 4,5:1 für normalen Text. Entscheidend ist der ungerundete Wert.
Daten ansehen
- RGB 119,119,119
- 4.478089 :1 4.478089… < 4.5
- RGB 118,118,118
- 4.542225 :1 4.542224… > 4.5
Rechenbeispiel
Grauer Text RGB 119,119,119 auf Weiß erreicht ungefähr 4,478089:1. RGB 118,118,118 erreicht ungefähr 4,542225:1. Auf eine Nachkommastelle gerundet erscheinen beide als 4,5. Nur die zweite Kombination erreicht aber die AA-Grenze von 4,5:1 für normalen Text. Entscheidend ist der ungerundete Wert.
Für entsprechend große Schrift gilt bei AA eine Grenze von 3:1. Schriftgröße und Gewicht müssen die Definition erfüllen; ein breites Abzeichen macht die Schrift nicht groß. Für normalen Text liegt die AAA-Grenze bei 7:1. Wählen Sie zuerst die zutreffende Textkategorie.
L = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)
contrast = (lighter L + 0.05) / (darker L + 0.05)
RGB(119,119,119) on white ≈ 4.478089 : 1
RGB(118,118,118) on white ≈ 4.542225 : 1
Ein Farbpaar bestätigt nicht die Barrierefreiheit der ganzen Seite. Prüfen Sie Fokus, Mauszeigerzustand, Fehler und deaktivierte Elemente in beiden Themen sowie Transparenz, Verläufe und Bilder. Beachten Sie außerdem Schriftgröße, Tastaturbedienung und nichttextliche Hinweise. Farbe sollte immer durch verständliche Beschriftungen ergänzt werden.
Daten ansehen
- RGB 119,119,119
- #777777
- RGB 255,255,255
- #FFFFFF
- Ergebnis
- 4.478089 : 1
Prüfungen und Grenzen
Ein Farbpaar bestätigt nicht die Barrierefreiheit der ganzen Seite. Prüfen Sie Fokus, Mauszeigerzustand, Fehler und deaktivierte Elemente in beiden Themen sowie Transparenz, Verläufe und Bilder. Beachten Sie außerdem Schriftgröße, Tastaturbedienung und nichttextliche Hinweise. Farbe sollte immer durch verständliche Beschriftungen ergänzt werden.