Kontrastprüfung
Wählen Sie Textfarbe und Hintergrund, dann wird das Kontrastverhältnis berechnet und gegen die WCAG geprüft.
Kontrastverhältnis
16,69:1
Die Skala reicht von 1:1 bei zwei gleichen Farben bis 21:1 bei Schwarz auf Weiß.
So sieht es aus
Überschrift in großem Text
Fließtext in dieser Größe stellt die höchsten Anforderungen an den Kontrast, weil die Buchstaben dünn sind.
Anforderungen nach WCAG
- Fließtext, AAUnter 18 Punkt, oder unter 14 Punkt halbfett · 4,5:1Erfüllt
- Fließtext, AAAUnter 18 Punkt, oder unter 14 Punkt halbfett · 7:1Erfüllt
- Großer Text, AAAb 18 Punkt, oder 14 Punkt halbfett · 3:1Erfüllt
- Großer Text, AAAAb 18 Punkt, oder 14 Punkt halbfett · 4,5:1Erfüllt
- Bedienelemente und Grafik, AARahmen, Symbole und anderes, das Bedeutung trägt · 3:1Erfüllt
So funktioniert es
Das Kontrastverhältnis misst den Unterschied in der relativen Leuchtdichte zwischen zwei Farben. Es reicht von 1:1 bei zwei gleichen Farben bis 21:1 bei Schwarz auf Weiß.
Die WCAG verlangt für Fließtext mindestens 4,5:1 auf Stufe AA und 7:1 auf Stufe AAA. Für großen Text – ab 18 Punkt oder 14 Punkt halbfett – genügen 3:1 und 4,5:1.
Bedienelemente und Grafik, die Bedeutung trägt, brauchen 3:1 gegen die Umgebung. Das gilt etwa für den Rahmen eines Eingabefelds und für Symbole ohne Text daneben.
Das Verhältnis wird aus der Leuchtdichte der Farben berechnet, nicht daraus, wie verschieden sie aussehen. Zwei Farben mit gleicher Helligkeit, aber ganz verschiedenem Farbton, etwa Rot (#ff0000) und Grün (#009400), bekommen das Verhältnis 1,00 und sind unlesbar, obwohl sie verschieden aussehen.
Die Anforderungen sind eine Untergrenze, kein Ziel. Text, der genau auf 4,5:1 liegt, ist im Sonnenlicht oder auf einem billigen Bildschirm immer noch anstrengend zu lesen.
So rechnet das Werkzeug
Jeder Kanal wird durch 255 geteilt und linearisiert: Werte bis 0,04045 werden durch 12,92 geteilt, und größere Werte v werden zu ((v + 0,055) / 1,055) hoch 2,4. Die relative Leuchtdichte ist 0,2126 R + 0,7152 G + 0,0722 B, und das Verhältnis ist (L1 + 0,05) / (L2 + 0,05) mit der helleren Farbe als L1. Die Schwelle 0,04045 steht seit Mai 2021 in den WCAG; vorher war es 0,03928, und das W3C sagt, die Änderung habe keine praktische Auswirkung. Für Hex-Farben macht sie überhaupt keinen Unterschied, weil kein Kanalwert zwischen die beiden fällt: 10/255 ist 0,0392 und 11/255 ist 0,0431.
Rechenbeispiel
#767676 auf Weiß: Der Kanal 118/255 = 0,463 wird linearisiert zu 0,181, und weil alle drei Kanäle gleich sind, ist auch die Leuchtdichte 0,181. Das Verhältnis ist (1 + 0,05) / (0,181 + 0,05) = 4,54 und erfüllt AA für Fließtext. Eine Stufe heller ergibt #777777 nur 4,478 und erfüllt es nicht. Das hellste Grau, das auf Weiß AAA erfüllt, also 7:1, ist #595959 mit 7,0047; die nächste Stufe, #5a5a5a, ergibt 6,897.
Keine Rundung
Die Erläuterung des W3C zum Erfolgskriterium 1.4.3 sagt, dass das Verhältnis nicht gerundet werden soll: 4,499:1 erfüllt 4,5:1 nicht. Das Werkzeug urteilt nach dem ungerundeten Wert und schneidet die angezeigte Zahl ab, statt sie zu runden. #0080aa auf Weiß ergibt 4,4986 und erfüllt AA für Fließtext nicht. Gerundet stünde dort 4,50 neben einem Nicht erfüllt, deshalb zeigt das Werkzeug 4,49:1, und #777777 erscheint als 4,47:1.
Großer Text und die Vorgaben des Bundes
Die Schwelle für großen Text ist in Punkt festgelegt. Mit 1 pt = 1,333 CSS-Pixel entsprechen nach derselben Erläuterung 18 Punkt etwa 24 Pixeln und 14 Punkt etwa 18,5 Pixeln. Sie warnt auch, dass dünne Schriften durch Kantenglättung blasser dargestellt werden können als ihre Farbe, sodass Text, der das Verhältnis erfüllt, in der Praxis trotzdem schwach wirken kann.
Für Websites und Apps, die unter die BITV 2.0 fallen, wird nach deren § 3 vermutet, dass sie barrierefrei sind, wenn sie den harmonisierten Normen entsprechen. Die Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik nennt in ihrer Handreichung 4,5:1 für Text als Muss nach EN 301 549, 3:1 für große Schrift ab 24 Pixeln oder ab 18,7 Pixeln in fetter Schrift und 7:1 als Soll. Das Werkzeug prüft nur deckende Hex-Farben, ohne Transparenz und ohne Bild im Hintergrund.