Interface-Komponenten und grafische Objekte müssen ein Kontrastverhältnis von mindestens 3:1 zu den benachbarten Farben aufweisen.
Warum ist ein guter Kontrast so wichtig?
Hoher Kontrast erleichtert es farbenblinden und sehbehinderten Menschen, Symbole und andere nicht-textuelle Teile zu sehen und zu erkennen. Viele Menschen sehen Ihre Website auf einem Smartphone mit einem kleinen (oder weniger guten) Bildschirm und / oder bei schlechten Lichtverhältnissen. Dieses Erfolgskriterium hilft auch ihnen.
Die WCAG definiert Interface-Komponenten und grafische Objekte wie folgt.
Interface-Komponenten
"Visuelle Informationen, die zur Identifizierung von Komponenten und Zuständen der Benutzeroberfläche erforderlich sind, mit Ausnahme von inaktiven Komponenten oder Komponenten, deren Darstellung der Komponente vom Benutzeragenten bestimmt und nicht vom Autor geändert wird.”
Beispiel
In den meisten Browsern hat die Anzeige einer inaktiven Schaltfläche, die nicht mit CSS gestaltet ist (z. B. <input type="button" disabled="true">), ein Kontrastverhältnis, das kleiner als 3:1 ist. Dies verstößt jedoch nicht gegen dieses Erfolgskriterium, da in diesem Fall der Browser oder der Useragent bestimmt, wie eine inaktive Komponente aussieht.
Grafische Objekte
“Weitergabe von Bildern, die zum Verständnis des Inhalts erforderlich sind, es sei denn, eine bestimmte Bilddarstellung ist für die zu übertragenden Informationen unerlässlich.”
Beispiel
In einer Infografik muss das Kontrastverhältnis von Symbolen und anderen Bildern ein Kontrastverhältnis von mindestens 3:1 in Bezug auf die benachbarten Farben aufweisen. Die Ausnahme gilt (natürlich) für Situationen, in denen Sie Farbmuster (z. B. in einem Webshop), Länderkennzeichen oder Logos anzeigen möchten.
Selbsttest?
Im Wissensartikel "Verwenden Sie ausreichend Kontrast" können Sie lesen, wie Sie das Kontrastverhältnis selbst messen können.