Fokusmanagement

TL;DR

Ausreichender Farbkontrast zwischen Text und Hintergrund ist essenziell für Lesbarkeit – WCAG fordert mindestens 4.5:1 für normalen Text.

Was ist Kontrast?

Kontrast beschreibt den Helligkeitsunterschied zwischen Vorder- und Hintergrundfarbe. Je höher der Kontrast, desto besser lesbar ist der Text – besonders für Menschen mit Sehschwächen, aber auch bei schlechten Lichtverhältnissen oder auf minderwertigen Displays.

WCAG-Kontrastanforderungen

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

Kontrast prüfen

• WebAIM Contrast Checker: Hex-Werte eingeben, Ratio sehen
• Browser DevTools: Chrome zeigt Kontrast bei Farbinspektion
• Figma-Plugins: Stark, A11y - Color Contrast Checker
• WAVE: Automatische Prüfung ganzer Seiten

Häufige Kontrastprobleme

• Grauer Text auf weißem Hintergrund
• Hellgrüne oder hellblaue Links
• Placeholder-Text in Formularen
• Weißer Text auf Bildern ohne Overlay
• Zu subtile Hover-States

Kontrast und Nachhaltigkeit

Hoher Kontrast braucht oft keine zusätzlichen Ressourcen – es ist eine Design-Entscheidung, keine technische Last. Gleichzeitig ermöglicht guter Kontrast:

• Nutzung auf älteren, dunkleren Displays
• Lesbarkeit bei niedriger Helligkeit (Akku sparen)
• Weniger Eye-Strain = längere Sitzungen ohne Ermüdung

Fazit

Kontrast ist einer der häufigsten Barrierefreiheits-Fehler – und einer der am einfachsten zu behebenden. Prüfe jeden Farbton: Erreicht er 4.5:1? Wenn nicht, anpassen. Es gibt keine Ausrede für schlecht lesbaren Text.