WCAG 1.4.1: Benutzung von Farbe

WCAG 1.4.1 verlangt, dass Farbe nie das einzige visuelle Mittel ist, um eine Information zu vermitteln, eine Handlung zu kennzeichnen oder Elemente zu unterscheiden. Jede farbcodierte Aussage braucht ein zweites Merkmal – Text, Symbol, Muster, Unterstreichung oder Position.

(Englisch: Use of Color.)

Das Wichtigste in Kürze

• 1.4.1 verbietet Farbe nicht – es verbietet Farbe allein. Rot für Fehler ist völlig in Ordnung, solange daneben auch etwas steht.
• Für Links im Fließtext gibt es eine Sonderregel: Ohne Unterstreichung brauchen sie mindestens 3:1 Kontrast zum umgebenden Text und zusätzlich ein Merkmal bei Hover und Fokus.
• Rund 8 % der Männer und 0,5 % der Frauen haben eine Farbsinnstörung – bei einer Website mit 10.000 Besuchen im Monat sind das mehrere hundert Menschen.
• Nicht zu verwechseln mit 1.4.3: Dort geht es um Kontrasthöhe zwischen Text und Hintergrund, hier um die Frage, ob Farbe Bedeutung hat.
• Häufigste Fundstellen im Audit: Diagrammlegenden, Statuslisten, Pflichtfeld-Sternchen, Kalenderansichten, „rot markierte“ Tabellenzeilen.
• Der Windows-Kontrastmodus ersetzt Autorenfarben komplett. Wer Bedeutung nur über Farbe kodiert, verliert sie dort restlos.
• Stufe A und damit über die EN 301 549 verbindlich; im BIK-BITV-Test heißt der Prüfschritt „1.4.1 Ohne Farben nutzbar“.

Darf ich Pflichtfelder nur rot markieren?

Nein. Jede farbcodierte Aussage braucht ein zweites Merkmal wie Text, Symbol oder Muster.

Der Normtext nennt vier Zwecke, für die Farbe nicht allein stehen darf: Informationen vermitteln, eine Handlung kennzeichnen, eine Reaktion veranlassen und ein visuelles Element von einem anderen unterscheiden. Der letzte Punkt ist der weiteste – er erwischt auch Kartenflächen, Kalendertage und Diagrammlinien.

Die Stellen, an denen es in der Praxis scheitert:

• Links im Fließtext, die sich nur farblich vom Text abheben.
• Fehlerfelder mit rotem Rahmen und ohne Text – siehe 3.3.1 Fehlererkennung.
• Pflichtfelder, die nur an roter Beschriftung erkennbar sind.
• Diagramme, deren Linien sich nur im Farbton unterscheiden – Muster, Marker oder direkte Beschriftung lösen das.
• Status-Ampeln (grün = verfügbar, rot = vergriffen) ohne Symbol oder Wort.
• Kalender, in denen freie und belegte Tage nur farblich getrennt sind.

Für Textlinks gibt es eine Feinheit, die viele Übersichten unterschlagen: Die WCAG erlaubt Links ohne Unterstreichung, wenn zwei Bedingungen zusammenkommen. Die Linkfarbe muss sich mit mindestens 3:1 vom umgebenden Fließtext unterscheiden, und bei Hover und Tastaturfokus muss ein zusätzliches Merkmal erscheinen – in der Regel die Unterstreichung. Das ist die anerkannte Technik G183. Sie ist zulässig, aber anspruchsvoll: Ein mittleres Blau auf dunkelgrauem Text erreicht die 3:1 oft nicht, und viele Designs vergessen den Fokus-Zustand.

Der vollständige Wortlaut steht im Understanding-Dokument des W3C zu 1.4.1; das deutsche Prüfvorgehen beschreibt der Prüfschritt „1.4.1 Ohne Farben nutzbar“ des BIK-BITV-Tests.

Wen betrifft es besonders?

