Farbkontrast-Checker
Prüfen Sie jede Kombination aus Text- und Hintergrundfarbe nach WCAG 2.2 AA und AAA. Sie erhalten das exakte Kontrastverhältnis, das Ergebnis für normalen Text, großen Text und UI-Komponenten sowie einen teilbaren Link. Kostenlos und privat: Alles läuft in Ihrem Browser.
Vorlagen
Live-Vorschau
Große Überschrift (24 px fett)
Normaler Fließtext in 16 px. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Guter Kontrast hält Absätze lesbar – für Menschen mit Sehbehinderung, Farbenblindheit oder einem Handy in praller Sonne.
Kleingedrucktes in 14 px – auch das muss den Schwellenwert für normalen Text erfüllen.
So wird das Kontrastverhältnis berechnet
WCAG definiert Kontrast über die relative Leuchtdichte – also wie hell das menschliche Auge eine Farbe wahrnimmt, auf einer Skala von 0 (Schwarz) bis 1 (Weiß). Für jede Farbe geht ContrastCheck so vor:
- Der Hex-Wert wird in die Kanäle Rot, Grün und Blau zerlegt und jeder Kanal durch 255 geteilt.
- Jeder Kanal wird linearisiert: Werte ≤ 0,04045 werden durch 12,92 geteilt, alle anderen mit
((c + 0.055) / 1.055)^2.4umgerechnet. - Die Kanäle werden nach der Empfindlichkeit des Auges gewichtet:
L = 0.2126·R + 0.7152·G + 0.0722·B.
Das Kontrastverhältnis ist dann (L_lighter + 0.05) / (L_darker + 0.05) und reicht von 1:1 bei identischen Farben bis 21:1 bei Schwarz auf Weiß. Das Ergebnis wird ungerundet mit den Schwellenwerten verglichen: 4,5:1 (AA) und 7:1 (AAA) für normalen Text, 3:1 (AA) und 4,5:1 (AAA) für großen Text sowie 3:1 für UI-Komponenten und Grafiken.
Unsicher, welche Stufe Sie anstreben sollten? Lesen Sie WCAG AA vs. AAA: Welcher Kontrast ist der richtige?
FAQ zum Farbkontrast-Checker
›Welches Farbkontrastverhältnis ist gut?
WCAG 2.2 Stufe AA verlangt mindestens 4,5:1 für normalen Fließtext und 3:1 für großen Text. Stufe AAA hebt das auf 7:1 für normalen und 4,5:1 für großen Text an. Die Werte reichen von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß).
›Was gilt in WCAG als großer Text?
Großer Text hat mindestens 18 Punkt (etwa 24 CSS-Pixel) in normaler Schriftstärke oder mindestens 14 Punkt (etwa 18,66 CSS-Pixel) in Fettschrift. Für großen Text gelten niedrigere Schwellenwerte, weil größere Zeichen leichter zu lesen sind.
›Was bedeutet die 3:1-Anforderung für UI-Komponenten und Grafiken?
Das WCAG-Erfolgskriterium 1.4.11 „Nicht-Text-Kontrast“ verlangt ein Verhältnis von 3:1 für die sichtbaren Begrenzungen interaktiver Bedienelemente (Eingabefeldrahmen, Fokusindikatoren, Schalterzustände) und für grafische Objekte wie Icons und Diagrammlinien, die zum Verständnis der Inhalte nötig sind.
›Spielt die Reihenfolge von Vorder- und Hintergrund eine Rolle?
Nein. Die WCAG-Formel teilt immer die Leuchtdichte der helleren Farbe durch die der dunkleren. Tauschen Sie Vorder- und Hintergrund, bleibt das Verhältnis gleich. Die Vorschau ändert sich, die Werte und Ergebnisse nicht.
›Werden meine Daten irgendwohin hochgeladen?
Nein. Dieser Farbkontrast-Checker läuft vollständig in Ihrem Browser. Ihre Farben werden ausschließlich in der Seiten-URL gespeichert (?fg=…&bg=…), damit Sie eine bestimmte Kombination als Lesezeichen speichern oder teilen können.
›Warum fällt 4,49:1 durch, obwohl es so nah an 4,5:1 liegt?
WCAG-Schwellenwerte sind harte Mindestwerte und werden nicht gerundet. ContrastCheck vergleicht das exakte Verhältnis und schneidet den angezeigten Wert ab, statt aufzurunden – eine Kombination mit 4,49:1 besteht AA für normalen Text also nicht. Mit der vorgeschlagenen Farbe schaffen Sie den Sprung über die Grenze.
›Unterstützt dieser Checker APCA oder WCAG 3?
Noch nicht. ContrastCheck verwendet das Kontrastverhältnis nach WCAG 2.x, auf das sich aktuelle Gesetze und Beschaffungsstandards beziehen (ADA-Leitlinien, Section 508, EN 301 549 / European Accessibility Act bzw. Barrierefreiheitsstärkungsgesetz).