So funktioniert’s
- Geben Sie Text- und Hintergrundfarbe als HEX-Code ein oder nutzen Sie die Farbauswahl.
- Lesen Sie das Verhältnis und die Tabelle mit Erfüllt / Nicht erfüllt ab. Die Vorschau zeigt beide Textgrößen.
- Mit Farben tauschen prüfen Sie die umgekehrte Kombination, etwa hellen Text auf dunklem Hintergrund.
Die Formel
WCAG 2 definiert die relative Leuchtdichte als L = 0,2126 R + 0,7152 G + 0,0722 B, wobei jeder Kanal zuvor von sRGB in lineares Licht umgerechnet wird. Das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), mit L1 als hellerer Farbe. Schwarz auf Weiß ergibt 21:1, zwei gleiche Farben 1:1.
| Stufe | Normaler Text | Großer Text |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Bedienelemente und bedeutungstragende Grafiken brauchen für AA 3:1.
Beispiel
Grau #777777 auf Weiß: Die Leuchtdichte des Graus beträgt rund 0,184, das Verhältnis also 1,05 / 0,234 = 4,48. Für großen Text reicht das, AA für normalen Text wird nicht erfüllt. Mit #767676 steigt das Verhältnis auf 4,54 : 1, und AA ist erfüllt.
Tipps
- Kontrast ist nicht die einzige Anforderung an Barrierefreiheit: Vermitteln Sie Informationen nie nur über Farbe.
- Text auf Bildern oder Verläufen prüfen Sie an seiner ungünstigsten Stelle.
- Der Kontrast nach WCAG 2 ist ein einfaches Maß mit Schwächen im Dark Mode und bei dünnen Schriften; betrachten Sie ihn als Mindestwert.