Kontrastverhältnis – Lesbarkeit durch Farbkontraste sichern
Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen Vordergrund- und Hintergrundfarbe, etwa bei Text auf farbigen Flächen. Es ist ein zentrales Kriterium der WCAG (Web Content Accessibility Guidelines) und entscheidend für die Lesbarkeit und Zugänglichkeit digitaler Inhalte.
Ein zu geringer Kontrast erschwert die Wahrnehmung für Menschen mit Sehschwäche, altersbedingten Einschränkungen oder Farbsinnstörungen.
Empfohlene Kontrastverhältnisse laut WCAG 2.1
| Texttyp | Mindest-Kontrastverhältnis |
|---|---|
| Standard-Text (ab 18px fett / 24px normal) | 4.5:1 |
| Großer Text (ab 24px / 19px fett) | 3:1 |
| Dekorative oder deaktivierte Elemente | keine Vorgabe, aber barrierefrei gestalten empfohlen |
Für Level AAA gelten noch strengere Anforderungen: z. B. 7:1 für normalen Text.
Tools zur Kontrastprüfung
- WebAIM Contrast Checker
- Color Contrast Analyzer (TPG)
- Chrome DevTools → Accessibility Panel
- WCAG Color Contrast Tools
Best Practices
- Kontraste nicht nur visuell prüfen, sondern mit Tools testen
- Texte nicht ausschließlich in Farbe kodieren (Farbenblinde)
- Kontrastwerte auch bei Hover, Fokus, Active-Zuständen beachten
- Markenfarben ggf. anpassen oder kontrastfreundlich kombinieren
- Dark Mode / High Contrast Mode berücksichtigen
Mehr zu unseren Leistungen im Bereich Digitale Barrierefreiheit erfahren Sie hier.
