Zu geringer Kontrast zwischen Text und Hintergrund

Automatisierte Prüfung color-contrast, ausgeführt mit axe-core

WCAG
1.4.3 Kontrast (Minimum) (Stufe AA)
Schweregrad
Schwerwiegend: erledigbar, aber mühsam
Typischer Aufwand
Mittel, 1 bis 4 Stunden
Kategorie
Visuelle Gestaltung

Wen das betrifft

Die mit Abstand größte Gruppe: alle mit Sehschwäche, Farbenfehlsichtigkeit oder altersbedingt nachlassendem Sehvermögen – und jeder, der im Sonnenlicht auf dem Smartphone liest.

Warum es wichtig ist

Etwa jeder zwölfte Mann hat eine Farbenfehlsichtigkeit, und zu geringer Kontrast ist der häufigste Mangel im gesamten Web. Er lässt sich außerdem mit einem einzigen Screenshot belegen. Typische Ursachen sind hellgraue Platzhaltertexte und blasse Markenfarben auf Weiß.

So beheben Sie es

Fließtext braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text (ab 18 pt bzw. 14 pt fett) mindestens 3:1. Meist genügt es, eine Markenfarbe in Ihren CSS-Variablen abzudunkeln – das behebt alle Vorkommen auf einmal.

Prüfen Sie Ihre eigene Website

Der kostenlose Check prüft 3 Seiten nach WCAG 2.2 (Stufen A und AA) in etwa 30 Sekunden. Ohne Anmeldung.

Jetzt kostenlos prüfen

Verwandte Prüfungen: Visuelle Gestaltung

Alle Prüfungen