Nicht-Text-Kontrast: WCAG 1.4.11 einfach erklärt

Wo kannst Du etwas eingeben? Ist ein Kontrollkästchen ausgewählt? Welcher Button hat gerade den Tastaturfokus? Um das zu erkennen, brauchst Du mehr als gut lesbaren Text. Auch Rahmen, Häkchen und Symbole müssen sich von ihrer Umgebung abheben.

Das nennt sich Nicht-Text-Kontrast: der Helligkeitsunterschied zwischen solchen sichtbaren Merkmalen und den Farben direkt daneben. Ist er zu gering, kann ein Eingabefeld mit dem Hintergrund verschmelzen oder ein Häkchen kaum erkennbar sein. Das erschwert besonders Menschen mit eingeschränktem Sehvermögen die Bedienung.

WCAG 1.4.11 verlangt mindestens 3:1, wenn ein Merkmal nötig ist, um ein Bedienelement oder seinen Zustand zu erkennen. Das Verhältnis beschreibt den Helligkeitsunterschied: Bei 1:1 gibt es keinen Unterschied, bei 3:1 ist die Mindestanforderung erreicht. Für Text gelten andere Vorgaben. Diese erklärt unser Farbkontrast-Leitfaden.

Gute und schlechte Beispiele

Die folgenden Beispiele zeigen drei typische Kontrastprobleme und jeweils eine Lösung. Sie verwenden feste helle oder dunkle Hintergründe, damit Du den Unterschied unabhängig vom Website-Theme vergleichen kannst.

Ein Eingabefeld, das im Hintergrund verschwindet

Hier sind das Feld und der Hintergrund weiß. Der helle Rahmen ist die einzige sichtbare Begrenzung, hebt sich aber kaum ab. Ein dunklerer Rahmen macht erkennbar, wo Du etwas eingeben kannst.

Eine Checkbox, deren Häkchen kaum sichtbar ist

Das Kontrollkästchen selbst ist gut erkennbar. Sein weißes Häkchen verschwindet jedoch fast auf der hellen Fläche. Dadurch ist schwer zu erkennen, ob es ausgewählt ist. Ein dunkles Häkchen löst dieses Kontrastproblem.

Ein Menü-Symbol, das beim Darüberfahren verblasst

Beim Darüberfahren mit der Maus wird das Symbol im schlechten Beispiel blasser. Sein Kontrast fällt unter 3:1. In der korrigierten Variante bleibt die Farbe kräftig genug. Die Beispiele zeigen diesen Zustand dauerhaft, damit Du beide Varianten vergleichen kannst.

Kontrastwerte der gezeigten Beispiele

Diese Werte gehören zu den sechs Beispielen oben. Bestanden bedeutet hier: Das gezeigte Merkmal erreicht mindestens 3:1 zur Fläche direkt daneben. Das bewertet seinen Nicht-Text-Kontrast; Beschriftung und Tastaturbedienung prüfst Du zusätzlich.

Welche Rahmen und Symbole brauchen genug Kontrast?

Entscheidend ist, was Du zum Erkennen brauchst. Beim weißen Eingabefeld oben ist es der Rahmen. Bei der ausgewählten Checkbox ist es das Häkchen. Ein gut sichtbarer Rahmen allein hilft dort nicht, den Auswahlzustand zu erkennen.

Nicht jeder Rahmen braucht einen eigenen Kontrastnachweis. Ein Button kann zum Beispiel bereits durch seine lesbare Beschriftung erkennbar sein. Eine Linie, die nur zur Dekoration dient, fällt nicht unter diese Anforderung. Das erläutert die W3C-Technik G209.

Vergleiche immer die Farben, die direkt aneinandergrenzen: das Häkchen mit der Fläche im Kästchen, den Feldrahmen mit seiner Umgebung. Hat ein Element verschiedene angrenzende Farben, prüfe jede relevante Grenze. Deaktivierte Bedienelemente und unveränderte, vom Browser gestaltete Elemente sind nach WCAG 1.4.11 ausgenommen.

