Farbkontrast ist ein numerisches Maß dafür, wie „unterscheidbar” ein Text (Vordergrund) von seinem Hintergrund ist. Die Web Content Accessibility Guidelines (WCAG) 2.x standardisieren dieses Maß, damit Text auch für Menschen mit Sehbeeinträchtigung, altersbedingtem Sehverlust oder bei schlechten Lichtverhältnissen lesbar bleibt. Das Ergebnis ist eine einzige Zahl zwischen 1:1 (Farben sind identisch, kein Kontrast) und 21:1 (reines Schwarz/Weiß, maximaler Kontrast). In Deutschland verpflichtet zudem das Barrierefreiheitsstärkungsgesetz (BFSG) bzw. die BITV 2.0 viele digitale Angebote dazu, diese WCAG-Standards einzuhalten.
Wie wird Farbkontrast berechnet? (die Formel für relative Luminanz)
- Schritt 1 — sRGB normieren: für jeden Kanal c gilt c' = c/255.
- Schritt 2 — Gammakorrektur: wenn c' ≤ 0,03928, dann c_lin = c'/12,92; andernfalls c_lin = ((c'+0,055)/1,055)^2,4.
- Schritt 3 — relative Luminanz: L = 0,2126·R_lin + 0,7152·G_lin + 0,0722·B_lin.
- Schritt 4 — Verhältnis: addiere 0,05 zur höheren und zur niedrigeren L, dann dividiere: (L1+0,05)/(L2+0,05), mit L1>L2.
Der Grünkanal hat das höchste Gewicht (0,7152), weil das menschliche Auge am empfindlichsten auf Grün reagiert; der Blaukanal (0,0722) hat das niedrigste Gewicht. Deshalb erzeugen reines Rot, Grün und Blau bei gleicher „Helligkeit” unterschiedliche Kontrastverhältnisse.
Was ist der Unterschied zwischen AA- und AAA-Barrierefreiheit?
| Inhaltstyp | AA (Minimum) | AAA (erweitert) |
|---|---|---|
| Fließtext (unter 14pt/18,66px, sofern nicht fett) | 4,5:1 | 7:1 |
| Großer Text (18pt/24px+ oder 14pt/18,66px+ fett) | 3:1 | 4,5:1 |
| UI-Komponente / Grafikobjekt-Umrandung | 3:1 | nicht definiert |
| Dekorative / deaktivierte Elemente | nicht erforderlich | nicht erforderlich |
Was bedeutet ein Kontrastverhältnis von 4,5:1?
Wie wähle ich barrierefreie Farben aus?
Praxistipp: Die Primärfarbe einer Marke (z. B. Lila #7c3aed) hat als Text auf Weiß meist nicht genug Kontrast, funktioniert aber gut als Hintergrund mit weißem Text — deshalb lohnt es sich, dieselbe Farbe sowohl als Text als auch als Hintergrund zu testen.