Farbkontrast-Checker nach WCAG
Messen Sie das WCAG-Kontrastverhältnis jeder Kombination aus Text- und Hintergrundfarbe und finden Sie einen passenden Ton, wenn es nicht reicht.
Farbkontrast nach WCAG prüfen
Text mit zu wenig Kontrast gehört zu den häufigsten Barrierefreiheitsfehlern im Web. Er betrifft Menschen mit Sehschwäche oder Farbfehlsichtigkeit, aber auch alle, die ein Smartphone im Sonnenlicht ablesen. Die Web Content Accessibility Guidelines machen aus „lesbar genug“ eine Zahl: das Kontrastverhältnis.
Diese Seite öffnet den Farbkonverter direkt im Reiter „Kontrast“.
WCAG-Schwellenwerte auf einen Blick
| Was Sie prüfen | AA | AAA |
|---|---|---|
| Fließtext und Beschriftungen | 4,5:1 | 7:1 |
| Großer Text (24px oder 18,7px fett) | 3:1 | 4,5:1 |
| Icons, Eingabefeldrahmen, Fokusringe und Diagrammelemente | 3:1 | — |
AA ist die Stufe, auf die sich die meisten Gesetze und Beschaffungsregeln beziehen. AAA ist strenger und bei langen Lesetexten ein lohnendes Ziel, wird aber nicht für jedes Element einer Website erwartet.
Eine durchgefallene Farbe korrigieren
Reicht eine Kombination nicht, schlägt der Checker den nächstgelegenen Ton desselben Farbtons vor, der auf Ihrem Hintergrund 4,5:1 erreicht – so bleibt die Markenfarbe erkennbar, und der Text wird trotzdem lesbar. Typische Lösungen: die Textfarbe um 10 bis 20 Helligkeitspunkte abdunkeln oder die Markenfarbe für große Überschriften und Buttons behalten und für kleinen Text eine dunklere Variante verwenden.
Häufige Fehler
- Grauer Platzhaltertext, der elegant aussieht, aber weit unter 4,5:1 liegt.
- Weißer Text auf hellen Markenfarben wie Orange, Gelb oder Hellgrün.
- Nur das helle Theme prüfen: Der Dark Mode braucht eine eigene Prüfung.
- Text über Bildern: gegen die hellste Stelle messen, auf der der Text stehen kann, oder eine abdunkelnde Fläche unterlegen.
Die Formel hinter dem Verhältnis
Jeder sRGB-Kanal wird auf 0–1 skaliert und linearisiert, dann als 0,2126 R + 0,7152 G + 0,0722 B zur relativen Leuchtdichte kombiniert. Das Verhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. Grün dominiert, weil das Auge dafür am empfindlichsten ist – deshalb fällt Gelb auf Weiß so deutlich durch. Um Farben für den Test vorzubereiten, rechnen Sie sie mit HEX in RGB um oder passen die Helligkeit mit HEX in HSL an.