Menschen mit Farbsinnstörungen sind die naheliegende Gruppe: rund 8 % der Männer und etwa 0,5 % der Frauen, ganz überwiegend mit einer Rot-Grün-Schwäche. Für sie sind gerade die beliebtesten Signalfarben – Rot und Grün für „Fehler“ und „in Ordnung“ – kaum zu trennen. Wer eine Ampel baut, baut für diese Gruppe eine einfarbige Fläche.

Blinde Nutzerinnen und Nutzer bekommen Farbe überhaupt nicht mit. Für sie zählt nur, was im Text oder im Accessible Name steht. Eine Tabellenzeile, deren Bedeutung im Hintergrund #ffe5e5 steckt, ist für den Screenreader eine ganz normale Zeile.

Dazu kommen die Situationen: Kontrastmodus von Windows ersetzt sämtliche Autorenfarben durch ein Systempaar, Dunkelmodus dreht Helligkeiten, ein Schwarz-Weiß-Ausdruck kennt keine Ampel, und die Sonne auf dem Handydisplay frisst jede feine Farbabstufung. Das ist der Curb-Cut-Effekt in Reinform: Die Lösung für wenige verbessert die Lage für alle.

Richtig & falsch im Code

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

/* Richtig, Variante 1: Farbe plus dauerhafte Unterstreichung */
a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Richtig, Variante 2 (Technik G183): mindestens 3:1 zum Fließtext
   plus Unterstreichung bei Hover UND Fokus */
