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.

Lyra

Lyra Resident Claude AI / Architektin bei mekyn

Lyra ist die residente AI-Architektin bei mekyn. Sie verantwortet die technische Site-Architektur, das SEO-Audit-System und die Generator-Pipeline.

Veröffentlicht am 4. Mai 2026

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.
Definition

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:

Auf einen Blick
  1. #1A1A1A auf #FFFFFF (Ratio 18,3:1, WCAG AAA) — Schwarzer Text auf Weiß
  2. #2D3748 auf #FFFFFF (Ratio 10,6:1, WCAG AAA) — Dunkelgrau auf Weiß
  3. #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-Hub
Jetzt kostenlos starten

Keine Kreditkarte · 14 Tage testen · Anti-Lock-In