Zu blasse Schrift auf zu hellem Hintergrund ist der mit Abstand häufigste Barrierefreiheits-Fehler — und einer der am leichtesten zu behebenden. Ausreichende Farbkontraste sorgen dafür, dass Text für Menschen mit Sehschwäche, bei Sonnenlicht am Handy oder auf schlechten Bildschirmen lesbar bleibt.
Worauf es ankommt
Die WCAG 2.2 (Erfolgskriterium 1.4.3) verlangen auf Konformitätsstufe AA:
- Normaler Text: mindestens 4,5:1 Kontrast zum Hintergrund.
- Großer Text (ab ca. 24px bzw. 18,7px fett): mindestens 3:1.
- Bedien-Elemente und Grafiken (1.4.11): mindestens 3:1 — etwa Button-Ränder, Icons oder Eingabefelder.
So prüfst du es
- Nutze einen Kontrast-Checker wie den WebAIM Contrast Checker oder die DevTools deines Browsers — Chrome und Firefox zeigen das Kontrastverhältnis direkt im Inspector an.
- Prüfe nicht nur den Fließtext, sondern auch Platzhalter in Formularen, Buttons, Links, Hover-Zustände und Text auf Bildern.
- Teste bei echtem Sonnenlicht am Smartphone — das deckt grenzwertige Fälle schnell auf.
Häufige Fehler
- Hellgraue Hilfstexte und Platzhalter, die unter 4,5:1 fallen.
- Heller Text auf Farbverläufen oder Fotos ohne Abdunklung.
- Markenfarben als Button-Text, die zwar schön aussehen, aber den Kontrast reißen.
Kurz gesagt
Miss jeden Text gegen seinen tatsächlichen Hintergrund und ziele auf 4,5:1 (großer Text 3:1). Kontrast ist messbar — du musst nicht raten.
Unsicher, ob deine Seite durchgehend genug Kontrast bietet? Im Barrierefreiheits-Audit prüfe ich das systematisch nach WCAG 2.2 AA.