1.4.11 Nicht-Text-Kontrast

Was bedeutet das?

Nicht nur Text muss sich vom Hintergrund abheben. Auch Bedienelemente müssen erkennbar sein: der Rahmen eines Eingabefelds, das Häkchen einer Checkbox, ein Icon ohne Text, die Fokusmarkierung bei Tastaturbedienung. Dafür verlangt WCAG mindestens 3:1 gegenüber den angrenzenden Farben. Das gilt auch für Linien und Flächen in Diagrammen, die man zum Verständnis erkennen muss.

Ausgenommen sind inaktive Bedienelemente und Elemente, deren Aussehen allein der Browser bestimmt und die Sie nicht verändert haben. Hat ein Button nur Text ohne erkennbare Fläche, gilt für den Text Kriterium 1.4.3; die Button-Fläche selbst muss dann keinen Kontrast haben.

Wem hilft das?

• Menschen mit Sehbehinderung
• Menschen, die mit der Tastatur navigieren und die Fokusmarkierung sehen müssen
• Ältere Menschen und alle, die bei schlechtem Licht auf den Bildschirm sehen

Typische Fehler

• Eingabefelder mit sehr hellem Rahmen, etwa #dddddd auf Weiß (1,36:1)
• Fokusmarkierung entfernt (outline: none) oder in einer Farbe, die kaum auffällt
• Helle Icons ohne Text, etwa ein hellgrauer Mülleimer zum Löschen
• Diagrammlinien in Pastelltönen, die sich kaum vom Hintergrund abheben

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Rahmen von Eingabefeldern, Icons, Fokusanzeigen und Diagrammteile mindestens 3:1 zum Hintergrund.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

input  { border: 1px solid #dddddd; }   /* 1,36:1 auf Weiß */
:focus { outline: none; }

input { border: 2px solid #8a8a8a; }   /* 3,45:1 auf Weiß */
:focus-visible {
  outline: 3px solid #005fcc;           /* 5,98:1 auf Weiß */
  outline-offset: 2px;
}

Der Feldrahmen erreicht 3,45:1 und die Fokusmarkierung 5,98:1 auf weißem Grund; beide liegen über 3:1.

Praxistipps

• Prüfen Sie Fokusmarkierungen auf allen Hintergründen, die auf Ihrer Seite vorkommen, auch auf dunklen Bereichen.

Ratgeber und Muster dazu

• Kontraste, die jeder lesen kannBlasse graue Schrift sieht elegant aus, ist aber für viele Menschen schwer zu lesen, bei Sonne auf dem Smartphone für alle. Hier stehen die Werte, die WCAG 2.2 verlangt, und wie Sie sie dauerhaft im Design verankern.
• TabsEin Bereich von mehreren, Wechsel mit den Pfeiltasten.
• KarussellPause-Button, Vor/Zurück, Folienansage, kein Zwangs-Autoplay.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.4.11 Non-text Contrast

Passendes Tool: Kontrast-Checker