Nicht-Text-Kontrast (WCAG-Kriterium 1.4.11)
Was bedeutet dieses Kriterium und was sind die häufigsten Barrieren?
Was bedeutet das Kriterium?
Wichtige visuelle Informationen, wie User Interface-Komponenten (z. B. Buttons, Eingabefelder etc.) und grafische Objekte (z.B. informationstragende Icons/Symbole oder Grafiken und Diagramme) müssen ausreichend Kontrast zum Hintergrund bzw. zu angrenzenden Elementen haben. Es muss mindestens ein Kontrastverhältnis von 3:1 erreicht werden.
Ausgenommen sind inaktive User Interface-Elemente sowie Logos, Flaggen und klassische Fotos von Menschen, Landschaften etc.
Warum und für wen ist das Kriterium wichtig?
Ein ausreichender Kontrast ist wichtig für Menschen mit unterschiedlichen Sehbehinderungen, inklusive Farbenblindheit und Farbschwäche. Auch für Nutzer:innen, die Websites oder Apps in suboptimalen Lichtbedingungen aufrufen – z. B. am Smartphone im direkten Sonnenlicht –, stellt ein entsprechendes Kontrastverhältnis zwischen User Interface-Komponenten oder grafischen Objekten zu angrenzenden Elementen die Benutzbarkeit sicher.
Was sind die häufigsten Fehler bei diesem Kriterium und wie können sie behoben bzw. vermieden werden?
Begrenzungsrahmen von Eingabefeldern haben einen zu geringen Kontrast zum Hintergrund:
Wenn Eingabefelder (z. B. ein Suchfeld) durch einen Begrenzungsrahmen als solche erkennbar sind, muss dieser Rahmen einen ausreichenden Kontrast zum Hintergrund aufweisen.
Informationstragende Icons haben einen zu geringen Kontrast zum Hintergrund:
Wenn informationstragende Icons eingesetzt werden, beispielsweise eine Lupe für ein Suchfeld, ein Stift für einen Bearbeitungsmodus, ein Hamburger Menü-Icon für ein ausklappbares Menü etc., dann müssen diese Icons einen ausreichenden Kontrast zu angrenzenden Elementen (z. B. zur Hintergrundfarbe) haben, um gut erkennbar zu sein.
Buttons bzw. Slider-/Karussell-Bedienelemente haben einen zu geringen Kontrast zum Hintergrund:
Falls Buttons nur durch ihren Kontrast zu angrenzenden Elementen als solche identifiziert werden können, muss dieser Kontrast ausreichend sein.
Auch die Bedienelemente von Slidern bzw. Karussell-Komponenten (z.B. Pfeile zum „Weiterblättern“ oder Punkte, um gezielt eine bestimmte „Folie“ des Sliders auszuwählen) müssen ausreichend kontrastreich zu den angrenzenden Elementen sein, um gut wahrgenommen werden zu können.
Diagramme/Grafiken sind zu wenig kontrastreich:
Bei informationstragenden (Info-)Grafiken oder Diagramm:en muss darauf geachtet werden, dass die Inhalte, die lediglich durch ihren Kontrast zu angrenzenden Elementen von diesen unterschieden werden können, einen ausreichenden Kontrast zu ebendiesen aufweisen.