Kontrastverhältnis
Auch: color contrast
Das Helligkeitsverhältnis zwischen Vordergrundtext und Hintergrund auf einer Skala von 1:1 bis 21:1. WCAG 2.x fordert 4,5:1 für Normaltext und 3:1 für großen Text (≥ 18 pt oder 14 pt fett) auf Stufe AA.
Das Kontrastverhältnis misst den wahrnehmbaren Helligkeitsunterschied zwischen zwei Farben — üblicherweise Text und Hintergrund. Die Skala reicht von 1:1 (kein Kontrast — Weiß auf Weiß) bis 21:1 (reines Schwarz auf reinem Weiß). WCAG definiert Mindestverhältnisse für die Lesbarkeit von Text.
Die WCAG-Schwellenwerte
Die Richtlinien für barrierefreie Webinhalte (WCAG) 2.x Erfolgskriterien 1.4.3 (Kontrast — Minimum, Stufe AA) und 1.4.6 (Kontrast — Erweitert, Stufe AAA) legen folgende Untergrenzen fest:
| Texttyp | AA | AAA |
|---|---|---|
| Normaltext (< 18 pt oder < 14 pt fett) | 4,5:1 | 7:1 |
| Großer Text (≥ 18 pt oder ≥ 14 pt fett) | 3:1 | 4,5:1 |
| Grafische Objekte + UI-Komponenten (1.4.11) | 3:1 | — |
WCAG 2.x misst Kontrast anhand der WCAG-Formel (ein helligkeitsbasiertes Verhältnis). WCAG 3 untersucht einen wahrnehmungsuniformen Ersatz („APCA“ — Accessible Perceptual Contrast Algorithm), der sich bei sehr dunklen oder sehr hellen Hintergründen anders verhält; APCA ist noch nicht normativ.
Was häufig übersehen wird
Kontrast ist eine der wenigen WCAG-Regeln, die ein Tool zuverlässig erkennen kann — automatisierte Scanner erfassen die meisten Fehler bei reinem Text auf Hintergrund. Was dennoch durchrutscht:
- Platzhaltertext in Eingabefeldern. Oft #999 oder heller auf Weiß — schlägt auf
AA fehl. Designer verwenden kontrastarme Platzhalter, um sie vom ausgefüllten Wert
zu unterscheiden; die tatsächlich beste Praxis ist jedoch, ein separates
<label>oberhalb des Feldes zu nutzen und einen kontrastreicheren Platzhalter zu verwenden (oder ganz darauf zu verzichten). - Hover- und Fokuszustände. Eine Schaltfläche mit ausreichendem Standard-Kontrast kann beim Hovern scheitern (z. B. ein hellgrauer Hover-Zustand auf Weiß). Interaktive Elemente in jedem visuellen Zustand auditieren.
- Deaktivierte Steuerelemente. Deaktivierte Steuerelemente sind formal von AA-Kontrast
ausgenommen, aber sie nur durch geringen Kontrast auszugrauen lässt Personen mit
Farbsehschwäche keine Möglichkeit zu erkennen, dass das Steuerelement deaktiviert ist.
Farbe mit einem weiteren Signal kombinieren — einem Symbol, einer Beschriftungsänderung
oder
aria-disabled, damit Screenreader es ankündigen. - Text über Bildern und Verläufen. Hero-Overlays, bei denen derselbe Text sowohl über einem hellen als auch über einem dunklen Bereich des Hintergrundbilds liegt, scheitern häufig im helleren Bereich.
- Icons als einzige Beschriftung. Ein 24-Pixel-Symbol ohne Text benötigt 3:1 gegenüber seinem Hintergrund (1.4.11), wobei die bedeutungstragenden Pixel — die Konturstriche — gemessen werden.
Operatives Testen
Drei Vorgehensweisen reduzieren Kontrastfehler frühzeitig:
- Linting im Design. Stark, Able und der Barrierefreiheitsprüfer von Adobe XD bewerten den Kontrast direkt im Design-Tool. Probleme beheben, bevor Code geschrieben wird.
- Tokenisierte Paletten. Jede Text-Hintergrund-Kombination als Token definieren, dessen Kontrast einmalig geprüft wird. Ad-hoc-Farbwerte bei textbehafteten Komponenten nicht erlauben.
- Automatisierte CI-Prüfungen. axe-core, Pa11y oder Lighthouse schlagen bei Kontrastverstößen fehl. Günstig einzurichten, teuer zu überspringen.
Über die Untergrenze hinaus
4,5:1 ist ein Minimum, kein ästhetisches Ziel. Personen mit leichter Farbsehschwäche, altersbedingtem Sehverlust oder minderwertigen Displays bevorzugen 7:1 oder mehr für Fließtext. Eine Website, die bei jedem Element knapp die AA-Anforderungen erfüllt, wirkt in der Regel kontrastarm — auch für Personen ohne formale Beeinträchtigungen.