Farbkontrast nach WCAG: Rechnen statt raten
Wie das Kontrastverhältnis berechnet wird, welche Werte gelten und wie man ein Farbschema korrigiert, ohne das Design zu zerstören.
Kontrast ist neben fehlenden Alternativtexten der häufigste Grund, warum Websites die WCAG-Stufe AA verfehlen. Anders als bei vielen anderen Kriterien gibt es hier eine klare Rechenformel – man muss nicht diskutieren, sondern kann nachmessen.
Die Grenzwerte
| Inhalt | Mindestkontrast AA | Stufe AAA |
|---|---|---|
| Normaler Text (unter 24 px) | 4,5:1 | 7:1 |
| Großer Text (ab 24 px, oder ab 18,66 px fett) | 3:1 | 4,5:1 |
| Bedienelemente und Grafiken | 3:1 | – |
| Rein dekorative Elemente | kein Mindestwert | – |
Wie das Verhältnis berechnet wird
Grundlage ist die relative Leuchtdichte beider Farben. Die einzelnen Farbkanäle werden linearisiert, gewichtet (Grün zählt am stärksten, weil das Auge dort am empfindlichsten ist) und ins Verhältnis gesetzt.
Kontrast = (L_hell + 0,05) / (L_dunkel + 0,05)
L = 0,2126 · R + 0,7152 · G + 0,0722 · B
wobei jeder Kanal c (Wert 0–1) vorher linearisiert wird:
c ≤ 0,03928 -> c / 12,92
sonst -> ((c + 0,055) / 1,055) ^ 2,4
Extremwerte: Schwarz auf Weiß = 21:1, gleiche Farbe = 1:1Warum das Auge trügt
Die Wahrnehmung von Helligkeit ist nicht linear. Ein Grauton, der „mittel“ aussieht, liegt rechnerisch oft deutlich näher an Weiß. Deshalb ist Nachrechnen zuverlässiger als Hinschauen.
Merkwerte für Grau auf Weiß
| Farbwert | Kontrast auf Weiß | Ausreichend für |
|---|---|---|
| #767676 | 4,54:1 | normalen Text (knapp) |
| #6B6B6B | 5,29:1 | normalen Text (mit Reserve) |
| #949494 | 3,03:1 | nur großen Text und Bedienelemente |
| #AAAAAA | 2,32:1 | nichts – häufiger Fehler bei Hilfetexten |
Ein Farbschema korrigieren, ohne es zu zerstören
- 1Markenfarbe für große Flächen und Schmuckelemente behalten – dort gilt der Mindestwert nicht.
- 2Für Text auf der Markenfarbe eine abgedunkelte Variante definieren, statt die Markenfarbe selbst zu ändern.
- 3Sekundärtext nicht heller als #767676 auf Weiß setzen.
- 4Fokusrahmen mit mindestens 3:1 gegen den Hintergrund gestalten – das ist eigenes Kriterium (2.4.11).
- 5Farbe nie als einzigen Bedeutungsträger nutzen: rote Fehlermeldungen brauchen zusätzlich Text oder ein Symbol (1.4.1).
:root {
/* Fläche: Kontrast irrelevant, Wiedererkennung zählt */
--brand-surface: #3b82f6;
/* Text auf Weiß: abgedunkelt auf 4,6:1 */
--brand-text: #1d4ed8;
}
.button { background: var(--brand-surface); color: #fff; }
.link { color: var(--brand-text); }Grenze automatisierter Prüfung
Ohne Browser-Rendering lässt sich Kontrast nur dort berechnen, wo Vorder- und Hintergrundfarbe in derselben Deklaration stehen. Text auf einem Hintergrundbild oder auf einem Farbverlauf muss manuell bewertet werden.