Kontrast (Minimum)

Was gefordert wird

Text und Textgrafiken müssen ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund aufweisen. Großer Text — definiert als 18 pt (24 px) in normaler Stärke oder 14 pt (18,66 px) in Fettschrift — benötigt lediglich 3:1. Das Verhältnis wird aus der relativen Luminanz von Vorder- und Hintergrund berechnet. Logos, Markennamen und rein dekorativer Text sind ausgenommen. Inaktive Bedienelemente sind ebenfalls ausgenommen, wobei diese Ausnahme enger gefasst ist, als Gestalterinnen und Gestalter häufig annehmen.

So wird das Erfolgskriterium erfüllt

• Jede Text-auf-Hintergrund-Kombination sollte mit einem Kontrastprüfer (axe DevTools, WebAIM, Stark, Figma-Plugins) geprüft werden. Ein Mindestwert von 4,5:1 muss erreicht werden.
• Hellgrauer Platzhaltertext in Formularfeldern muss auf mindestens 4,5:1 gegenüber dem Feldhintergrund angehoben werden — Platzhaltertext gilt als Text.
• Text-über-Bild-Bereiche in Hero-Sektionen müssen geprüft werden. Die Hintergrundfarbe variiert pixelweise; daher ist die ungünstigste Region zu prüfen oder eine dunkle Überlagerung hinzuzufügen.
• Im Dunkelmodus muss jedes Kontrastverhältnis neu berechnet werden — Farbmarken, die auf Weiß bestehen, scheitern häufig auf nahezu schwarzem Hintergrund.
• Bei Markenfarben, die auf Weißem nicht bestehen, sollte die Markenfarbe ausschließlich für Text abgedunkelt werden; für Grafiken bleibt die Originalfarbe erhalten.
• Bei Schaltflächen zählt das Kontrastverhältnis zwischen Beschriftung und Schaltflächenhintergrund — nicht das Verhältnis zwischen Schaltfläche und Seite.

Häufige Fehler

• Hellgrauer Hilfetext (#999 auf #fff = 2,85:1) in Formularfeldern — deutlich unzureichend.
• Weißer Text auf einer Schaltfläche in einer Markenfarbe, bei der die Markenfarbe mittlere Sättigung aufweist (Orange, Gelbgrün, Türkis).
• Hero-Überschriften über Fotos ohne Überlagerung — der Kontrast variiert im Bild und fällt häufig unter 3:1.
• Platzhaltertext in derselben Farbe wie die Beschriftung, aber mit geringerem Schriftgewicht, was ihn zum kontrastschwächsten Element der Seite macht.
• „Inaktive“ oder „deaktivierte“ Schaltflächen mit einem Kontrast von 2:1 — dies ist zulässig, wenn sie tatsächlich nicht interaktiv sind — häufig sind sie jedoch noch per Tab erreichbar, wodurch die Ausnahme entfällt.
• Dunkelmodus-Farbmarken, die den Hellmodus spiegeln, ohne die Verhältnisse neu zu berechnen — #bbb auf #222 liegt nahe am Grenzwert, erfüllt ihn aber nicht.

Warum es wichtig ist

1.4.3 ist das am häufigsten zitierte einzelne Versagen in WCAG-Audits schlechthin. Lighthouse, axe, Stark und jedes automatisierte Tool erkennen es zuverlässig, sodass es auch am einfachsten zu finden ist. Die Behebung besteht meist aus einer einzigen Änderung an einem Design-Token, die sich systemweit auswirkt — einmal vorgenommen, einmal getestet, fertig. Wird es übergangen, ist das fast immer ein Kompromiss zwischen Markenidentität und Barrierefreiheit, der letztlich zu einer Beschwerde führt.