Kontrast Checker
Berechnet das WCAG-Kontrastverhältnis zwischen Text- und Hintergrundfarbe und bewertet normale sowie große Schrift nach AA und AAA.
Dieses Beispiel zeigt die gewählte Text- und Hintergrundfarbe direkt aufeinander.
Bewertung
Der vollständige Barrierefreiheit-Audit prüft zusätzlich Alternativtexte, Formularlabels, Linktexte, Landmarks, Titel, Sprache und weitere technische Signale.
Audit startenWarum Farbkontrast zur Barrierefreiheit gehört
Ausreichender Kontrast macht Texte, Buttons, Hinweise und Formularfehler besser lesbar. Besonders Menschen mit Sehbeeinträchtigungen, ältere Nutzer und Nutzer in ungünstigen Lichtverhältnissen profitieren davon.
Die WCAG unterscheidet normale und große Schrift. Normale Schrift benötigt in der Regel ein höheres Kontrastverhältnis als große oder fette Schrift.
Typische Einsatzbereiche
- Primäre und sekundäre Buttons.
- Navigation, Breadcrumbs und Footerlinks.
- Formularhinweise, Fehlermeldungen und Pflichtfeldmarkierungen.
- Badges, Preislabels, Tabellen und Dashboard-KPIs.
Kontrast Checker FAQ
Welcher Kontrast ist für normale Schrift nötig?
Für WCAG AA wird bei normaler Schrift typischerweise ein Verhältnis von mindestens 4,5:1 verwendet. Für große Schrift gilt ein niedrigerer Grenzwert.
Prüft der Kontrast Checker die ganze Website?
Nein, dieses Tool berechnet einzelne Farbkombinationen. Für eine technische Website-Prüfung nutzen Sie den Barrierefreiheit Mini-Audit.
Kontrast nicht nur im Designsystem prüfen
Ein Farbpaar kann im Styleguide bestehen und trotzdem auf echten Seiten problematisch sein, wenn es auf Bildern, Verläufen, deaktivierten Zuständen oder kleinen Badges verwendet wird. Deshalb sollten kritische UI-Zustände zusätzlich im Kontext geprüft werden.
Priorisierung in der Praxis
- Buttons, Links, Fehlermeldungen und Formulare priorisieren
- Hover-, Focus-, Disabled- und Alert-Zustände separat testen
- Text auf Bildern oder transparenten Overlays besonders vorsichtig bewerten
Nächster sinnvoller Check
Für ganze Websites ergänzt der WCAG Checker die Einzelmessung um URL-basierte Hinweise auf weitere Barrierefreiheitsrisiken.
Wann Kontrast-Funde kritisch sind
Kritisch sind Texte und Bedienelemente, die Entscheidungen auslösen: Preise, Fehlermeldungen, Formularhinweise, primäre Buttons, Status-Badges und Navigation. Wenn diese Elemente schwer lesbar sind, leidet nicht nur Barrierefreiheit, sondern auch die Abschlussrate.
Kontrast sollte zudem nach Zuständen geprüft werden. Hover, Fokus, deaktivierte Buttons, Warnungen und Text auf Bildern unterscheiden sich oft deutlich vom Standardzustand im Designsystem.