WCAG 1.4.1 Benutzung von Farbe

Das Erfolgskriterium 1.4.1 sorgt dafür, dass Informationen nicht verloren gehen für Menschen, die Farben anders oder gar nicht wahrnehmen — Menschen mit Farbsehschwäche, Menschen mit Sehbehinderung und alle, die ein monochromes Display oder einen Hochkontrastmodus nutzen. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.1.4.1). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Farbe darf nicht das einzige visuelle Mittel sein, um:

• Informationen zu vermitteln („Sale-Preise sind rot“);
• eine Aktion anzuzeigen;
• zu einer Reaktion aufzufordern;
• ein visuelles Element zu unterscheiden (zum Beispiel einen Link innerhalb eines Absatzes).

Farbe darf weiterhin verwendet werden — sie braucht nur einen zweiten visuellen Hinweis: Text, ein Icon, eine Unterstreichung, ein Muster oder eine Form.

Für Links im Text akzeptiert das W3C-Dokument „Understanding“ einen Helligkeitsunterschied als zusätzlichen Hinweis: Hat die Linkfarbe einen Kontrast von mindestens 3:1 zum umgebenden Text (Technik G183), gilt sie als unterscheidbar. Links, die visuell gar nicht hervorgehoben sind, fallen nicht unter 1.4.1, sind aber schwer zu nutzen.

Typische Fehler in Onlineshops

• Links in Produktbeschreibungen, Richtlinien oder im Footer, die nur in einer leicht anderen Farbe und ohne Unterstreichung erscheinen;
• ungültige Formularfelder, die nur durch einen roten Rahmen markiert sind;
• ein Lagerstatus als grüner oder roter Punkt ohne Text („Auf Lager“, „Nicht vorrätig“);
• Farbfelder ohne Namen, sodass Käufer „Marine“ nicht von „Schwarz“ unterscheiden können;
• Diagramme oder Größentabellen, in denen sich Kategorien nur durch die Farbe unterscheiden;
• die gewählte Größe oder der aktuelle Schritt, die nur durch einen Farbwechsel angezeigt werden.

So prüfen Sie es

Automatisch: Unser Checker markiert Links in einem Textblock, die sich vom umgebenden Text nur durch die Farbe unterscheiden (Regel link in text block). Andere Verwendungen von Farbe — Statuspunkte, Fehlerzustände, Diagramme — lassen sich nicht automatisch beurteilen und erfordern eine manuelle Prüfung.

Manuell: Sehen Sie sich die Seite in Graustufen an (mit einer Browsererweiterung oder dem Farbfilter des Betriebssystems). Alles, was Sie dann nicht mehr verstehen — was ein Link ist, welches Feld einen Fehler hat, welche Option ausgewählt ist —, ist ein Verstoß. Prüfen Sie die Zustände Hover, Fokus, Fehler und ausgewählt.

So beheben Sie es

• Unterstreichen Sie Links im Text, zumindest im Fließtext sowie bei Hover und Fokus.
• Ergänzen Sie Fehler und Lagerstatus um Text und ein Icon.
• Zeigen Sie den Namen jedes Farbfelds an, zumindest als zugänglichen Namen und bei der Auswahl.
• Verwenden Sie in Diagrammen zusätzlich zur Farbe Muster, Beschriftungen oder direkte Anmerkungen.
• Markieren Sie die gewählte Option mit einem Rahmen, Häkchen oder fettem Text, nicht nur mit einer neuen Farbe.

Verwandte Kriterien

• 1.4.3 Kontrast (Minimum) — 4,5:1 für Text.
• 1.4.11 Nicht-Text-Kontrast — 3:1 für Icons und Bedienelemente.
• 1.3.3 Sensorische Eigenschaften — Anweisungen, die sich auf Farbe stützen.

Häufige Fragen

Müssen Links im Text unterstrichen sein?

Nicht immer, aber Farbe allein reicht nicht, es sei denn, sie ergibt gegenüber dem umgebenden Text einen Helligkeitsunterschied von mindestens 3:1 (W3C-Technik G183). Die einfachste und robusteste Lösung ist eine Unterstreichung.

Reicht ein roter Rahmen an einem ungültigen Feld?

Nein. Ergänzen Sie einen zweiten Hinweis, der nicht von Farbe abhängt, etwa ein Icon und eine Fehlermeldung als Text. Auch 3.3.1 Fehlererkennung verlangt, dass der Fehler als Text beschrieben wird.

Verbietet 1.4.1 Farbcodierung?

Nein. Farbe ist erlaubt und hilfreich; sie darf nur nicht das einzige visuelle Mittel sein. Ergänzen Sie Text, ein Muster, ein Icon oder eine Form.

Geht es bei 1.4.1 um Kontrast?

Nein. Den Kontrast von Text regelt 1.4.3, den von Icons und Bedienelementen 1.4.11. Bei 1.4.1 geht es um Farbe als einziges Signal, unabhängig vom Kontrast.