Farbkontrast-Prüfer

Prüft Text- und Hintergrundfarben nach WCAG AA und AAA, mit Transparenz und der nächsten Farbe, die besteht.

So funktioniert es

Geben Sie die Textfarbe und die Hintergrundfarbe ein, als Code oder mit der Farbauswahl. Kontrastverhältnis und WCAG-Ergebnisse erscheinen beim Tippen. Farben tauschen vertauscht beide, etwa für hellen Text auf dunklem Grund.

Das Verhältnis folgt WCAG 2.2: Die relative Leuchtdichte jeder Farbe wird aus ihren sRGB-Werten berechnet, und das Verhältnis ist (hellere + 0,05) ÷ (dunklere + 0,05), von 1:1 bei zwei gleichen Farben bis 21:1 für Schwarz auf Weiß. Normaler Text braucht für Stufe AA 4,5:1 und für AAA 7:1; großer Text, mindestens 24 px oder 18,5 px fett, braucht 3:1 und 4,5:1. Symbole, Rahmen von Formularfeldern und andere Bedienelemente brauchen 3:1 gegenüber ihrer Umgebung (Erfolgskriterium 1.4.11).

Das Verhältnis wird vor dem Vergleich nie aufgerundet: Laut W3C erfüllt 4,499:1 die Grenze 4,5:1 nicht. Deshalb wird der Wert auf zwei Dezimalstellen abgeschnitten, nicht gerundet.

Farben können als #Hex mit 3, 4, 6 oder 8 Stellen, als rgb() oder hsl() in beiden CSS-Schreibweisen oder als einer der 148 CSS-Farbnamen angegeben werden. Eine transparente Farbe wird so geprüft, wie sie gemalt wird, gemischt mit der Farbe dahinter; ein transparenter Hintergrund wird auf Weiß geprüft, wie WCAG es annimmt, wenn der Hintergrund unbekannt ist. Besteht der Text nicht, schlägt das Werkzeug die nächste Textfarbe mit gleichem Farbton und gleicher Sättigung vor, die 4,5:1 und 7:1 erreicht. Alles läuft in Ihrem Browser.

Beispiel

Grau #777777 auf Weiß ergibt 4,47:1, knapp unter den 4,5:1, die normaler Text für AA braucht. Das nächste Grau, das besteht, ist #767676 mit 4,54:1.

#777777 auf #ffffff4,47:1: verfehlt AA für normalen Text knapp; #767676 ergibt 4,54:1 und besteht.
#ffffff auf #1a73e84,5:1: weißer Text auf diesem Blau erreicht AA genau und ist weit von AAA entfernt.
rgba(0, 0, 0, 0.5) auf #ffffffWird als #808080 gemalt, also 3,94:1: genug für großen Text und Symbole, nicht für normalen Text.
#ff0000 auf #ffffff3,99:1: reiner roter Text auf Weiß verfehlt AA für normalen Text knapp; #ee0000 besteht mit 4,53:1.

Häufige Fragen

Was ist der Unterschied zwischen AA und AAA?

Es sind zwei Konformitätsstufen der WCAG. AA verlangen die meisten Gesetze und Richtlinien: 4,5:1 für normalen und 3:1 für großen Text. AAA ist strenger, 7:1 und 4,5:1, und das W3C empfiehlt nicht, es für ganze Websites vorzuschreiben, weil manche Inhalte es nicht erreichen können.

Was gilt als großer Text?

Mindestens 18 Punkt oder 14 Punkt fett. Das W3C nennt als CSS-Entsprechung etwa 24 px und 18,5 px. Ein Text ist nicht groß, nur weil seine Schrift groß wirkt; es zählt die Größe.

Gilt die Kontrastregel für Logos und deaktivierte Schaltflächen?

Nein. WCAG nimmt Text in Logos und Markennamen, rein dekorativen Text und Teile einer inaktiven Oberfläche aus, etwa eine deaktivierte Schaltfläche.

Warum zeigt mein Design-Werkzeug ein anderes Verhältnis?

Meist, weil es rundet: 4,495 auf zwei Stellen gerundet ergibt 4,5, erfüllt 4,5:1 aber nicht. Ältere Werkzeuge verwendeten außerdem 0,03928 statt 0,04045 in der Leuchtdichteformel; laut W3C ändert das praktisch nichts.

Werden meine Farben irgendwohin gesendet?

Nein. Die Berechnung läuft in Ihrem Browser.