Prüfkriterium 9.1.4.1 „Ohne Farbe nutzbar“

Digitale Barrierefreiheit ist ein entscheidender Faktor für die Inklusion im Internet. Ein wichtiger Aspekt hierbei ist die Nutzung von Farben als einziges Mittel zur Informationsdarstellung. Informationen sollten nicht ausschließlich durch Farbunterschiede vermittelt werden, damit diese für alle Nutzenden zugänglich sind.

Der Prüfschritt 9.1.4.1 "Ohne Farbe nutzbar" basiert auf den Richtlinien der Web Content Accessibility Guidelines (WCAG) 2.1 und zählt mit in die Barrierefreie-Informationstechnik-Verordnung (BITV) hinein.

Warum ist dieser Prüfschritt wichtig?

Etwa 4,5 % der Weltbevölkerung sind von einer Form der Farbsehschwäche betroffen. Ohne zusätzliche Kennzeichnungen können diese Personen farbbasierte Informationen schwer oder gar nicht erkennen. Fachkräfte für Entwicklung oder Design sollten diesen Aspekt bereits in der Konzeptionsphase berücksichtigen, um eine breite Zugänglichkeit sicherzustellen.

Anforderungen des Prüfschritts

Gemäß der WCAG 2.1 (Erfolgskriterium 1.4.1) dürfen Informationen nicht ausschließlich durch Farben vermittelt werden. Dies betrifft insbesondere:

Fehlermeldungen in Formularen
Interaktive Elemente wie Links oder Schaltflächen
Diagramme und Grafiken

Damit alle Nutzenden, insbesondere Menschen mit Farbsehschwächen oder Erblindungen, die Inhalte verstehen können, müssen zusätzliche visuelle oder textliche Hinweise vorhanden sein.

Beispiele für barrierefreie Umsetzung

Fehlermeldungen: Eine rote Hervorhebung allein reicht nicht aus. Zusätzlich sollte ein Fehlertext (wie zum Beispiel "Fehler bei der Eingabe: E-Mail ist ungültig") angezeigt werden.
Links und Schaltflächen: Links dürfen nicht nur farblich markiert sein, sondern müssen sich auch durch Unterstreichungen oder andere visuelle Merkmale vom restlichen Text abheben (siehe Abschnitt „Ein häufig gemachter Fehler: Darstellung von Links im Fließtext“).
Diagramme und Grafiken: Informationen, die durch Farben vermittelt werden, sollten zusätzlich durch Symbole, Textbeschriftungen oder verschiedene Muster dargestellt werden.

Schlechtes Beispiel bei einer Angabe vom Online-Status:

Die Namen „Max Mustermann“ und „Erika Mustermann“ sind jeweils mit einem roten bzw. grünen Kreis versehen – eine gängige Farbcodierung zur Kennzeichnung des Online- (grün) und Offline-Status (rot).© Stiftung Pfennigparade

Darstellung des „Online-Status“, bei der die Information ausschließlich durch Farbe vermittelt wird, Bildbeschreibung folgt nach Grafik

Die Namen „Max Mustermann“ und „Erika Mustermann“ sind jeweils mit einem roten bzw. grünen Kreis versehen – eine gängige Farbcodierung zur Kennzeichnung des Online- (grün) und Offline-Status (rot).© Stiftung Pfennigparade

Wahrnehmung des Online-Status von Menschen mit Rot-Grün-Schwäche:

Die gleiche Darstellung wie in der ersten Grafik, jedoch in Graustufen statt in Rot und Grün. Dies veranschaulicht, wie Menschen mit Rot-Grün-Schwäche den Online- und Offline-Status wahrnehmen: Beide Kreise erscheinen in ähnlichen Grautönen, sodass eine Unterscheidung nur erschwert, bis gar nicht möglich ist. © Stiftung Pfennigparade

Darstellung des „Online-Status“ aus der Perspektive von Menschen mit Rot-Grün-Schwäche, Bildbeschreibung folgt nach Grafik

Die gleiche Darstellung wie in der ersten Grafik, jedoch in Graustufen statt in Rot und Grün. Dies veranschaulicht, wie Menschen mit Rot-Grün-Schwäche den Online- und Offline-Status wahrnehmen: Beide Kreise erscheinen in ähnlichen Grautönen, sodass eine Unterscheidung nur erschwert, bis gar nicht möglich ist. © Stiftung Pfennigparade

Gutes Beispiel bei einer Angabe des Online-Status:

Um die Wahrnehmbarkeit vom Online- und Offline-Status für alle zu gewährleisten, ist es notwendig, die Darstellung zu erweitern. Max Mustermann benötigt neben dem roten Kreis noch das Symbol „X“ und den Text „Offline“. Erika Mustermann benötigt neben dem grünen Kreis das Symbol „Haken“ und den Text „Online“. Eine Kombination aus Farben, Symbolen und Text sorgt für bessere Zugänglichkeit. © Stiftung Pfennigparade

Optimale Darstellung vom Online-Status durch Formatveränderung und ergänzenden Text, Bildbeschreibung folgt nach Grafik

Um die Wahrnehmbarkeit vom Online- und Offline-Status für alle zu gewährleisten, ist es notwendig, die Darstellung zu erweitern. Max Mustermann benötigt neben dem roten Kreis noch das Symbol „X“ und den Text „Offline“. Erika Mustermann benötigt neben dem grünen Kreis das Symbol „Haken“ und den Text „Online“. Eine Kombination aus Farben, Symbolen und Text sorgt für bessere Zugänglichkeit. © Stiftung Pfennigparade

Ein häufig gemachter Fehler: Darstellung von Links im Fließtext

Damit Inhalte ohne Farbe nutzbar sind, müssen Links im Fließtext klar erkennbar sein.

Ist der Kontrast der Linkfarbe zur umgebenden Textfarbe mindestens 3,0:1, genügt im Ausgangszustand die farbliche Hervorhebung. Beim Fokuserhalt müssen diese Links jedoch durch zusätzliche visuelle Merkmale wie Unterstreichung, Fettung oder Inversion zusätzlich hervorgehoben werden.

Falls der Farbkontrast zwischen Linkfarbe und umgebender Textfarbe unter 3,0:1 liegt, muss der Link bereits im Ausgangszustand durch ein weiteres Merkmal von der Umgebung unterscheidbar sein.

Mögliche Optionen sind:

Unterstreichung (Standardlösung für Weblinks)
Fettschrift oder Kursivschrift
Invertierte Darstellung (Hintergrundfarbe des Links verändert sich)
Markierung oder Umrandung

Abgrenzung zu anderen Prüfschritten: Zusätzlich muss für die Erfüllung von Kriterium 9.1.4.3 „Kontraste von Texten ausreichend“ sichergestellt sein, dass die Linkfarbe zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweist.

Autorin: Stiftung Pfennigparade