Verbindung fehlgeschlagen. Bitte versuchen Sie es erneut.

Zum Inhalt springen
SEO Tools
Hilfe und Dokumentation
UX / UI Hohe Auswirkung Einfach 20–40 Min.

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

  1. 1Prüfe das Kontrastverhältnis (Tool im Browser oder Online-Kontrast-Checker).
  2. 2Für normalen Text strebe ≥ 4,5:1 an, für großen Text ≥ 3:1.
  3. 3Vermeide hellgrauen Text (#ccc, #ddd) auf weißem Hintergrund.
  4. 4Dimme den Text nicht mit zu niedriger Transparenz (opacity).

Beispiel

Falsch
.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — unlesbar */
Richtig
.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