Der WebAIM Contrast Checker ist ein kostenloses Online-Werkzeug der Organisation WebAIM unter webaim.org/resources/contrastchecker. Man gibt Vorder- und Hintergrundfarbe als Hex-Wert ein oder wählt sie per Pipette, und das Tool berechnet das Kontrastverhältnis nach der WCAG-Formel.
WCAG-Grenzwerte, die das Tool prüft
- Normaler Text, AA (1.4.3): mindestens 4,5:1
- Großer Text, AA: mindestens 3:1 (ab 24 px bzw. 18,66 px fett)
- Normaler Text, AAA (1.4.6): mindestens 7:1
- Großer Text, AAA: mindestens 4,5:1
- Grafische Objekte und UI-Komponenten (1.4.11): mindestens 3:1
Das maximale Verhältnis ist 21:1 (Schwarz auf Weiß). Mit dem Helligkeitsregler lassen sich Farben schrittweise anpassen, bis sie bestehen.
Alternativen
Colour Contrast Analyser (TPGi, Desktop-App mit Pipette), die Kontrastanzeige in den Chrome DevTools, Figma-Plugins wie Stark sowie WAVE für ganze Seiten.
Häufige Fragen
Kann ich Text auf Bildern oder Verläufen prüfen?
Nur punktuell: Prüfen Sie die hellste bzw. dunkelste Stelle hinter dem Text. Sicherer ist ein deckender Hintergrund oder Overlay hinter dem Text.
Was ist APCA?
APCA ist ein neues Kontrastmodell, das für WCAG 3 diskutiert wird. Rechtlich maßgeblich bleibt derzeit die WCAG-2-Formel.
Verwandte Begriffe: Kontrastverhältnis, WAVE, Hochkontrastmodus, Automatische Prüftools