Definition: Das Kontrastverhältnis misst den Helligkeitsunterschied zwischen zwei Farben, meist zwischen Text und Hintergrund. Die Skala reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). Normaler Text braucht nach WCAG 1.4.3 mindestens 4,5:1, großer Text 3:1 [1].
Englisch: Contrast ratio · Auch: Farbkontrast · Zuletzt geprüft: 27. September 2026
Farben selbst prüfen: mit dem Kontrast-Checker.
Wie der Wert entsteht
Die WCAG berechnen für jede Farbe die relative Leuchtdichte, einen Wert zwischen 0 (Schwarz) und 1 (Weiß). Das Verhältnis ist dann (hellere + 0,05) geteilt durch (dunklere + 0,05) [2]. Der Farbton spielt keine Rolle, nur die Helligkeit. Deshalb kann ein kräftiges Rot auf Grün bunt aussehen und trotzdem kaum Kontrast haben.
Welche Werte gelten
| Inhalt | Stufe AA | Stufe AAA |
|---|---|---|
| Normaler Text | 4,5:1 | 7:1 |
| Großer Text (ab 18 pt oder 14 pt fett, etwa 24 px bzw. 18,66 px) | 3:1 | 4,5:1 |
| Bedienelemente und Grafiken | 3:1 (1.4.11) | – |
Ausgenommen sind Logos, reine Dekoration und Text in inaktiven Bedienelementen [1].
Beispiele
- Schwarz auf Weiß: 21:1 – der höchste mögliche Wert.
- Grau
#595959auf Weiß: rund 7:1 – reicht sogar für Stufe AAA. - Grau
#767676auf Weiß: rund 4,5:1 – gerade noch genug für normalen Text. - Grau
#777777auf Weiß: 4,48:1 – knapp zu wenig, obwohl es kaum anders aussieht.
Der Unterschied zwischen den beiden letzten Farben ist mit bloßem Auge nicht zu sehen. Deshalb misst man, statt zu schätzen – im Designsystem einmal pro Farbpaar, nicht auf jeder Seite neu.
Häufige Fehler
- Hellgrauer Text auf Weiß für Hinweise, Platzhalter oder Fußzeilen.
- Text auf Fotos ohne Abdunklung dahinter.
- Nur im Normalzustand geprüft: Hover, Fokus und Fehlermeldungen haben oft eigene Farben.
- Rundungsglück: 4,48:1 ist kein 4,5:1 – der Wert wird nicht aufgerundet.
Wie Reviseberg damit umgeht
Reviseberg misst den Kontrast mit der axe-core-Regel color-contrast auf jeder Seite, bei 1280 px und noch einmal bei 360 px Breite, weil mobile Stylesheets andere Farben setzen können. Liegt Text auf einem Bild oder Verlauf, kann die Messung nicht entscheiden. Solche Stellen landen als „mögliches Problem“ in einer eigenen Liste und zählen nie als bestanden.
Verwandte Begriffe
Nicht-Text-Kontrast · Fokusindikator · Bildschirmlupe · Automatisierte Prüfung