Zu geringer Farbkontrast – der häufigste Barrierefreiheits-Mangel
Grauer Text auf weißem Grund sieht auf dem Bildschirm des Gestalters elegant aus. Für Menschen mit eingeschränktem Sehvermögen, auf einem älteren Bildschirm oder in der Sonne ist er schlicht nicht lesbar.
Die Anforderung
Die Web Content Accessibility Guidelines (WCAG 2.1) verlangen auf Stufe AA – der Stufe, auf die sich das Barrierefreiheitsstärkungsgesetz stützt:
| Element | Mindestkontrast |
|---|---|
| Fließtext | 4,5 : 1 |
| Große Schrift (ab 18,66 px fett oder 24 px) | 3 : 1 |
| Bedienelemente, Rahmen von Eingabefeldern, Symbole | 3 : 1 |
Der Wert beschreibt das Verhältnis der Helligkeit zwischen Vorder- und Hintergrund. Schwarz auf Weiß ergibt 21 : 1, das hellgraue #999999 auf Weiß nur 2,8 : 1 – also durchgefallen.
Wo es typischerweise scheitert
- Hilfetexte und Bildunterschriften in hellem Grau
- Text auf Fotos ohne abdunkelnde Ebene dazwischen
- Platzhaltertexte in Eingabefeldern
- Schaltflächen in der Markenfarbe mit weißer Schrift – besonders bei Gelb, Hellgrün und Türkis
- deaktivierte Elemente, die kaum noch zu erkennen sind
So beheben Sie es
Messen Sie zuerst: Die Entwicklerwerkzeuge jedes Browsers zeigen beim Auswählen eines Textes den Kontrastwert an. Dann dunkeln Sie die Textfarbe ab, statt die Schrift zu vergrößern – das ist fast immer der kleinere Eingriff. Aus #999999 wird #595959, und schon sind 7 : 1 erreicht.
Bei Markenfarben, die den Wert nicht hergeben: die Farbe für Flächen behalten, aber für Text eine abgedunkelte Variante festlegen. Das erhält den Auftritt und macht ihn lesbar.
Häufige Fragen
Welcher Kontrast ist vorgeschrieben?
Nach WCAG 2.1 Stufe AA mindestens 4,5:1 für Fließtext und 3:1 für große Schrift sowie Bedienelemente.
Wie messe ich den Kontrast?
Die Entwicklerwerkzeuge in Chrome und Firefox zeigen den Wert direkt an, wenn Sie ein Textelement auswählen. Prüfwerkzeuge melden zusätzlich alle Stellen auf einmal.
Weitere Befunde aus dem Bereich Barrierefreiheit
Prüfen Sie Ihre eigene Website – kostenlos, ohne Anmeldung, in etwa einer Minute.
Website jetzt prüfen