WCAG 1.4.3: Kontrast (Minimum)

Text (und Text in Bildern) braucht gegenüber seinem Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 – großer Text ab 18 pt bzw. 14 pt fett (≈ 24 px / 18,66 px fett) mindestens 3:1. (Englisch: Contrast (Minimum).)

Was verlangt das Kriterium?

Das Kontrastverhältnis ist ein berechneter Helligkeitsunterschied zwischen 1:1 (identisch) und 21:1 (Schwarz auf Weiß). Die Grenzwerte:

Ausgenommen sind: rein dekorativer Text, Text in inaktiven (disabled) Bedienelementen, unbedeutender Text in Fotos – und Logos/Markennamen. Für Bedienelemente und Grafiken gilt nicht 1.4.3, sondern das Schwester-Kriterium 1.4.11 Nicht-Text-Kontrast mit 3:1.

Wen betrifft es besonders?

Menschen mit Sehbehinderungen und altersbedingter Sehschwäche sowie mit Farbsinnstörungen – und situativ alle: Sonne auf dem Display, schlechte Projektoren, Nachtmodus-Filter.

Richtig & falsch im Code

/* Falsch: beliebtes Hellgrau auf Weiß – nur ≈ 2,3:1 */
.hinweis { color: #b0b0b0; background: #ffffff; }

/* Richtig: dunkleres Grau – ≈ 7,0:1, komfortabel über 4,5:1 */
.hinweis { color: #595959; background: #ffffff; }

/* Praxis-Tipp: geprüfte Werte am Design-Token dokumentieren */
:root {
  --color-muted: #595959; /* auf #fff: 7,0:1 (AA ✓) */
}

Häufigste Praxis-Fallen: Platzhaltertext (Browser-Default ist zu hell), Text über Bildern, pastellige Markenfarben für kleine Schrift und der Dark Mode, in dem niemand nachgemessen hat. Ausführlich mit Werkzeugen und Fallen: Farbkontraste richtig einstellen.

So testest du es

1. Messen statt schätzen: WebAIM Contrast Checker oder die Farb-Pipette der Browser-DevTools zeigen Verhältnis und Bestehen an.
2. Automatisch: axe/Lighthouse prüfen alle Text-Hintergrund-Paare der gerenderten Seite – einer der verlässlichsten automatischen Checks.
3. Sonderfälle von Hand: Text über Bildern und Verläufen an der ungünstigsten Stelle messen; beide Farbschemata (hell/dunkel) prüfen.

Verwandte Themen

• Farbkontraste richtig einstellen – der ausführliche Praxis-Artikel
• 1.4.11 Nicht-Text-Kontrast – Bedienelemente & Grafiken
• 1.4.1 Benutzung von Farbe – Farbe nie als einziges Signal