WCAG 1.4.1: Benutzung von Farbe

Farbe darf nie das einzige visuelle Mittel sein, um Informationen zu transportieren, Aktionen anzuzeigen, Reaktionen auszulösen oder Elemente zu unterscheiden. Jede farbcodierte Information braucht ein zweites Merkmal: Text, Symbol, Muster, Unterstreichung. (Englisch: Use of Color.)

Was verlangt das Kriterium?

Die Klassiker, an denen es scheitert:

• Links im Fließtext, die sich nur farblich vom Text unterscheiden – sie brauchen z. B. eine Unterstreichung.
• Fehlerfelder, die nur rot umrandet sind – sie brauchen Text und Verknüpfung.
• Pflichtfelder, die nur an roter Farbe erkennbar sind – „(Pflichtfeld)“ oder ein erklärtes Sternchen dazu.
• Diagramme, deren Linien sich nur im Farbton unterscheiden – Muster, Marker oder direkte Beschriftung ergänzen.
• Status-Ampeln (grün = ok, rot = Fehler) – Icon oder Text dazu.

Wichtig: 1.4.1 verbietet Farbe nicht – es verbietet Farbe allein.

Wen betrifft es besonders?

Menschen mit Farbsinnstörungen – rund 8 % der Männer – und Menschen mit Sehbehinderungen, die eigene Farbschemata oder Kontrastmodi nutzen, in denen Autorenfarben ersetzt werden. Auch bei Graustufen-Druck und auf schlechten Displays entscheidet das zweite Merkmal.

Richtig & falsch im Code

/* Falsch: Link nur über Farbe erkennbar */
a { color: #0a5dd6; text-decoration: none; }

/* Richtig: Farbe plus Unterstreichung */
a { color: #0a5dd6; text-decoration: underline; }

<!-- Falsch: Fehler nur als rote Umrandung -->
<input class="error" id="email" />

<!-- Richtig: Farbe + Symbol + Text, programmatisch verknüpft -->
<input id="email" class="error" aria-invalid="true" aria-describedby="email-err" />
<p id="email-err">⚠ Bitte geben Sie eine gültige E-Mail-Adresse ein.</p>

So testest du es

1. Graustufen-Test: Seite in Graustufen betrachten (DevTools → Rendering → „Emulate vision deficiencies“ → Achromatopsie). Geht Information verloren?
2. Simulationen für Rot-Grün-Schwäche (Protanopie/Deuteranopie) im selben DevTools-Menü – besonders für Diagramme.
3. Systematisch fragen: Wo codiert das Design Bedeutung in Farbe (Status, Kategorien, Verfügbarkeit)? Für jede Stelle das zweite Merkmal benennen.

Verwandte Themen

• Farbkontraste richtig einstellen – das Schwesterthema Kontrasthöhe
• 1.4.3 Kontrast (Minimum) und 1.4.11 Nicht-Text-Kontrast
• Fehlermeldungen barrierefrei