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 Website-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.
Grauen Fließtext auf Weiß beurteilen
Praxisbeispiel · zur Veranschaulichung
Ausgangslage
Geben Sie #777777 als Textfarbe und #FFFFFF als Hintergrund ein.
Befund einordnen
Das Verhältnis beträgt ungefähr 4,48:1. Damit wird 4,5:1 für normalen Text knapp verfehlt; nicht auf einen gerundeten Grenzwert vertrauen.
Konkrete Änderung
Textfarbe beispielsweise auf #767676 abdunkeln; das ergibt rund 4,54:1. Große Schrift und nichttextliche Elemente haben andere Anforderungen.
Kontrolle und Grenze
Die tatsächliche Kombination inklusive Hover, Fokus, Transparenz und Hintergrundbildern im Layout prüfen. Der Rechner bewertet nur die eingegebenen Farben.