Das Prüfverfahren zur BITV


Sie sind hier: BITV-Test > Liste der Erfolgskriterien > Prüfkriterium 1.4.11a (54 von 60)


zum WCAG-Test wechseln


Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt

Prüfschritt 1.4.11a
Kontraste von Grafiken und Bedienelementen ausreichend

Technische Angaben

Version Aktuell
BITV-Bedingung 1.4.11 Nicht-Text Kontrast
Bewertungsalternativen ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Gewichtung geringes Gewicht (1 Punkt)
Bezieht sich auf einzelne Webseite
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.

Was wird geprüft?

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 wird das geprüft?

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 wird geprüft?

1. Anwendbarkeit des Prüfschritts

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.

2. Prüfung

Hinweis: Für die aufgeführten Prüfungen 2.2 bis 2.4 ist eine Sichtprüfung ausreichend, wenn der Kontrast sehr deutlich über 3:1 liegt. Im Zweifelsfall immer den Color Contrast Analyzer einsetzen.

2.1 Prüfung nicht festgelegter Farben

Prüfung, ob für Grafiken oder Bedienelemente (etwa Icon-Fonts), für die über CSS eine Vordergrundfarbe festgelegt wurde, auch eine Hintergrundfarbe festgelegt ist (und umgekehrt).

  1. Das Bookmarklet Vorder-und Hintergrundfarbe definiert oder ein User Stylesheet (html {background-color:black;color:white}) aktivieren.
  2. Prüfen, ob Grafiken oder Bedienelemente nun verschwinden oder schlecht zu erkennen sind. In diesen Fällen fehlt entweder die Festlegung der Farbe oder die der Hintergrundfarbe.

2.2 Prüfung von Bedienelementen in der Ausgangsansicht

  1. Grafische Bedienelemente (etwa Icons) auf der Seite identifizieren, die keinen nebenstehenden Text haben, der dessen Bedeutung und ggf. auch wechselnde Zustände nach Interaktion identifiziert.
  2. Sind die Kontraste zu angrenzenden Farben klar ausreichend (3:1 oder besser)?
  3. Bedienelemente mit Rahmen (etwa Schaltflächen oder Texteingabefelder) identifizieren. Wenn das Bedienelement nur über den Rahmen (oder einen Teil des Rahmens) identifizierbar ist (der Rahmen also keinen Text oder Symbol umschließt), muss der Rahmen einen Kontrast von mindestens 3:1 haben.

2.3 Prüfung von Bedienelement-Zuständen nach Fokussierung oder Aktivierung

  1. Bedienelemente mit der Tastatur und der Maus fokussieren. Ist der Kontrast der Fokushervorhebung zu angrenzenden Farben klar ausreichend (3:1 oder besser)?
  2. Bei Bedienelementen, die verschiedene funktionale Zustände haben (etwa Checkboxen, Radio-Buttons, Reiter in Registerbereichen) die verfügbaren anderen Zustände aufrufen. Ist der Kontrast der informationstragenden Teile der Bedienelemente zu angrenzenden Farben klar ausreichend (3:1 oder besser)? Hinweis: Ausgenommen von der Anforderung sind native, also vom Autor nicht gestylte, Bedienelemente.

2.4 Prüfung von Informationsgrafiken

  1. Informationstragende Grafiken identifizieren, bei denen die Information nur über die Grafik und nicht (oder nicht ausreichend) über beigefügten Text vermittelt wird.
  2. Wenn es in Bereichen der Grafik Farbverläufe gibt, Anteile mit einem Kontrast von weniger als 3:1 ignorieren und bewerten, ob die Information immer noch ausreichend vom kontrastreicheren Teil der Grafik vermittelt wird.

3. Hinweise

3.1 Zur Identifizierung notwendige Teile von Bedienelementen

Bei den zur Identifizierung notwendigen Teile von Bedienelementen handelt es sich um visuell sichtbare Elemente (z.B. Element-Rahmen, aktivierter Zustand eines Elements, informationstragender Teil eines Icons) die wichtige Informationen enthalten, also etwa den Umriss, den Wert, oder den Zustand eines Bedienelements anzeigen. Beispiele:

  • Die Fokushervorhebung eines Bedienelements
  • Der Aktivierungszustand einer Registerkarte
  • Die Ränder eines Eingabefelds oder eines Buttons
  • Der Haken einer Custom-Checkbox

Visuelle Beispiele dazu finden sich im Dokument Understanding Success Criterion 1.4.11: Non-text Contrast.

3.2 Vernachlässigbare Rahmen und Umrisslinien

Wenn die Farbe eines Elements (etwa die innere Hintergrundfarbe eines Schalters oder das Segment eines Kuchendiagramms) ausreichend Kontrast zu Hintergrund hat, auf dem sich das Element befindet, können Rahmen bzw. Umrisslinien bei der Kontrastprüfung vernachlässigt werden.

3.3 Kontrast-Differenz bei Zuständen

  • Nicht verlangt wird ein Kontrast von 3:1 für die Differenz zwischen verschiedenen funktionalen Zuständen des gleichen Bedienelements (etwa Umschalter aktiviert/ nicht aktiviert).
  • Ebenfalls nicht verlangt wird hier ein Kontrast von 3:1 für die Differenz zwischen verschiedenen Interaktions-Zuständen des gleichen Bedienelements (etwa fokussiert / nicht fokussiert). Wenn jedoch der Interaktions-Zustand lediglich über einen Farbwechsel angezeigt wird (also nicht auch anders, etwa durch eine Änderung der Form, Wechsel von beigestelltem Text, Umrandung oder ähnlich) dann sollte der Kontrast der einen Farbe zur anderen mindestens 3:1 betragen. Dies ist Gegenstand der Prüfung in Prüfschritt 2.4.7 "Aktuelle Position des Fokus sichtbar".

Verlangt wird der Kontrast dagegen für jeden einzelnen Zustand zur jeweils angrenzenden Farbe.

Quellen

Understanding Success Criterion 1.4.11: Non-text Contrast (zur Zeit nur auf Englisch verfügbar)

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt