Dieses WCAG-Kriterium fordert, dass „visuelle Informationen zum Erkennen von Benutzeroberflächenkomponenten und -zuständen sowie von Bedeutung tragenden grafischen Objekten“ einen Kontrast von mindestens 3 zu 1 gegenüber der angrenzenden Farbe aufweisen müssen. Neben Text müssen also auch Schaltflächenränder, Icons oder Linien in Grafiken gut unterscheidbar sein, damit Personen mit schwächeren Sehfähigkeiten diese Elemente zuverlässig erkennen können.
Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.4.11
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.4.11:
- UI-Komponenten prüfen: Achte darauf, dass aktive Steuerelemente (Buttons, Formfelder, Checkbox‑Häkchen etc.) und Status‑Indikatoren (Fokusrahmen, markierte Auswahl) mindestens einen Kontrast von 3 zu 1 zum umgebenden Hintergrund haben.
- Dünne Linien eher vermeiden: Dünne Linien können in der Praxis kontrastarm wirken – verwende besser ausreichend dicke Linien oder erhöhe den Kontrast, um echte Sichtbarkeit zu gewährleisten (z.B. beim Fokusrahmen).
- Das wichtigste visuelle Detail zählt: Wenn ein Element durch mehrere Farben umgeben ist, reicht es, wenn das wichtige visuelle Detail, etwa eine Grenze oder ein Icon, 3 zu 1-Kontrast zur nächsthelleren oder -dunkleren Farbe hat.
- Grafische Objekte einschließen: Auch Icons oder Linien in Diagrammen müssen mindestens 3 zu 1 Kontrast zum Hintergrund aufweisen, wenn sie Bedeutung tragen (z. B. in Tortendiagrammen, Achsenlinien, Marker).
- Ausnahmen beachten Dekorative Grafiken ohne Informationsfunktion sowie Markenlogos sind von dieser Vorgabe ausgenommen. Dekorative Grafiken sollten dann ein leeres Alt-Attribut bekommen oder als CSS-Hintergrund eingebunden sein.
- Hover- und Fokuszustände testen: Zwar bezieht sich 1.4.11 ausdrücklich auf Zustände wie Fokus, aber bei Zuständen wie Hover kann es helfen, den Kontrast ebenfalls zu prüfen – besonders, wenn es um wichtige visuelle Hinweise auf Interaktivität geht (z. B. bei Icon-Buttons).
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 1.4.11 Nicht-Text-Kontrast.