Tools · Farbe · Farbkontrast prüfen
Farbkontrast prüfen
Prüfe, ob zwei Farben die WCAG-Kontrastanforderungen für Text und Bedienoberfläche erfüllen.
Füge eine Datei hinzu und starte das Tool.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
Einstellungen
Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.
Läuft komplett im Browser. Es wird nichts hochgeladen.
Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.
So funktioniert es
Eine Textfarbe und eine Hintergrundfarbe wählen oder eingeben.
Das Kontrastverhältnis ablesen und sehen, ob es AA und AAA besteht.
Eine der beiden Farben anpassen, bis sie die gewünschte Stufe besteht.
Häufige Fragen
4,5:1 für normalen Text, und 3:1 für großen Text (18pt, oder 14pt fett) sowie für UI-Komponenten und bedeutungstragende Grafiken.
Text braucht 7:1 und großer Text 4,5:1 - eine strengere Stufe, für die meisten Websites nicht vorgeschrieben, aber sinnvoll, wo sie leicht erreichbar ist.
18pt (24px) normal, oder 14pt (19px) fett, nach der eigenen Definition von WCAG.
Ja, es prüft auch den 3:1-Schwellenwert für UI-Komponenten (wie Button-Rahmen und Formularfelder) und bedeutungstragende Grafiken, nach der Nicht-Text-Kontrastregel von WCAG 2.1.
Nein. Das Verhältnis wird vollständig in deinem Browser berechnet.
Anleitungen
Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.
Why 'It Looks Fine to Me' Isn't Good Enough for Text Color
Contrast is a measurable ratio, not a matter of taste - and a designer judging a color pair on their own calibrated screen is testing one combination out of many their visitors actually have.
Anleitung lesenHow to Check Your Text Passes WCAG Contrast (AA and AAA)
Pick a text color and a background color and four pass/fail badges update immediately - no button to press. Here is what each one means and how to read them.
Anleitung lesenDark Mode Text Contrast: Why Light Gray Often Fails WCAG
Softening white text toward gray feels right on a dark background, and it is exactly where contrast ratios erode fastest. Here is where the real numbers land.
Anleitung lesen
Kommentare