Farbkontrast prüfen (WCAG)

So funktioniert es

Schreiben Sie Ihre Schriftfarben in das linke Feld, eine Farbe pro Zeile; das Format wird selbst erkannt, #777777, rgb(119, 119, 119) und hsl(0, 0%, 47%) werden gleich gelesen. Die Hintergrundfarbe tragen Sie in das Optionsfeld ein; bleibt es leer, wird Weiß angenommen. Jede Farbe erhält eine einzelne Kennzahl wie 4,48:1 und dazu das Urteil für die gewählte Textgröße auf den Stufen AA und AAA. Ein Beispiel: Auf weißem Grund liefert das Grau #777777 genau 4,48:1 und verfehlt AA für normalen Text knapp; eine Stufe dunkler, #767676, ergibt 4,54:1 und besteht. Unter der Ausgabe werden Farbfelder gezeichnet, damit Sie das Paar nicht nur als Zahl, sondern auch mit dem Auge beurteilen können. Um eine ganze Markenpalette gegen denselben Hintergrund zu prüfen, schreiben Sie alle Farben untereinander — die Statuszeile zählt, wie viele bestanden haben.

Dieses Werkzeug ist auch als farbkontrast pruefen, kontrastverhaeltnis berechnen, wcag kontrast aa aaa, schriftfarbe hintergrund kontrast, barrierefreie farben pruefen bekannt.

Was ist Kontrastverhältnis?

Das Kontrastverhältnis fasst den Helligkeitsunterschied zweier Farben in einer einzigen Zahl zusammen und wird immer als "X:1" geschrieben. Der kleinste mögliche Wert ist 1:1: Beide Farben sind identisch, die Schrift verschwindet im Hintergrund. Der größte Wert ist 21:1, den Schwarz auf Weiß erreicht. Praktisch ist, dass das Maß die Rollen nicht unterscheidet — vertauschen Sie Schrift und Hintergrund, bleibt die Zahl gleich, weil stets durch die dunklere der beiden Farben geteilt wird.

Was ist WCAG-Stufe AA und AAA?

Die WCAG, die Richtlinien für barrierefreie Webinhalte, kennen zwei Konformitätsstufen für lesbaren Text. Stufe AA verlangt 4,5:1 bei normalem und 3:1 bei großem Text; darauf verweist in Deutschland die BITV 2.0, weshalb sie für Behörden und öffentlich finanzierte Angebote maßgeblich ist. Stufe AAA hebt die Schwelle auf 7:1 beziehungsweise 4,5:1. Logos, deaktivierte Schaltflächen und rein dekorativer Text sind von beiden Stufen ausgenommen.

Was ist Relative Leuchtdichte?

Die relative Leuchtdichte gibt an, wie viel Licht eine Farbe abgibt, auf einer Skala von 0 für Schwarz bis 1 für Weiß. Sie entsteht in zwei Schritten: Zuerst wird jeder Kanal linearisiert, also die Gammakodierung des Bildschirms zurückgerechnet; danach werden die linearen Kanäle mit den Faktoren 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau addiert. Diese Gewichte bilden das menschliche Auge ab, das auf Grün stark und auf Blau kaum reagiert — deshalb bringt ein helleres Blau für den Kontrast fast nichts.

Worin unterscheiden sich AA und AAA?

Beide Stufen verwenden dasselbe Kontrastverhältnis, nur die Bestehensgrenze unterscheidet sich: Bei normalem Text fordert AA 4,5:1, AAA dagegen 7:1. Der Abstand ist größer, als er klingt — auf weißem Grund ist #767676 das hellste Grau, das AA besteht, während für AAA schon #595959 nötig ist. Der Fließtext muss also sichtbar dunkler werden. In der Praxis wird AA flächendeckend angestrebt; AAA bleibt langen Lesetexten, Bildschirmen im Freien und Angeboten für ältere Zielgruppen vorbehalten.

Warum ein lesbar wirkendes Grau trotzdem durchfällt

Das Verhältnis wird aus der Lichtmenge berechnet, die jede Farbe abgibt — und die steckt nicht direkt in den Zahlen des HEX-Codes. Jeder Kanal wird zuerst linearisiert, also die Gammakurve des Bildschirms rückgängig gemacht; danach wird Grün rund dreimal stärker gewichtet als Rot und zehnmal stärker als Blau.

Die Folge in der Praxis: Zwei Farben, die gleich dunkel aussehen, ergeben nicht denselben Wert. Auf Weiß erreicht reines Blau #0000FF 8,59:1, das dunkler wirkende Grün #008000 dagegen nur 5,14:1. Entscheiden Sie nach der Zahl, nicht nach dem Eindruck; die Bildschirmhelligkeit verfälscht das Urteil ohnehin.

Welche Stufe sollten Sie anstreben?

AA ist die Untergrenze für öffentlich zugängliche Angebote; in Deutschland verlangt die BITV 2.0 für Stellen des Bundes genau diese Stufe. AAA ist deutlich strenger und wird selten auf den gesamten Fließtext angewendet.

• Fließtext, Formularbeschriftungen, Fehlermeldungen → mindestens AA (4,5:1)
• Große Überschriften (ab 18pt, fett ab 14pt) → 3:1 genügt
• Bildschirme im Freien oder für ältere Leserinnen und Leser → AAA (7:1)
• Blasser grauer Hilfetext → die häufigste Fehlstelle; bleiben Sie über 4,5:1

Häufige Fragen

Wie wird das Kontrastverhältnis berechnet?

Für beide Farben wird die relative Leuchtdichte einzeln bestimmt, danach wird (hellere + 0,05) / (dunklere + 0,05) gebildet. Das Ergebnis reicht von 1:1 bei zwei gleichen Farben bis 21:1 bei Schwarz auf Weiß.

Was gilt genau als großer Text?

WCAG zählt Text ab 18 Punkt als groß, bei fetter Schrift bereits ab 14 Punkt. Im Web entspricht das etwa 24 Pixel normal und 18,66 Pixel fett.

Spielt es eine Rolle, welche Farbe Schrift und welche Hintergrund ist?

Nein. Die Formel stellt immer die hellere Farbe in den Zähler, deshalb ändert ein Tausch von Schrift und Hintergrund den Wert nicht. Es ändert sich nur Ihr Leseeindruck.

Werden meine Farben irgendwohin übertragen?

Nein. Die Berechnung läuft vollständig in Ihrem Browser; die eingegebenen Farbcodes erreichen keinen Server und keinen Dritten.