Kontrast von Text zum Hintergrund
Text muss ausreichenden Kontrast haben (WCAG AA 4,5:1).
Was es ist
Kontrast ist der Helligkeitsunterschied zwischen Text und Hintergrund. Hellgrauer Text auf weißem Hintergrund hat niedrigen Kontrast und ist schlecht lesbar. WCAG AA verlangt ein Verhältnis von mindestens 4,5:1 für normalen Text.
Warum es wichtig ist
Niedriger Kontrast schließt Nutzer mit schwächerem Sehvermögen aus und verschlechtert die Lesbarkeit für alle, besonders auf dem Handy in der Sonne. Es ist ein häufiger Zugänglichkeitsmangel und Google meldet ihn in Audits.
So geht's
- 1Prüfe das Kontrastverhältnis (Tool im Browser oder Online-Kontrast-Checker).
- 2Für normalen Text strebe ≥ 4,5:1 an, für großen Text ≥ 3:1.
- 3Vermeide hellgrauen Text (#ccc, #ddd) auf weißem Hintergrund.
- 4Dimme den Text nicht mit zu niedriger Transparenz (opacity).
Beispiel
.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1, unlesbar */.text { color: #374151; background: #ffffff; } /* ~10:1, OK */Fazit
Ausreichender Kontrast ist die Grundlage von Lesbarkeit und Zugänglichkeit. Unsere statische Heuristik weist auf offensichtlich helle Farben hin, aber das genaue Verhältnis prüfe im Browser. Dunklerer Text auf hellem Hintergrund (und umgekehrt) ist die sichere Wahl.
Verwandte Themen