Prüfschritt 11.1.4.1 Benutzung von Farbe

Was wird geprüft?

Über Farben vermittelte Informationen sollen auch ohne Wahrnehmung der Farbe verfügbar sein, also zusätzlich durch andere Mittel (etwa Fettung oder Einrückung) hervorgehoben sein. Die Vermittlung von Informationen soll sich also nicht ausschließlich auf einfache Farbunterschiede stützen.

Warum wird das geprüft?

Ausschließlich über Farben vermittelte Informationen sind für farbfehlsichtige Nutzende nicht oder nur eingeschränkt identifizierbar und unterscheidbar. Ein Beispiel ist die Rot-Grün Sehschwäche: Rot und grün sind für Menschen mit dieser Sehschwäche nicht unterscheidbar.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist immer anwendbar.

2. Prüfung

2.1 Unterschiede nur über Farbe?

  1. Prüfen, ob die App-Ansicht Elemente enthält, die nur über die Farbgebung Informationen vermitteln. Beispiele dafür:

    • Ausgewählte Menueinträge werden in einer anderen Farbe dargestellt

    • Links im Fließtext werden in einer anderen Farbe dargestellt

    • Der Status eines Attributs (z.B. verfügbar oder fehlerhaft) wird nur über die Farbe dargestellt, etwa über einen roten oder grünen Punkt

    • Ein Diagramm verwendet Farben für die vergleichende Darstellung des Kursverlaufs verschiedener Aktien

    • Inkorrekt oder noch nicht ausgefüllte Felder in Formularen werden farblich gekennzeichnet

  2. Ist das Kontrastverhältnis zwischen dem farblich unterschiedenen Element zu anderen Elementen 3:1 oder besser? Dann geschieht die Hervorhebung nicht nur über Farbe, sondern auch über den Kontrastunterschied. Beispiel: Fließtextlinks haben einen Kontrastunterschied von mehr als 3:1 zum umgebenden Text.

  3. Falls der Kontrastunterschied unter 3:1 liegt: Gibt es weitere Merkmale, die das farblich unterschiedene Element außerdem unterscheidbar machen? Beispiele dafür:

    • Ausgewählte Menüeinträge sind zusätzlich gefettet oder eingerückt oder eine Überschrift, die dem Menüeintrag entspricht, macht die Auswahl deutlich

    • Links im Fließtext sind außerdem unterstrichen, gefettet oder mit einem Symbol versehen

    • Der Status eines Attributs (z.B. verfügbar oder fehlerhaft) wird zusätzlich durch die Form des Symbols oder eine zusätzliche Beschriftung dargestellt

    • Inkorrekt oder noch nicht ausgefüllte Felder in Formularen werden zusätzlich über eine Fehlermeldung gekennzeichnet

    • Das Diagramm verwendet nicht nur Farben, sondern auch Symbole, Legenden oder verschieden gestrichelte Linien für die vergleichende Darstellung

2.2 Prüfung der Tastaturfokus-Hervorhebung

  1. Wenn die Fokushervorhebung ausschließlich über den Farbwechsel eines Elements geschieht (z.B. ändert sich die Hintergrundfarbe eine Schalters), prüfen, ob der Kontrastabstand zwischen fokussiertem und unfokussiertem Zustand mindestens 3:1 beträgt.

  2. Die unveränderte Standard Tastaturfokus-Hervorhebung von iOS und Android über die leichte graue oder blaue Einfärbung des Hintergrunds hat einen unzureichenden Kontrastabstand zum unfokussierten Zustand. Sie ist aber als ausreichend zu bewerten, da für unveränderte Elemente und deren Zustände (einschließlich Fokus) eine Ausnahme in der Anforderung 11.1.4.11 Nicht-Text Kontrast besteht.

3. Hinweise

Nicht als einfache Farbunterschiede gelten: * die farbige Hinterlegung von Elementen (denn eine Form kommt dazu oder ändert sich) * der Austausch von Vorder- und Hintergrundfarbe (denn wenn überhaupt ein Unterschied von Vorder- und Hintergrund wahrgenommen wird, ist auch der Austausch wahrnehmbar)

4. Bewertung

Erfüllt:

  • Information wird nicht nur über die Farbe vermittelt, sondern auch über andere zusätzliche Merkmale, etwa die Form, einen Rahmen, eine Textauszeichnung oder Einrückung, oder beigestellten Text.

Nicht erfüllt:

  • Information wird ausschließlich über Farbe vermittelt. Der Kontrastunterschied der für die Unterscheidung relevanten Farben liegt unter 3:1.

Einordnung des Prüfschritts

Abgrenzung zu anderen Prüfkriterien

Abgrenzung zur Prüfung der Kontraste

In diesem Prüfschritt geht es nicht um die Prüfung der Kontraste. Dies ist Aufgabe der Prüfkriterien 11.1.4.3 "Kontrast (Minimum)" und 11.1.4.11 "Nicht-Text-Kontrast".

Für Fließtext-Links gilt ein deutlicher Kontrast (mindestens 3,0:1) der Linkfarbe zur Farbe des umgebenden Textes, um diese Anforderung ausreichend zu erfüllen. Es ist dann keine zusätzliche Hervorhebung nötig. Für die Erfüllung von 9.1.4.3 "Kontrast (Minimum)" muss jedoch gewährleistet sein, dass die Linkfarbe zum Hintergrund 4,5:1 erfüllt.

Abgrenzung zum Prüfschritt 11.1.3.3 "Sensorische Eigenschaften"

In diesem Prüfschritt geht es nicht um die Prüfung von Verweisen auf Seiteninhalte mit Hilfe der Angabe von Farben. Die sinnesunabhängige Bereitstellung von Verweisen auf Inhalte wird im Prüfschritt 11.1.3.3 "Sensorische Eigenschaften" geprüft.

Abgrenzung zu fehlenden Hervorhebungen

In diesem Prüfschritt 11.1.4.1 geht es um die Farbunabhängigkeit vorhandener UI-Elemente.

Eine negative Bewertung ist also beispielsweise angebracht, wenn Links im Fließtext nur durch die Farbe (und nicht zusätzlich durch Unterstreichung, Fettung oder vorangestellte Markierung) gekennzeichnet sind und der Kontrastunterschied zum umgebenden Text weniger als 3:1 beträgt. Wenn Links im Text überhaupt nicht gekennzeichnet sind, ist dies ein Problem für alle Nutzenden und keines der mangelnden Barrierefreiheit. Deshalb wird dies hier nicht negativ bewertet.

Gleiches gilt für die Kennzeichnung der aktuellen Menüposition: Wird die aktuelle Position überhaupt nicht angezeigt, ist dies kein Fehler in diesem Prüfschritt.

Einordnung des Prüfschritts nach WCAG 2.1

Guidelines

Success criteria

Techniques

General Techniques
Failures