WCAG-Kontrastprüfer
Wähle eine Textfarbe und eine Hintergrundfarbe: Du erhältst das Kontrastverhältnis, das Ergebnis für AA und AAA (bestanden oder nicht) und eine echte Vorschau, die zeigt, wie gut sich der Text lesen lässt.
Kontrastverhältnis (von 1:1 bis 21:1)
Dies ist ein Beispiel für normalen Text: ein Absatz, wie ihn deine Besucher jeden Tag lesen.
Dies ist eine große Überschrift
Was die Stufen AA und AAA bedeuten
Die WCAG (Web Content Accessibility Guidelines) messen die Lesbarkeit mit einem Kontrastverhältnis, das von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß) reicht. Die Stufe AA, der Standard, den die meisten Vorschriften zur Barrierefreiheit vorschreiben, fordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Die strengere Stufe AAA verlangt stattdessen 7:1 und 4,5:1. Als „großer Text“ gilt Text ab 24 px oder ab 18,5 px, wenn er fett ist.
Warum Kontrast wirklich wichtig ist
Etwa jeder zwanzigste Mensch ist sehbehindert oder hat eine Farbsehschwäche, und jeder tut sich schwer, einen Bildschirm in direktem Sonnenlicht oder bei heruntergedrehter Helligkeit zu lesen. Zu wenig Kontrast ist einer der häufigsten Barrierefreiheitsfehler im Web und einer der am leichtesten zu behebenden: Oft reicht es, den Text ein paar Nuancen dunkler oder den Hintergrund ein paar Nuancen heller zu machen. Denk daran, auch sekundäre Zustände zu prüfen, etwa Links, Platzhalter und den Text auf farbigen Schaltflächen.