Text vom Hintergrund unterscheiden
Das Kontrastverhältnis gibt an, wie stark sich zwei Farben in ihrer relativen Helligkeit unterscheiden. Bei Text vergleichst du die Schriftfarbe mit der Farbe direkt hinter den Buchstaben. Ein ausreichender Unterschied hilft Menschen mit eingeschränktem Sehvermögen beim Lesen.
Der Wert liegt zwischen 1 : 1 für identische Farben und 21 : 1 für Schwarz auf Weiß oder Weiß auf Schwarz. Die WCAG-Berechnung nutzt die relative Helligkeit beider Farben. Zwei auffällig unterschiedliche Farbtöne können trotzdem einen zu geringen Helligkeitskontrast haben.
Im kostenlosen Kontrastchecker kannst du ein Farbpaar eingeben. Er berechnet das Verhältnis lokal in deinem Browser und zeigt, welche Grenzwerte für Text das Farbpaar erreicht.
Grenzwerte für Text nach WCAG
Die WCAG unterscheiden normalen und großen Text. Für großen Text sind niedrigere Kontrastwerte zulässig:
| Text | Stufe AA | Stufe AAA |
|---|---|---|
| Normaler Text | mindestens 4,5 : 1 | mindestens 7 : 1 |
| Großer Text | mindestens 3 : 1 | mindestens 4,5 : 1 |
Die AA-Werte stehen in Erfolgskriterium 1.4.3 „Kontrast (Minimum)“, die AAA-Werte in 1.4.6 „Kontrast (erhöht)“. Sie gelten in WCAG 2.1 und 2.2 unverändert.
Als groß gilt Schrift ab 18 Punkt, entsprechend 24 CSS-Pixeln, oder fette Schrift ab 14 Punkt, entsprechend etwa 18,67 CSS-Pixeln. Eine Überschrift mit 20 CSS-Pixeln und normalem Schriftgewicht zählt damit noch als normaler Text. Entscheidend sind die verwendete Schriftgröße und das Schriftgewicht.
Grenzwerte werden ohne Aufrunden verglichen: 4,499 : 1 verfehlt die Anforderung von 4,5 : 1. Der Kontrastchecker rundet die sichtbare Zahl, verwendet für die Bewertung aber den ungerundeten Wert.
Für Text in Logos, rein dekorativen Text und Text in inaktiven Bedienelementen enthalten die Kriterien Ausnahmen. Gewöhnlicher Seitentext in deinen Markenfarben muss die Grenzwerte weiterhin einhalten. Bei sehr dünnen Schriften kann ein größerer Abstand zum Mindestwert die Lesbarkeit verbessern, wie das W3C in den Hinweisen zum erhöhten Textkontrast erläutert.
Ein Farbpaar korrigieren
Beispiel: Du verwendest #777777 als Schriftfarbe auf Weiß (#ffffff). Dieses Farbpaar erreicht etwa 4,48 : 1 und verfehlt den AA-Grenzwert für normalen Text knapp. Dunkelst du die Schrift auf #767676 ab, steigt das Verhältnis auf etwa 4,54 : 1. Für AAA bei normalem Text reicht auch dieser Wert noch nicht.
Prüfe die Farben an der Stelle, an der der Text erscheint. Ein Button kann im Ausgangszustand ausreichend Kontrast haben und beim Darüberfahren mit der Maus eine andere Hintergrundfarbe erhalten. Auch Fehlermeldungen, Platzhalter und Linkzustände brauchen eine eigene Prüfung.
Übernimm ein passendes Farbpaar danach in die Website und kontrolliere es dort. Schriftart, Schriftgewicht und Schriftgröße beeinflussen die Lesbarkeit zusätzlich zum berechneten Verhältnis.
Grenzen des Farbpaartests
Der ClariSEO-Kontrastchecker berechnet den Textkontrast aus zwei vollständig deckenden sRGB-Farben. Er lädt keine URL und ermittelt keine Farben aus deiner Website. Transparente Flächen, Hintergrundbilder und Verläufe berücksichtigt er nicht. Dort musst du die resultierenden Farben und die ungünstigsten Stellen hinter dem Text prüfen.
Für Bedienelemente und informative Grafiken gibt es das eigene WCAG-Kriterium 1.4.11 „Nicht-Text-Kontrast“. Es fordert in den erfassten Fällen mindestens 3 : 1 zu angrenzenden Farben, zum Beispiel für eine Umrandung, die ein Eingabefeld erkennbar macht. Die Textbewertung des Rechners entscheidet nicht, welche Teile eines Bedienelements dieses Kriterium erfüllen müssen.
Ein bestandenes Farbpaar belegt nur den geprüften Textkontrast. Für die Barrierefreiheit deiner Website musst du weitere Anforderungen prüfen, etwa die Tastaturbedienung, Bildalternativen und Formularbeschriftungen. Der Barrierefreiheitscheck von ClariSEO zeigt automatisiert auffindbare Probleme auf ausgewählten Seiten; manuelle Prüfungen bleiben erforderlich.