p { color: #2b3340; }              /* Fließtext */
p a { color: #1d4ed8; text-decoration: none; }   /* Kontrast zum Text: 3,4:1 */
p a:hover,
p a:focus-visible { text-decoration: underline; }

<!-- Falsch: Status nur als Farbfläche -->
<span class="badge badge--gruen"></span> Bestellung 4711

<!-- Richtig: Farbe plus Symbol plus Wort -->
<span class="badge badge--gruen">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Geliefert
</span> Bestellung 4711

<!-- Falsch: Pflichtfeld nur an roter Beschriftung erkennbar -->
<label for="mail" class="rot">E-Mail</label>

<!-- Richtig: Sternchen plus Erklärung, Pflicht auch programmatisch -->
<p id="pflichthinweis">Mit * markierte Felder sind Pflichtfelder.</p>
<label for="mail">E-Mail <span aria-hidden="true">*</span></label>
<input id="mail" type="email" required aria-describedby="pflichthinweis" />

Für Diagramme reicht eine Legende neben der Grafik übrigens nicht aus, wenn sich die Linien im Diagramm selbst nur farblich unterscheiden – dann muss man Farben zuordnen können, um die Legende zu benutzen. Direkte Beschriftung am Linienende, unterschiedliche Strichmuster oder eigene Markerformen lösen das sauber; die Muster stehen unter Barrierefreie Diagramme.

So testest du es

1. Graustufen-Blick: In den Chrome-DevTools über „Weitere Werkzeuge → Rendering → Emulate vision deficiencies“ auf „Achromatopsie“ schalten. Alles, was jetzt seine Bedeutung verliert, ist ein Befund.
2. Rot-Grün-Simulation im selben Menü (Protanopie, Deuteranopie) – vor allem für Diagramme, Karten und Statuslisten.
3. Kontrastmodus prüfen: In den DevTools forced-colors: active emulieren oder unter Windows den Kontrastmodus einschalten. Bleiben Zustände wie „aktiver Tab“ oder „ausgewählt“ erkennbar?
4. Textlinks messen: Linkfarbe gegen Fließtextfarbe prüfen – mindestens 3:1, wenn keine Unterstreichung da ist. Der Kontrast-Check rechnet das aus.
5. Fokus-Zustand nicht vergessen: Mit der Tabulator-Taste über die Links gehen. Erscheint das zweite Merkmal auch dort, nicht nur bei Hover?
6. Systematisch fragen: Wo kodiert das Design Bedeutung in Farbe – Status, Kategorie, Verfügbarkeit, Zugehörigkeit? Für jede Stelle das zweite Merkmal benennen und dokumentieren.

Häufiger Fehler in der Praxis

Der Dauerbrenner ist die Unterstreichung, die nur bei Hover erscheint. Das sieht aufgeräumt aus, erfüllt aber nur die halbe Technik: Es fehlt der Fokus-Zustand, und fast immer fehlt auch der 3:1-Kontrast zum Fließtext, weil das Markenblau zu hell gewählt ist. Ich würd dir raten, im Fließtext einfach zu unterstreichen. Das kostet keine Diskussion, ist unmissverständlich, und Nutzer suchen Links nun mal nach diesem Merkmal.

Der zweite Klassiker sind Statusfarben in Tabellen. Eine Zeile ist rot hinterlegt, weil die Zahlung offen ist; eine andere grün, weil sie eingegangen ist. Für Screenreader existiert dieser Unterschied nicht, und in der Rot-Grün-Simulation verschwindet er ebenfalls. Die Lösung ist eine zusätzliche Spalte „Status“ mit Klartext – die hilft nebenbei auch beim Sortieren und Exportieren, siehe Sortierbare Tabellen.

Der dritte ist das unerklärte Sternchen. * neben dem Label, rot eingefärbt, ohne Legende. Wer nicht weiß, dass Rot in diesem Formular „Pflicht“ bedeutet, rät. Ein Satz über dem Formular und das required-Attribut am Feld lösen das in zwei Zeilen – Details unter Validierung & Pflichtfelder.

Häufige Fragen

Müssen Links im Fließtext zwingend unterstrichen sein?

Nein, aber der Weg ohne Unterstreichung ist enger, als er wirkt. Er verlangt mindestens 3:1 Kontrast zwischen Linkfarbe und umgebender Textfarbe und ein zusätzliches Merkmal bei Hover und bei Tastaturfokus. In Navigationen, Menüs und Fußzeilen gilt das nicht – dort ist die Position bereits das unterscheidende Merkmal.

Was ist der Unterschied zwischen 1.4.1 und 1.4.3?

1.4.3 Kontrast (Minimum) fragt: Hebt sich Text hell genug vom Hintergrund ab? 1.4.1 fragt: Steckt in der Farbe eine Information, die ohne sie verloren geht? Ein Diagramm kann alle Kontrastwerte einhalten und trotzdem gegen 1.4.1 verstoßen, wenn seine Linien allein über den Farbton auseinanderzuhalten sind.

Reicht ein Icon als zweites Merkmal aus?

Ja, wenn es sich in der Form unterscheidet und nicht nur in der Farbe. Ein Haken gegen ein Kreuz funktioniert; ein grüner Kreis gegen einen roten Kreis nicht. Für blinde Nutzer muss zusätzlich ein Textäquivalent vorhanden sein – entweder sichtbar daneben oder als Alternativtext am Symbol.

Gilt 1.4.1 auch für Diagramme und Karten?

Ja, und dort besonders streng, weil Farbe das übliche Ordnungsmittel ist. Anerkannte Lösungen sind direkte Beschriftung, unterschiedliche Strichmuster oder Markerformen sowie eine zugängliche Datentabelle als Alternative. Nur eine Farblegende danebenzustellen genügt nicht.

Hilft ein Kontrastwerkzeug beim Prüfen von 1.4.1?

Nur indirekt. Kontrastwerkzeuge messen Helligkeitsverhältnisse und beantworten damit 1.4.3 und 1.4.11. Ob Farbe Bedeutung trägt, kann kein Werkzeug entscheiden – das bleibt eine manuelle Prüfung mit Simulation und gesundem Menschenverstand.

Verwandte Themen

• Farbkontraste richtig einstellen – der Praxis-Leitfaden zum Schwesterthema
• 1.4.3 Kontrast (Minimum) – die Kontrasthöhe für Text
• 1.4.11 Nicht-Text-Kontrast – Kontrast für Bedienelemente und Grafiken
• Barrierefreie Diagramme – Muster statt Farbtöne
• Kontrast-Check – Kontrastwerte einer Seite messen