Fokusring prüfen: Sichtbarkeit und Kontrast gehören zusammen

Der Fokusring zeigt Dir, welches Element Du gerade mit der Tastatur bedienst. WCAG 2.4.7 verlangt, dass dieser Fokus sichtbar ist. Ein selbst gestalteter Fokusring braucht außerdem ausreichend Kontrast zu den angrenzenden Farben.

Gehe mit der Tab-Taste durch die Seite und prüfe, ob Du den Fokus überall erkennst. Ein Ring kann auf einer weißen Karte gut sichtbar sein und auf einem farbigen Hintergrund verschwinden. Hat er Abstand zum Element, prüfe beide Seiten: zum Zwischenraum und zum äußeren Hintergrund.

Ein sichtbarer Fokusring sagt noch nichts darüber aus, ob das Feld ohne Fokus gut erkennbar ist. Prüfe deshalb auch seinen normalen Zustand.

Was ein automatischer Test erkennt

Ein automatischer Test ersetzt diese Prüfung nicht. Die axe-Regel color-contrast prüft Textkontrast. In unserem Test mit axe-core 4.10.3 meldete sie die schwachen Feldrahmen, das kaum sichtbare Häkchen und das verblasste Menü-Symbol nicht.

Zwei Textprobleme hat sie dagegen erkannt: die blaue Beschriftung eines ausgewählten Tabs im Dark Mode und einen zu hellen Fehlertext. Der Tab zeigt den Unterschied besonders gut: Seine blaue Unterstreichung erreicht 3,22:1 und erfüllt damit die Anforderung an Nicht-Text-Kontrast. Die Beschriftung nutzt dasselbe Blau, braucht bei 20px und mittlerer Schriftstärke aber 4,5:1. Sie besteht die Textkontrast-Prüfung nicht. axe meldet hier den Text.

Eine ausreichende Unterstreichung sagt also noch nichts über die Lesbarkeit der Beschriftung oder die Tastaturbedienung des Tabs aus.

Ein Scan hilft Dir also, Textprobleme zu finden. Ob Rahmen, Häkchen und Symbole erkennbar bleiben, musst Du zusätzlich prüfen. Die genannten Ergebnisse beziehen sich auf unsere Beispiele und die getestete axe-Version.

So prüfst Du Deine Website

1. Gehe die Seite durch. Sind Eingabefelder, Kontrollkästchen und Symbole gut erkennbar? Prüfe auch, was sich beim Darüberfahren, Auswählen und Bedienen mit der Tastatur verändert.

2. Prüfe helle und dunkle Ansichten. Wiederhole die Prüfung auf den Hintergründen, auf denen die Elemente tatsächlich erscheinen.

3. Prüfe die Farbpaare. Vergleiche die Farben direkt nebeneinander im Kontrast-Checker. Für notwendige Rahmen, Symbole und Zustandsmarkierungen sind mindestens 3:1 nötig.

4. Halte das Problem fest. Notiere das Element, seinen Zustand, die beiden Farben und das Ergebnis. Prüfe nach einer Änderung auch die Beschriftung und den Tastaturfokus erneut.

Der BIK-Prüfschritt zu Nicht-Text-Kontrast beschreibt die manuelle Prüfung ausführlicher.

Eine klare Aufgabe für Dein Entwicklungsteam

Beschreibe, was schlecht erkennbar ist und wann es auftritt. Beim Checkbox-Beispiel könnte die Aufgabe so lauten:

Im Dark Mode ist das weiße Häkchen auf der hellen Checkbox kaum sichtbar. Bitte ändere seine Farbe so, dass es mindestens 3:1 zur Fläche im Kästchen erreicht. Prüfe anschließend die ausgewählte und die leere Checkbox in beiden Ansichten sowie die Bedienung mit der Tastatur.

Weitere Prüfungen findest Du im Leitfaden zu barrierefreien Formularen und in unserer Website-Test-Checkliste. navable Audit ergänzt die manuelle Prüfung um automatisch erkennbare Probleme.