Anleitung
- Geben Sie die Textfarbe (Vordergrund) und die Hintergrundfarbe als HEX, rgb(), hsl() oder in einem anderen CSS-Format ein, oder verwenden Sie die Farbwähler.
- Lesen Sie das Kontrastverhältnis und das Ergebnis „Bestanden“ oder „Nicht bestanden“ für jede WCAG-Anforderung ab.
- Wenn eine Anforderung nicht erfüllt ist, wählen Sie ein Ziel und übernehmen Sie die vorgeschlagene Farbe. Dabei bleibt der Farbton gleich und nur die Helligkeit ändert sich.
- Mit „Tauschen“ prüfen Sie die umgekehrte Kombination, zum Beispiel hellen Text auf einer dunklen Schaltfläche.
So funktioniert es
Das Verhältnis folgt der Definition in WCAG 2.2: Die relative Leuchtdichte jeder Farbe wird anhand ihrer sRGB-Kanäle berechnet. Das Verhältnis ergibt sich aus (heller + 0.05) ÷ (dunkler + 0.05). Es reicht von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß).
Geprüfte Anforderungen: Erfolgskriterium 1.4.3 (AA) verlangt 4.5:1 für normalen Text und 3:1 für großen Text; 1.4.6 (AAA) verlangt 7:1 und 4.5:1; 1.4.11 verlangt 3:1 für Bedienelemente und aussagekräftige Grafiken wie Eingabefeldrahmen und Symbole. Großer Text ist mindestens 24px normal oder etwa 18.66px fett. WCAG erlaubt kein Aufrunden: 4.49:1 verfehlt AA, auch wenn der Wert knapp darunter liegt. Das hier angezeigte Verhältnis wird abgeschnitten, nicht gerundet.
Der Vorschlag behält den Farbton und die Chroma der Textfarbe in OKLCH bei und sucht die nächstgelegene Helligkeit – dunkler oder heller –, die den Zielwert erreicht. Das Kontrastverhältnis ist nur ein Aspekt der Lesbarkeit: Auch Schriftstärke, Schriftgröße und Unterschiede beim Farbsehen spielen eine Rolle. WCAG 2.2 ist die aktuelle Empfehlung des W3C, auf die sich die meisten Gesetze zur Barrierefreiheit beziehen.
Beispiele
Grauer Text, der den Grenzwert knapp verfehlt
#777777 auf Weiß ergibt 4.48:1. Das reicht für großen Text und Bedienelemente, verfehlt aber AA für normalen Text. Das nächstliegende Grau, das den Grenzwert erreicht, ist etwa #767676 mit 4.54:1.
Weißer Text auf einer Marken-Schaltfläche
Weiß auf #ff8800 ergibt etwa 2.4:1 und verfehlt damit sogar den Grenzwert von 3:1 für großen Text. Üblicherweise dunkelt man das Orange ab oder verwendet stattdessen dunklen Text. Der Vorschlag zeigt, wie dunkel die Textfarbe sein müsste.
Rahmen eines Formularfelds prüfen
Ein hellgrauer Rahmen #cccccc auf Weiß ergibt etwa 1.6:1. Nach Kriterium 1.4.11 muss der Rahmen, der ein Eingabefeld kennzeichnet, mindestens 3:1 erreichen. Dafür ist etwa #949494 oder ein dunklerer Ton nötig.
Häufig gestellte Fragen
Welches Kontrastverhältnis ist für WCAG AA erforderlich?
4.5:1 für normalen Fließtext, 3:1 für großen Text (24px oder 18.66px fett) und 3:1 für Bedienelemente und aussagekräftige Grafiken. Für AAA gelten 7:1 für Text und 4.5:1 für großen Text.
Muss Text in Logos oder auf deaktivierten Schaltflächen die Anforderungen erfüllen?
Nein. WCAG nimmt Text in Logos und Markennamen, rein dekorativen Text sowie Text in inaktiven (deaktivierten) Bedienelementen davon aus.
Warum weicht mein Ergebnis geringfügig von dem eines anderen Prüftools ab?
Manche Tools runden das Verhältnis auf eine Dezimalstelle oder runden es auf. WCAG vergleicht den exakten Wert, daher schneidet dieses Tool den Wert nach zwei Dezimalstellen ab. Auch Farben mit Alpha-Werten können zu kleinen Abweichungen führen.
Was ist mit der neuen APCA-Kontrastmethode?
APCA ist eine andere Methode, die für eine künftige WCAG-Version vorgeschlagen wurde. Sie ist nicht Teil von WCAG 2.2, das dieses Tool prüft und auf das sich die aktuellen Barrierefreiheitsrichtlinien beziehen.
Datenschutz
Die Farben werden in Ihrem Browser geprüft. Es werden keine Daten hochgeladen oder gespeichert.