Zu geringer Kontrast ist die häufigste Barriere im Web und gleichzeitig die am leichtesten zu behebende. Der Grund für ihre Verbreitung ist gestalterisch: Hellgrauer Text wirkt ruhig und modern, und am eigenen, hell eingestellten Bildschirm im Innenraum fällt nichts auf.
Bei Sonnenlicht auf einem Telefon, bei einer altersbedingt reduzierten Kontrastempfindlichkeit oder auf einem älteren Bildschirm fällt es sehr wohl auf.
Die Werte
| Element | Mindestkontrast |
|---|---|
| Fließtext unter 24 Pixel | 4,5 zu 1 |
| Fließtext ab 24 Pixel | 3 zu 1 |
| Fettschrift ab 19 Pixel | 3 zu 1 |
| Beschriftungen, Hinweistexte | 4,5 zu 1 |
| Platzhaltertext in Feldern | 4,5 zu 1 |
| Rand von Eingabefeldern | 3 zu 1 |
| Fokusmarkierung | 3 zu 1 gegen die Umgebung |
| Icons, die Information tragen | 3 zu 1 |
| Diagrammlinien und Legenden | 3 zu 1 |
| Deaktivierte Elemente | ausgenommen |
| Logos und Markenzeichen | ausgenommen |
Der Wert ist ein Verhältnis der relativen Leuchtdichte, keine Prozentangabe. Zur Orientierung: Schwarz auf Weiß ergibt 21 zu 1. Ein mittleres Grau wie #767676 auf Weiß erreicht knapp 4,5 zu 1 und ist damit die praktische Grenze für Fließtext auf weißem Grund.
Was regelmäßig durchfällt
Hellgraue Fließtexte. Grautöne heller als etwa #767676 auf Weiß reichen nicht. #999999 kommt auf etwa 2,8 zu 1 und ist damit deutlich zu schwach.
Platzhaltertext in Formularfeldern. Fast alle Standarddarstellungen sind zu hell. Doppelt problematisch, weil Platzhalter häufig fälschlich als Ersatz für eine Beschriftung dienen.
Text auf Fotos. Ohne Abdeckung ist der Kontrast von der Bildstelle abhängig und damit unkontrollierbar. Ein Bild kann später ausgetauscht werden, und dann stimmt nichts mehr.
Farbige Schaltflächen mit weißer Schrift. Ein mittleres Blau oder Grün mit weißer Schrift liegt oft knapp unter 4,5 zu 1. Bei Gelb oder Hellgrün ist weiße Schrift praktisch immer zu schwach; dort gehört dunkler Text darauf.
Fokusmarkierungen. Oft in der Markenfarbe auf einem farbigen Hintergrund, was den Kontrast gegen die Umgebung zerstört. Die Markierung muss sich vom Hintergrund abheben, nicht nur vorhanden sein.
Zustände beim Überfahren. Ein Link, der beim Überfahren heller wird, kann in diesem Zustand unter den Grenzwert fallen.
Hinweise in Grau auf grauem Grund. Typisch für Fußbereiche und Hinweisboxen, wo eine leicht abgesetzte Fläche mit hellem Text kombiniert wird.
Prüfen: der Ablauf
Schritt 1: automatisiert. Ein Prüfwerkzeug im Browser über die zehn wichtigsten Seiten laufen lassen. Es findet Kontrastprobleme bei einfarbigen Hintergründen zuverlässig.
Schritt 2: die Stellen von Hand, die das Werkzeug nicht erfasst:
- Text auf Bildern und auf Farbverläufen
- Zustände beim Überfahren, bei Fokus und bei aktiven Elementen
- Fehlermeldungen und Erfolgsmeldungen in Formularen
- Inhalte in ausgeklappten Menüs und Überlagerungen
- Diagramme und Infografiken
- Alles, was erst nach einer Interaktion erscheint
Schritt 3: mit einem Farbmessgerät im Browser die konkreten Werte an Zweifelsstellen bestimmen. Die Entwicklerwerkzeuge aktueller Browser zeigen den Kontrastwert direkt bei der Farbauswahl an, inklusive Hinweis, ob die Schwelle erreicht ist.
Schritt 4: der Praxistest. Die Seite auf einem Telefon bei Tageslicht draußen ansehen. Was dort nicht lesbar ist, ist unabhängig von jedem Messwert ein Problem.
Ein Farbsystem, das die Werte einhält
Der wirksamste Ansatz ist, das Problem einmal an der Wurzel zu lösen statt an jeder Stelle einzeln.
- Zwei Textfarben festlegen: eine dunkle für Fließtext und Überschriften, eine mittlere für Sekundärtext. Beide gegen alle vorkommenden Flächenfarben prüfen.
- Flächenfarben begrenzen auf Weiß, einen sehr hellen Ton, einen mittleren Ton und einen dunklen Ton. Vier Flächen mal zwei Textfarben ergibt acht Kombinationen, die einmal geprüft werden.
- Die Markenfarbe in zwei Varianten führen: eine für farbige Flächen mit dunklem Text darauf, eine dunklere für Text auf hellem Grund. Eine einzige Markenfarbe für beides funktioniert selten.
- Fokusfarbe separat festlegen, die gegen alle Flächenfarben 3 zu 1 erreicht. Häufig ist das nicht die Markenfarbe.
- Die geprüften Kombinationen dokumentieren und nur diese verwenden.
Dieser Schritt kostet einen halben Tag und verhindert, dass bei jeder neuen Seite neu geprüft werden muss.
Was Kontrast nicht löst
Farbe darf nie die einzige Information sein. Ein Formularfeld, das im Fehlerfall nur einen roten Rand bekommt, ist für Menschen mit Farbfehlsichtigkeit unbrauchbar; es braucht zusätzlich einen Text. Ein Diagramm mit fünf farbigen Linien ohne Beschriftung oder Musterung ebenso.
Der schnelle Test: Die Seite in Graustufen ansehen. Was dann nicht mehr unterscheidbar ist, war allein durch Farbe kodiert. Weitere Kriterien in WCAG-Grundlagen, der vollständige Testablauf in Barrierefreiheit testen.