1.4.11 - Nicht-textueller Kontrast
AA 2.1
Design
Ziel
Visuelle Informationen, wie Benutzeroberflächenelemente und grafische Objekte, sind durch ausreichenden Kontrast für Menschen mit Sehbeeinträchtigungen wahrnehmbar.
Beschreibung
- Benutzeroberflächenkomponenten: Komponenten wie Schaltflächen, Kontrollkästchen oder Eingabefelder müssen ein Kontrastverhältnis von mindestens 3:1 gegenüber benachbarten Farben aufweisen.
- Grafische Objekte: Grafiken oder Symbole, die für das Verständnis erforderlich sind, müssen ebenfalls ein Kontrastverhältnis von mindestens 3:1 aufweisen.
- Ausnahmen:
- Inaktive Komponenten.
- Elemente, deren Erscheinungsbild durch den Browser bestimmt wird und nicht verändert wurde.
- Grafiken, bei denen eine bestimmte Darstellung für die Informationsübermittlung unerlässlich ist (z. B. Logos).
Anforderungen
- Kontraste prüfen und sicherstellen, dass sie ein Verhältnis von mindestens 3:1 erreichen.
- Zusätzliche visuelle Hinweise einfügen, z. B. Umrandungen oder Schattierungen, um den Kontrast bei Bedarf zu erhöhen.
- Sicherstellen, dass die Zustände (z. B. Fokus, Auswahl) von Steuerelementen durch ausreichend kontrastierende visuelle Indikatoren dargestellt werden.
- Dokumentieren, welche Farben und Kontraste für spezifische Benutzeroberflächenelemente verwendet wurden (Styleguide).
- CSS-Stile verwenden, um den Kontrast von Benutzeroberflächenkomponenten und grafischen Elementen zu verbessern.
- Tools wie Farbpipetten oder Kontrastanalysatoren nutzen, um die Kontraste zu messen.
- Vermeidung von sehr dünnen Linien oder schwachen Farben, die durch Anti-Aliasing-Effekte schlechter sichtbar werden könnten.
- Inhalte prüfen, ob sie sich für ein responsives Layout eignen.
- Sicherstellen, dass Beschreibungen oder alternative Darstellungen für Ausnahmen bereitgestellt werden (z. B. für Grafiken oder komplexe Tabellen).
- Visuelle Überprüfung der Kontraste mithilfe von Tools wie dem Colour Contrast Analyser.
- Testen von Zustandsanzeigen (z. B. Hover-Effekte, Fokusindikatoren) auf ausreichenden Kontrast.
- Prüfung, ob alternative Darstellungen für nicht-konforme grafische Elemente bereitgestellt wurden.