WCAG 1.4.11 Nicht-Text-Kontrast

Das Erfolgskriterium 1.4.11 sorgt dafür, dass sehbehinderte Menschen die Teile einer Seite erkennen, die sie bedienen und verstehen müssen: wo ein Formularfeld ist, was ein Icon zeigt, welche Option ausgewählt ist, wo der Tastaturfokus steht. Es kam mit WCAG 2.1 hinzu, gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.1.4.11). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Die visuelle Darstellung folgender Elemente muss ein Kontrastverhältnis von mindestens 3:1 gegenüber angrenzenden Farben haben:

• Bedienelemente der Benutzeroberfläche: die visuellen Informationen, die nötig sind, um ein Element und seine Zustände zu erkennen — der Rahmen eines Textfelds, die Umrandung einer Checkbox, das Häkchen selbst, die Markierung des ausgewählten Tabs, der Fokusindikator;
• Grafische Objekte: die Teile von Grafiken, die zum Verständnis des Inhalts nötig sind — die Linien und Balken eines Diagramms, die bedeutungstragenden Teile eines Icons.

Ausnahmen:

• inaktive Bedienelemente (zum Beispiel ein deaktivierter Button);
• Bedienelemente, deren Aussehen vom Browser bestimmt und vom Autor nicht verändert wird;
• Grafiken, bei denen eine bestimmte Darstellung wesentlich ist (zum Beispiel ein Foto oder eine Heatmap, bei der andere Farben die Information verändern würden).

Text fällt nicht hierunter — dafür gilt 1.4.3.

Typische Fehler in Onlineshops

• hellgraue Rahmen an Eingabefeldern (#ddd auf Weiß liegt deutlich unter 3:1) ohne weiteren Hinweis;
• eigene Checkboxen, Radiobuttons und Größenauswahlen, deren ausgewählter Zustand nur ein blasser Farbton ist;
• reine Icon-Buttons (Suche, Warenkorb, Wunschzettel) in einer hellen Markenfarbe;
• ein eigener Fokusrahmen in heller Farbe oder outline: none mit kaum sichtbarem Ersatz;
• Sternebewertungen mit blassen leeren und nur etwas dunkleren vollen Sternen;
• Diagrammlinien im Kundenkonto, die gegenüber dem Hintergrund zu hell sind.

So prüfen Sie es

Automatisch: Keine automatische Regel unseres Checkers ist diesem Kriterium zugeordnet. axe-core misst den Textkontrast, kann aber nicht erkennen, welche Rahmen, Icons oder Zustände zum Verständnis eines Bedienelements nötig sind. Hier ist eine manuelle Prüfung nötig.

Manuell: Nehmen Sie für jedes Formularfeld, jeden Button, jedes Icon und jeden Zustand (Standard, Hover, Fokus, ausgewählt, Fehler) die Farbe des wesentlichen Teils und die Farbe daneben und messen Sie sie mit einem Kontrast-Checker. Das Verhältnis muss mindestens 3:1 betragen. Gehen Sie die Seite mit der Tab-Taste durch, um jeden Fokusindikator zu prüfen.

So beheben Sie es

• Dunkeln Sie im Theme Feldrahmen und Icon-Farben ab, bis sie 3:1 gegenüber dem Hintergrund erreichen.
• Zeigen Sie ausgewählte Zustände mit einem deutlichen Rahmen, Häkchen oder einer Füllung, nicht nur mit einem blassen Farbton.
• Verwenden Sie einen Fokusindikator mit mindestens 3:1 Kontrast gegenüber den angrenzenden Farben, zum Beispiel eine 2 px dunkle Umrandung mit Abstand.
• Ergänzen Sie Diagramme um direkte Beschriftungen oder Muster, wenn nicht alle Farben 3:1 erreichen können.

Verwandte Kriterien

• 1.4.3 Kontrast (Minimum) — 4,5:1 für Text.
• 1.4.1 Benutzung von Farbe — Farbe darf nicht der einzige Hinweis sein.
• Kontrast-Checker — zwei Farben messen.

Häufige Fragen

Brauchen Rahmen von Formularfeldern 3:1 Kontrast?

Wenn der Rahmen der einzige visuelle Hinweis darauf ist, wo sich das Feld befindet, ja: Er braucht 3:1 gegenüber der angrenzenden Farbe. Ein Feld mit deutlich kontrastierender Hintergrundfüllung kann sich stattdessen darauf stützen.

Brauchen deaktivierte Buttons 3:1 Kontrast?

Nein. Inaktive (deaktivierte) Bedienelemente sind ausgenommen, ebenso Bedienelemente, deren Aussehen vom Browser stammt und vom Autor nicht verändert wurde.

Gilt 1.4.11 für Icons?

Ja, wenn das Icon nötig ist, um den Inhalt zu verstehen oder ein Bedienelement zu erkennen — zum Beispiel ein Warenkorb-, Such- oder Schließen-Icon ohne Textbeschriftung. Rein dekorative Icons sind nicht erfasst.

Kann ein automatisches Tool den Nicht-Text-Kontrast prüfen?

Nicht zuverlässig. Unser Checker misst den Textkontrast, aber Rahmen, Icons, Fokusrahmen und Diagrammteile müssen Sie manuell mit einem Kontrast-Checker prüfen.