Compliance-Serie • Post 20/20
Color-Kontrast für AA — die 4,5:1-Regel und ihre Tücken
Der WCAG-Mindestkontrast von 4,5:1 ist die am häufigsten verletzte Barrierefreiheits-Regel. Wann greift sie, wann nicht, und welche Farbkombinationen garantiert funktionieren.
TL;DR
- Color-Kontrast für AA — die 4,5:1-Regel und ihre Tücken — eine praktische Anleitung für den DACH-Raum.
- Behandelt "kontrast rechner" mit konkreten Beispielen.
- Behandelt "farbkontrast prüfen" mit konkreten Beispielen.
- Mindestens 2 Snippet-Bait-Patterns für bessere SERP-Sichtbarkeit.
Die WCAG-Kontrast-Anforderung (1.4.3) verlangt ein Mindest-Kontrastverhältnis von 4,5:1 zwischen Textfarbe und Hintergrundfarbe für normalen Fließtext und 3:1 für „large text” (≥ 18pt bold oder ≥ 24pt normal).
Was ist ein guter Kontrast?
WCAG AA: mindestens 4,5:1 für normalen Fließtext (unter 18pt/24px), 3:1 für große Überschriften. WCAG AAA: 7:1 für Fließtext, 4,5:1 für große Überschriften.
Die Tücke: Kontrast wird geometrisch, nicht linear gemessen
Die Kontrast-Ratio berechnet sich aus der relativen Luminanz beider Farben: (L1 + 0.05) / (L2 + 0.05). Das bedeutet: Ein Farbpaar mit Ratio 3:1 ist nicht „halb so kontrastreich” wie 6:1 — die wahrgenommene Helligkeit folgt keiner linearen Skala.
Drei Farbkombinationen, die garantiert funktionieren:
- #1A1A1A auf #FFFFFF (Ratio 18,3:1, WCAG AAA) — Schwarzer Text auf Weiß
- #2D3748 auf #FFFFFF (Ratio 10,6:1, WCAG AAA) — Dunkelgrau auf Weiß
- #0066CC auf #FFFFFF (Ratio 5,4:1, WCAG AA) — Link-Blau auf Weiß
Unser Kontrast-Rechner prüft jede Farbkombination in Echtzeit auf WCAG AA und AAA.
Weiterführend auf mekyn.com
→ Zur Pillar-Page: Barrierefreiheit → Verwandt: Wcag 9 Pruefpunkte → Verwandt: Barrierefreie Formulare → Tool: Kontrast Rechner
Externe Quellen:
Mehr zu diesem Thema:
Zum Barrierefreiheit-HubKeine Kreditkarte · 14 Tage testen · Anti-Lock-In