1.4.11a Kontraste von Grafiken und grafischen Bedienelementen ausreichend

Gewichtung

Geringes Gewicht (1 Punkt)

Was

Die für die Identifizierung notwendige visuelle Information von informationstragenden Grafiken und grafischen Bedienelementen sowie deren Zuständen soll einen Kontrast von mindestens 3:1 zu angrenzenden Farben haben.

In vielen Fällen, wie etwa bei einfarbigen Icons, bedeutet das einfach, dass der Kontrast zwischen der Farbe des Elements und der Hintergrundfarbe gemessen wird.

Bei mehrfarbigen oder abgetönten Elementen gilt die Kontrastanforderung für jene visuelle Information, über die das Element (oder dessen Zustand) hinreichend klar identifizierbar ist. Es müssen also nicht sämtliche Bereiche einer Grafik die Kontrastanforderung erfüllen.

Wenn grafische Elemente zusätzlich eingesetzt werden, ein Text also das Bedienelement bzw. dessen Zustand hinreichend kennzeichnet, müssen grafische Elemente die Kontrastanforderung nicht erfüllen.

Warum

Viele Menschen mit Sehbehinderungen brauchen gute Kontraste, um grafische Bedienelemente bzw. deren Zustände oder Elemente in informationstragenden Grafiken, etwa statistischen Diagrammen oder Schaubildern, wahrnehmen zu können. Die Forderung nach einem Minimalkontrast für informationstragende Grafiken hilft diesen Menschen.

Wie

Anwendbarkeit

Der Prüfschritt ist anwendbar, wenn informationstragende grafische Bedienelemente, die nicht lediglich ergänzend (etwa zu Text) eingesetzt werden, oder informationstragende Grafiken vorhanden sind.

Nicht anwendbar ist der Prüfschritt auf Fotos, Logos, Flaggen, Screenshots, Diagramme mit Farben, die nicht geändert werden dürfen, und Datenvisualisierungen mit Farbabstufungen wie etwa Heatmaps.

Ebenfalls nicht anwendbar ist der Prüfschritt auf native grafische Bedienelemente, die in ihrem Erscheinungsbild nicht durch den Autor beeinflusst wurden, etwa native HTML-Checkboxen, sowie auf inaktive Bedienelemente, also solche, die zustandsabhängig für die Interaktion nicht zur Verfügung stehen.

Prüfung

Folgenden CSS-Code hinzufügen und die Seite auf Zugänglichkeit prüfen :

html, body, * { background-color : black !important; color : white !important; }

Bewertung

Prüfschritt erfüllt:

Informationstragenden Grafiken sowie grafische Bedienelemente und deren Zustände und haben einen Kontrast zu angrenzenden Farben von 3:1 oder besser.

Prüfschritt nicht erfüllt:

Informationstragende Grafiken sowie grafische Bedienelemente sind nicht erkennbar und somit nicht mehr bedienbar