Schlechter Farbkontrast ist einer der häufigsten und gleichzeitig am einfachsten behebbarsten Barrierefreiheits-Fehler. Laut WebAIM Million Report hat über 80% aller analysierten Websites mindestens einen Kontrastfehler. Dieser Artikel erklärt, was WCAG fordert, wie Sie Kontrast messen und wie Sie häufige Fehler beheben.
Warum Farbkontrast so wichtig ist
Circa 8% aller Männer und 0,5% aller Frauen haben eine Farbfehlsichtigkeit (Farbenblindheit). Dazu kommen Millionen Menschen mit Sehbehinderungen, altersbedingter Sehschwäche oder die das Smartphone im grellen Sonnenlicht nutzen. Für all diese Menschen entscheidet der Kontrast zwischen Text und Hintergrund darüber, ob sie Inhalte lesen können.
Gleichzeitig ist guter Kontrast auch für Menschen ohne Beeinträchtigung besser. Studien zeigen, dass lesbarer Text die Verweildauer erhöht und die Absprungrate senkt — Kontrast ist also nicht nur Compliance, sondern auch UX.
WCAG-Anforderungen an Farbkontrast
Das BFSG fordert WCAG 2.1 Level AA. Die relevanten Kriterien:
| Kriterium | Level | Was wird gemessen | Mindest-Verhältnis |
|---|---|---|---|
| 1.4.3 Kontrast (Minimum) | AA | Normaler Text auf Hintergrund | 4,5:1 (normal) / 3:1 (groß) |
| 1.4.6 Kontrast (Erweitert) | AAA | Normaler Text auf Hintergrund | 7:1 (normal) / 4,5:1 (groß) |
| 1.4.11 Nicht-Text-Kontrast | AA | UI-Komponenten, Fokus-Indikatoren, Grafiken | 3:1 |
Definition: "Großer Text" — Nach WCAG gilt Text als "groß", wenn er mindestens 18pt (24px) in normaler Schriftstärke oder mindestens 14pt (ca. 18,67px) in fetter Schrift ist. Für solche Texte gilt das niedrigere Verhältnis von 3:1.
Wie wird Kontrast berechnet?
Das Kontrastverhältnis wird aus der relativen Luminanz beider Farben berechnet. Die WCAG-Formel:
Kontrastverhältnis = (L1 + 0,05) / (L2 + 0,05)
L1 = relative Luminanz der helleren Farbe, L2 = relative Luminanz der dunkleren Farbe
Die relative Luminanz wird aus den linearisierten RGB-Werten berechnet. Das Ergebnis liegt immer zwischen 1:1 (kein Kontrast, z.B. weiß auf weiß) und 21:1 (maximaler Kontrast, schwarz auf weiß).
Diese Berechnung manuell durchzuführen ist unpraktisch — dafür gibt es Tools.
Die häufigsten Kontrastfehler
Laut dem WebAIM Million Report sind dies die häufigsten Kontrast-Probleme auf realen Websites:
#1: Hellgrauer Text auf weißem Hintergrund
Texte in #999999 oder heller auf #ffffff scheitern klar (2,85:1). Sehr verbreitet in Sekundärtexten, Untertiteln und Metadaten.
#999999 auf #ffffff → 2,85:1 ✗
#2: Placeholder-Text in Eingabefeldern
Browser-Standard für Placeholder ist oft sehr hell. Viele Designer dunken ihn nicht nach, weil er "bewusst heller als echter Text sein soll". Die WCAG macht hier keine Ausnahme.
Typischer Placeholder: #b0b0b0 → 2,32:1 ✗
#3: Blauer Text auf weißem Hintergrund
Viele Standard-Link-Blautöne scheitern: #1a73e8 (Google-Blau) hat nur 4,28:1 auf weiß — knapp unter dem Grenzwert. #0066cc hat 4,67:1 — bestanden.
#4: Text auf Bild-Hintergrund
Text über Fotos hat keinen definierten Hintergrund — der Kontrast variiert je nach Bildbereich. Lösung: Overlay-Schicht oder Text in eine farbige Box setzen.
Die besten Tools zum Prüfen
EAA Checker Farbkontrast-Tool
Unser interaktiver Farbkontrast-Checker ermöglicht es, zwei Farben direkt im Browser zu vergleichen. Er zeigt das Kontrastverhältnis, ob WCAG AA und AAA bestanden werden, eine Live-Vorschau mit Beispieltext und schlägt automatisch bessere Farben vor.
Automatisierter Website-Scan
Der EAA Checker Website-Scanner analysiert alle Texte auf Ihrer Website automatisch und meldet Kontrastfehler — mit Seitenposition und betroffenen CSS-Farben. Das ist effizienter als jedes Element einzeln zu prüfen.
Weitere Tools im Vergleich finden Sie im Artikel Barrierefreiheit testen: Die besten Tools im Vergleich.
Kontrast richtig korrigieren
Wenn ein Kontrastverhältnis nicht ausreicht, haben Sie mehrere Möglichkeiten:
Textfarbe dunkler machen
/* Vorher: #999999 auf #ffffff = 2,85:1 (FAIL) */ color: #999999; /* Nachher: #767676 auf #ffffff = 4,54:1 (PASS AA) */ color: #767676; /* Noch besser: #595959 auf #ffffff = 7,0:1 (PASS AAA) */ color: #595959;
Hintergrundfarbe anpassen
Manchmal ist es einfacher, den Hintergrund dunkler oder der Textfarbe ähnlicher zu machen. Besonders bei Karten und Boxen kann ein leicht gefärbter Hintergrund den Kontrast verbessern und gleichzeitig das Design attraktiver machen.
Schriftgröße oder -gewicht erhöhen
Wenn Text als "groß" gilt (ab 18pt oder 14pt fett), reicht ein Verhältnis von 3:1. Eine Alternative zur Farbänderung ist also, kleinere Texte größer oder fetter zu machen — dann gilt der niedrigere Grenzwert.
Farbkontrast Ihrer Website jetzt prüfen
Nutzen Sie unseren kostenlosen interaktiven Kontrast-Checker oder lassen Sie den vollständigen Website-Scanner alle Kontrastfehler auf Ihrer Website finden.