So funktioniert es
Gib eine Textfarbe und eine Hintergrundfarbe ein, und du erhältst ihr Kontrastverhältnis, eine Live-Vorschau sowie „bestanden“ oder „nicht bestanden“ für jede WCAG-Stufe. Fällt das Paar durch, schlägt der Prüfer die nächstgelegene Textfarbe mit demselben Farbton vor, die 4,5:1 erreicht, und ein Tippen übernimmt sie.
Kontrastverhältnis = (hellere Leuchtdichte + 0,05) ÷ (dunklere Leuchtdichte + 0,05)
WCAG-Anforderungen
- Normaler Text: mindestens 4,5:1 für AA und 7:1 für AAA.
- Großer Text (24 px oder 18,66 px fett): mindestens 3:1 für AA und 4,5:1 für AAA.
- Buttons, Icons und Formularränder: mindestens 3:1 gegenüber ihrer Umgebung.
Tipps
- Grauer Text auf Weiß fällt oft durch – prüfe auch Platzhalter und Bildunterschriften.
- Guter Kontrast hilft allen, auch Menschen, die draußen auf dem Smartphone lesen.
- Mit der Tausch-Schaltfläche prüfst du hellen Text auf dunklem Hintergrund.
Grundlagen und Quellen
- Kontrastformel und Schwellenwerte folgen den WCAG-2.2-Erfolgskriterien 1.4.3, 1.4.6 und 1.4.11 (W3C)
Zuletzt geprüft am 7. Oktober 2026
Häufige Fragen
Welches Kontrastverhältnis brauche ich?
Normaler Text braucht 4,5:1 für WCAG AA und 7:1 für AAA. Großer Text braucht 3:1 für AA und 4,5:1 für AAA.
Was gilt als großer Text?
Text mit mindestens 24 px oder mit mindestens 18,66 px in Fettschrift.
Was mache ich, wenn meine Farben durchfallen?
Nutze die vorgeschlagene Farbe. Sie behält Farbton und Sättigung bei und ändert nur die Helligkeit, bis das Paar 4,5:1 erreicht.
Ist Kontrast auch für Buttons und Icons wichtig?
Ja. WCAG verlangt mindestens 3:1 zwischen Bedienelementen wie Buttons, Icons und Eingabefeldrändern und ihrer Umgebung.
Beeinflusst Transparenz das Ergebnis?
Der Prüfer verwendet deckende Farben. Prüfe bei halbtransparentem Text die Farbe, die du tatsächlich auf dem Hintergrund siehst.