WCAG 1.4.11: Nicht-Text-Kontrast

Nicht nur Text braucht Kontrast: Bedienelemente (inklusive ihrer Zustände) und aussagekräftige Grafiken brauchen gegenüber ihrer Umgebung mindestens 3:1 – der Rahmen des Eingabefelds, der Fokus-Ring, das Icon, die Diagramm-Linie. (Englisch: Non-text Contrast.)

Was verlangt das Kriterium?

Zwei Gruppen, jeweils 3:1 gegen die angrenzenden Farben:

1. UI-Komponenten und Zustände: alles, was man zum Erkennen und Bedienen braucht – Feldrahmen, Checkbox-Kästchen, Radio-Ringe, Fokus-Indikatoren, Auswahl-Markierungen, Slider-Griffe. Nicht gefordert: dekorative Teile und inaktive (disabled) Elemente.
2. Grafische Objekte, die man verstehen muss: Icons ohne Textlabel, Diagramm-Segmente, Linien in Datenvisualisierungen, der wichtige Teil einer Infografik.

Wen betrifft es besonders?

Menschen mit Sehbehinderung und nachlassender Kontrastempfindlichkeit im Alter: Ein hellgrauer Feldrahmen auf Weiß (der Klassiker: #ddd ≈ 1,3:1) ist für sie unsichtbar – das Formular wirkt, als fehle das Feld.

Richtig & falsch im Code

/* Falsch: Feldrahmen fast unsichtbar (≈ 1,3:1 auf Weiß) */
input { border: 1px solid #dddddd; }

/* Richtig: Rahmen mit ≥ 3:1 (hier ≈ 4,6:1) */
input { border: 1px solid #767676; }

/* Falsch: Fokus nur als zarte Aufhellung */
button:focus { background: #f5f8ff; outline: none; }

/* Richtig: kräftiger Fokus-Ring mit Abstand */
button:focus-visible {
  outline: 3px solid #1a4fd6; /* ≥ 3:1 gegen Umgebung */
  outline-offset: 2px;
}

Merkhilfe zur Abgrenzung: Text → 4,5:1 (1.4.3); alles andere Bedeutungstragende → 3:1 (1.4.11).

So testest du es

1. Inventur der Bedienelemente: Feldrahmen, Checkboxen, Fokus-Ringe, aktive Tab-Markierungen – jede Kennfarbe gegen ihre Nachbarfarbe messen (Pipette der DevTools + Kontrast-Checker).
2. Icons ohne Label und Diagramm-Farben gegen den Hintergrund messen.
3. Automatische Tools erkennen nur einen Teil (Text-Kontrast ja, Grafik-Kontrast kaum) – hier braucht es den manuellen Blick, am einfachsten entlang des Kontrast-Kapitels im Selbst-Test.

Verwandte Themen

• Farbkontraste richtig einstellen – beide Kontrast-Kriterien in der Praxis
• 2.4.7 Fokus sichtbar – der Fokus-Ring als häufigster 1.4.11-Fall
• Barrierefreie Diagramme