Kontrast prüfen: Farbkontrast-Rechner nach WCAG

Warum der Farbkontrast zählt

Hellgraue Schrift auf Weiß wirkt auf dem Bildschirm im Büro edel. Auf dem Handy in der Sonne, auf einem alten Laptop oder für Menschen mit Sehbehinderung wird sie schnell unlesbar. Dazu lässt die Kontrastempfindlichkeit mit dem Alter nach. Gut lesbare Farben helfen also deutlich mehr Menschen, als man denkt.

Mit diesem Kontrastrechner prüfen Sie das Kontrastverhältnis nach WCAG 2.x zwischen Textfarbe und Hintergrundfarbe. Das Werkzeug zeigt für jedes Kriterium, ob das Farbpaar Stufe AA oder AAA erreicht, und schlägt bei einem Fehlschlag die nächstgelegene korrigierte Farbe vor.

So funktioniert es

1. Wählen Sie unter „Textfarbe“ und „Hintergrundfarbe“ eine Farbe mit dem Farbwähler oder tippen Sie einen Code: HEX (#767676), RGB, HSL oder einen CSS-Namen wie rebeccapurple. Der Regler „Deckkraft“ steuert die Transparenz.
2. Lesen Sie das Kontrastverhältnis und die Tabelle: Jede Zelle zeigt ein Symbol und das Wort „Bestanden“ oder „Nicht bestanden“, nicht nur eine Farbe.
3. Die „Live-Vorschau“ zeigt normalen Text, großen Text, Fettschrift, Schaltfläche, Link, Eingabefeld und Symbol.
4. Reicht der Kontrast nicht, bietet „Korrigierte Farben“ eine Text- oder Hintergrundfarbe an, die AA oder AAA erreicht; „Übernehmen“ setzt sie ein. „Tauschen“ vertauscht beide Farben.
5. Für ein ganzes Designsystem fügen Sie Ihre Paare unter „Liste von Farbpaaren prüfen“ ein, eines pro Zeile, und klicken auf „Liste prüfen“.

„Link zu diesen Farben kopieren“ erzeugt eine Adresse, die dasselbe Paar wieder öffnet. Alles wird in Ihrem Browser berechnet.

Das Kontrastverhältnis einfach erklärt

Jede Farbe erhält eine relative Leuchtdichte von 0 für Schwarz bis 1 für Weiß, berechnet aus Rot, Grün und Blau (Grün zählt am meisten). Das Verhältnis lautet (hellere Leuchtdichte + 0,05) geteilt durch (dunklere Leuchtdichte + 0,05). Es reicht von 1:1 bei zwei gleichen Farben bis 21:1 bei Schwarz auf Weiß. Geprüft wird der exakte Wert ohne Rundung: 4,499 erreicht 4,5 nicht.

Bei einer halbtransparenten Farbe berechnet das Werkzeug zuerst die tatsächlich angezeigte Farbe: Schwarz mit 50 % Deckkraft auf Weiß ergibt #808080, also 3,95:1. Ein transparenter Hintergrund liegt auf Weiß.

Schwellenwerte für AA und AAA

• Normaler Text: 4,5:1 für AA, 7:1 für AAA.
• Großer Text: 3:1 für AA, 4,5:1 für AAA. Als groß gilt Text ab 18 Punkt, also etwa 24 px, oder fett ab 14 Punkt, also etwa 18,66 px.
• Bedienelemente und Grafiken: 3:1 für Feldrahmen, einzelne Symbole, Fokusrahmen oder Diagrammlinien. Hier gibt es keine Stufe AAA.

Stufe AA ist das übliche Ziel. In der Europäischen Union verlangen Richtlinien Barrierefreiheit für Websites öffentlicher Stellen und für viele private Dienste; in Deutschland, Österreich und der Schweiz verweisen die nationalen Regeln auf diese WCAG-Kriterien. Was genau für Sie gilt, hängt von Branche und Land ab: Lassen Sie sich im Zweifel beraten.

Das Kästchen „APCA-Wert anzeigen“ ergänzt einen Wert aus einem noch experimentellen Verfahren, das für künftige Richtlinien diskutiert wird und heute keine offizielle Geltung hat.

Tipps für gut lesbare Farben

• Behalten Sie Ihren Farbton und ändern Sie nur die Helligkeit, wie es „Korrigierte Farben“ tut. Beispiel: #999999 auf Weiß erreicht nur 2,85:1; das Werkzeug schlägt #767676 vor, das hellste Grau mit 4,5:1.
• Vermitteln Sie Informationen nie allein über Farbe: Ergänzen Sie ein Wort, ein Symbol oder eine Unterstreichung. Die „Simulation von Farbfehlsichtigkeit“ zeigt, wie jemand mit Rot-Grün-Schwäche das Paar sieht.
• Bei Text auf einem Foto prüfen Sie die hellste Stelle des Bildes.
• Für ein dunkles Design prüfen Sie auch die umgekehrten Paare.

Häufige Fragen

Welches Kontrastverhältnis sollte ich anstreben?

Mindestens 4,5:1 für Fließtext und 3:1 für großen Text und Bedienelemente: Das ist Stufe AA. Für Fließtext und ein älteres Publikum lohnen sich 7:1.

Warum fällt #777777 durch, obwohl es wie #767676 aussieht?

Die Grenze ist streng: #777777 ergibt 4,48:1, #767676 ergibt 4,54:1. Das Auge sieht keinen Unterschied, aber die Schwelle liegt genau dazwischen.

Braucht Platzhaltertext in Formularen genug Kontrast?

Ja, auch das ist Text und braucht 4,5:1. Nur deaktivierte Bedienelemente sind nach WCAG ausgenommen.

Werden meine Farben irgendwohin gesendet?

Nein. Das aktuelle Paar und Ihre Liste werden nur auf diesem Gerät für den nächsten Besuch gespeichert.