Farbkontrast

TL;DR

Farbkontrast beschreibt das Helligkeitsverhältnis zwischen Text und Hintergrund. WCAG AA fordert 4.5:1 für normalen Text – essenziell für Lesbarkeit und Barrierefreiheit.

Was ist Farbkontrast?

Farbkontrast misst den Helligkeitsunterschied zwischen zwei Farben. Je höher der Kontrast, desto besser lesbar ist Text – besonders für Menschen mit Sehschwächen oder bei schlechten Lichtverhältnissen.

WCAG-Anforderungen

• AA Normal Text: 4.5:1 Minimum
• AA Großer Text (18pt+): 3:1 Minimum
• AAA Normal Text: 7:1 Minimum
• UI-Komponenten: 3:1 (Buttons, Inputs)

Häufige Kontrastprobleme

• Hellgrauer Text auf Weiß
• Hellblaue Links
• Placeholder in Formularen
• Text auf Bildern ohne Overlay
• Zu subtile Hover-States

Kontrast prüfen

• WebAIM Contrast Checker
• Browser DevTools (Chrome zeigt Kontrast)
• Figma-Plugins (Stark, A11y)
• Automatisierte Tests (Lighthouse, axe)

Farbkontrast und Nachhaltigkeit

Guter Kontrast kostet nichts extra:

• Lesbarkeit auf älteren Displays
• Nutzbar bei niedriger Helligkeit (Akku!)
• Inklusiv für mehr Menschen

Fazit

Farbkontrast ist einer der häufigsten Barrierefreiheits-Fehler – und einer der am einfachsten zu behebenden. Jede Farbkombination prüfen!