Contrast Checker: Farbkontrast prüfen
Gib die Textfarbe und die Hintergrundfarbe ein und sieh sofort das Kontrastverhältnis, mit WCAG-AA- und AAA-Ergebnis für normalen Text, großen Text und UI-Komponenten.
| Element | AA | AAA |
|---|---|---|
| Normaler Text AA 4,5:1 · AAA 7:1 | Nicht bestanden | Nicht bestanden |
| Großer Text AA 3:1 · AAA 4,5:1 | Bestanden | Nicht bestanden |
| UI-Komponenten 3:1 (Kriterium 1.4.11) | Bestanden | Nicht anwendbar |
Ändert nur die Helligkeit des Texts, bis 4,5:1 mit möglichst kleiner Änderung erreicht sind.
Beispiel für großen Text
Das ist ein Beispieltext in normaler Größe, damit du siehst, wie sich die Kombination liest.
So nutzt du den Contrast Checker
Gib die Textfarbe im ersten Feld und die Hintergrundfarbe im zweiten ein. Jedes Feld versteht HEX (#5271FF), rgb(), hsl() und die 148 CSS-Farbnamen wie tomato. Das Quadrat daneben öffnet den Farbwähler des Systems, und der Button in der Mitte tauscht Text und Hintergrund.
Die große Zahl ist das Kontrastverhältnis, von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). Die Tabelle zeigt, ob es für jeden Elementtyp AA und AAA besteht, und die Vorschau wendet das Paar auf eine Überschrift, einen Absatz und einen Button an. Erreicht der Text 4,5:1 nicht, macht der Anpassen-Button nur den Text dunkler oder heller, mit gleichem Farbton, bis AA mit der kleinstmöglichen Änderung bestanden ist.
Was das Kontrastverhältnis ist
Das Verhältnis vergleicht die relative Luminanz der beiden Farben, also wie hell jede für das Auge wirkt. Die Formel aus WCAG 2.2 lautet (L1 + 0,05) / (L2 + 0,05), wobei L1 die Luminanz der helleren und L2 die der dunkleren Farbe ist. Die 0,05 verhindern die Division durch null und berücksichtigen das Umgebungslicht, das auf dem Bildschirm spiegelt.
Die Luminanz ist 0,2126 × R + 0,7152 × G + 0,0722 × B, wobei jeder Kanal zuvor von sRGB in lineares Licht umgerechnet wird. Dabei wird der Wert durch 12,92 geteilt, wenn er höchstens 0,04045 beträgt, und darüber gilt ((Wert + 0,055) / 1,055) ^ 2,4. Grün zählt am meisten, weil das Auge dafür empfindlicher ist. WCAG 2.0 nannte 0,03928 statt 0,04045, und der Unterschied ändert bei 8-Bit-Kanälen kein Ergebnis.
Das Verhältnis wird nie aufgerundet: 4,499 besteht 4,5 nicht. Würde die Rundung auf zwei Nachkommastellen eine durchgefallene Kombination mit dem Schwellenwert anzeigen, schneidet die Seite die Zahl ab, statt zu runden.
AA und AAA: was jede Stufe verlangt
WCAG kennt für Text zwei Kontraststufen. AA verlangt in Kriterium 1.4.3 für normalen Text 4,5:1 und für großen Text 3:1 und ist die am häufigsten angestrebte Stufe. AAA verlangt in Kriterium 1.4.6 7:1 und 4,5:1. Für UI-Komponenten und Grafiken verlangt Kriterium 1.4.11 auf AA 3:1 und hat keine AAA-Fassung.
| Element | AA | AAA |
|---|---|---|
| Normaler Text | 4,5:1 | 7:1 |
| Großer Text | 3:1 | 4,5:1 |
| UI-Komponenten und Grafiken | 3:1 | keine AAA-Stufe |
Nicht jede Farbe muss AAA erreichen. Das W3C selbst empfiehlt nicht, AAA als allgemeine Regel für eine ganze Website zu verlangen, weil manche Inhalte nicht alle Kriterien dieser Stufe erfüllen können.
Was als großer Text zählt
Das ist Text mit mindestens 18 pt oder mit mindestens 14 pt in Fettschrift. In CSS-Pixeln sind das bei 96 dpi etwa 24 px und 18,66 px. Der Schwellenwert ist niedriger, weil große Buchstaben auch mit weniger Kontrast lesbar bleiben. Im Zweifel behandle den Text als normal: 4,5:1 passt für jede Größe.
Kontrast von Komponenten und Icons
Kriterium 1.4.11 verlangt 3:1 für die Teile einer Komponente, die man zum Erkennen braucht, etwa den Rand eines Felds oder einer Checkbox, und für Grafiken mit Information, etwa Icons ohne Text und die Linien eines Diagramms. Es gilt auch für Zustände wie den Fokusring. Der Text in der Komponente folgt weiter 4,5:1.
Häufige Kontrastfehler
Diese vier Fälle tauchen in Barrierefreiheits-Prüfungen oft auf:
- Hellgraue Platzhalter. Ein Platzhalter ist Text und braucht 4,5:1 zum Feldhintergrund, auch wenn er beim Tippen verschwindet.
- Text auf einem Bild. Der Kontrast ändert sich von Punkt zu Punkt: Miss an der schlechtesten Stelle oder lege eine deckende oder abgedunkelte Ebene hinter den Text.
- Fokus und Zustände ohne Kontrast. Der Fokusring, der Rand des gewählten Felds und das aktive Icon fallen unter Kriterium 1.4.11 und brauchen 3:1.
- Deaktivierte Komponenten. WCAG nimmt inaktive Komponenten vom Mindestkontrast aus, aber ein zu blasses Grau lässt die Person im Unklaren, was gesperrt ist. Auch Logos sind ausgenommen, der Text um sie herum nicht.
Quellen
Geprüft am 6. November 2026:
Weiter über den Kontrast hinaus
Brauchst du den Code einer Farbe? Nutze den Color Picker oder rechne mit dem HEX-zu-RGB-Konverter und dem RGB-zu-HEX-Konverter um. Den Kontrast von weißem und schwarzem Text auf jeder der 148 CSS-Farben zeigt die HTML-Farbtabelle.