Farbkontraste von Text und Bedienelementen verbessern

WCAG 1.4.3, 1.4.11, 1.4.1 · mittel · etwa 60 Minuten · Stand 08.11.2026

Worum es geht

Hellgrauer Text auf weißem Grund oder weiße Schrift auf hellem Produktfoto sind für viele Menschen schwer lesbar. WCAG legt Mindestwerte für das Kontrastverhältnis fest: 4.5:1 für normalen Text und 3:1 für großen Text. Großer Text heißt mindestens 18 Punkt (etwa 24 px) oder mindestens 14 Punkt fett (etwa 18,66 px). Für Bedienelemente wie Eingabefeld-Rahmen, Checkboxen und Icons sowie für wichtige Grafiken gilt nach 1.4.11 ein Kontrast von mindestens 3:1 zur angrenzenden Farbe.

Wen es betrifft

Menschen mit Sehbehinderung, zum Beispiel mit grauem Star oder altersbedingt nachlassender Kontrastwahrnehmung.
Menschen mit Farbsehschwäche, die bestimmte Farbpaare kaum unterscheiden.
Alle, die dein Shop-Angebot auf dem Smartphone in der Sonne oder auf einem schwachen Bildschirm ansehen.

So behebst du es

Bestandsaufnahme machen. Sammle die Farben aus deinem Theme oder Stylesheet: Fließtext, Links, Preise, Hinweistexte, Platzhalter, Buttons, Rahmen von Eingabefeldern, Icons.
Jedes Farbpaar prüfen. Gib Vorder- und Hintergrundfarbe in unseren kostenlosen Kontrast-Prüfer ein. Er zeigt dir das Verhältnis und ob die Schwelle erreicht ist.

Text anpassen. Dunkle den Text ab oder ändere den Hintergrund, bis 4.5:1 erreicht ist.

Schlecht (etwa 2.8:1):

.produkt-hinweis {
  color: #999999;
  background: #ffffff;
}

Gut (etwa 7:1):

.produkt-hinweis {
  color: #595959; /* etwa 7:1 auf Weiß */
  background: #ffffff;
}

Am besten legst du die Farben zentral als Variablen fest, dann musst du sie nur an einer Stelle ändern:

:root {
  --text: #1a1a1a;
  --text-leise: #595959;
  --rahmen: #767676;
}

Text auf Bildern absichern. Liegt Text über einem Foto, sorge für einen festen Hintergrund oder eine abdunkelnde Fläche hinter dem Text. Prüfe den Kontrast an der hellsten Stelle des Bildes.
```
.banner-text {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.5rem 1rem;
}
```
Bedienelemente und Icons prüfen (1.4.11). Der Rahmen eines Eingabefelds, der Haken einer Checkbox oder ein Icon ohne Beschriftung braucht mindestens 3:1 zur angrenzenden Farbe.

Schlecht (etwa 1.6:1):
```
input { border: 1px solid #cccccc; }
```
Gut (etwa 4.5:1):
```
input { border: 1px solid #767676; }
```
Nicht nur Farbe verwenden (1.4.1). Links im Fließtext sollten nicht nur durch Farbe erkennbar sein. Eine Unterstreichung ist die einfachste Lösung.
```
main p a { text-decoration: underline; }
```
Platzhaltertext und Hinweise nicht vergessen. Platzhalter in Formularen sind oft sehr hell. Wenn der Platzhalter Information trägt, gilt für ihn derselbe Kontrastwert wie für anderen Text.

Ausnahmen laut WCAG: Logos und Markennamen, rein dekorativer Text, Text, der nur nebensächlicher Teil eines Fotos ist, und deaktivierte Bedienelemente.

So prüfst du es

Kontrast-Prüfer: Prüfe die Farbpaare mit unserem Kontrast-Prüfer.
Browser-Devtools: In Chrome und Edge zeigt die Farbauswahl im Bereich "Styles" das Kontrastverhältnis eines Textelements an. Firefox zeigt es im Barrierefreiheit-Inspektor.
axe DevTools: Die Regel color-contrast findet Text mit zu wenig Kontrast. Text über Bildern oder Verläufen kann sie oft nicht sicher bewerten und meldet ihn zur manuellen Prüfung.
WAVE-Erweiterung: Im Reiter "Contrast" siehst du alle Kontrastfehler und kannst Farben direkt ausprobieren.
Manuell: Kontrast von Rahmen, Icons und Fokusmarkierungen (1.4.11) erkennen die meisten Tools nicht. Diese Farben prüfst du einzeln mit dem Kontrast-Prüfer.
Zustände durchgehen: Prüfe auch Hover, Fokus, ausgewählte Elemente und Fehlermeldungen, nicht nur den Normalzustand.