Farbe als Informationsträger

Das Prinzip: Farbe nie allein

Das Erfolgskriterium 1.4.1 (Verwendung von Farbe) der WCAG 2.2 ist eine der ältesten und klarsten Regeln der digitalen Barrierefreiheit, und sie gilt auf Level A, der niedrigsten und damit verbindlichsten Stufe. Sie lautet sinngemäß: Farbe darf nicht das einzige visuelle Mittel sein, um Information zu vermitteln, eine Aktion zu kennzeichnen, eine Reaktion einzufordern oder ein Element von einem anderen zu unterscheiden.

„Einziges Mittel" ist der entscheidende Teil. Farbe benutzen ist nicht verboten, im Gegenteil, sie ist wertvoll. Verboten ist, sie allein arbeiten zu lassen. Eine rote Fehlermeldung ist gut, solange neben dem Rot noch ein Wort, ein Symbol oder eine Beschriftung die Botschaft trägt. Wird dieselbe Fehlermeldung nur durch einen roten Rahmen markiert, ist die Information für einen Teil deiner Nutzer:innen unsichtbar.

Die Gruppe ist nicht klein. Rot-Grün-Fehlsichtigkeit betrifft nach gängigen Schätzungen etwa 8 % der Männer und rund 0,5 % der Frauen mit nordeuropäischer Abstammung, eine der häufigsten genetischen Besonderheiten überhaupt. Dazu kommen situative Einschränkungen: ein Display in der Sonne, ein Schwarz-Weiß-Ausdruck, ein Nachtmodus, der Farben verschiebt.

Farbe als Information ist nicht dasselbe wie Kontrast

Zwei WCAG-Anforderungen werden oft verwechselt, weil beide „mit Farbe zu tun haben":

• Verwendung von Farbe (1.4.1) fragt: Geht Information verloren, wenn man die Farbe wegnimmt? Es geht um die Bedeutung , die an einer Farbe hängt.
• Kontrast (1.4.3 und 1.4.11) fragt: Ist der Helligkeitsunterschied groß genug, um etwas überhaupt zu erkennen? Es geht um die Lesbarkeit , nicht um die Bedeutung.

Ein Beispiel macht den Unterschied greifbar: Ein Link mitten im Fließtext, der sich nur durch eine andere, aber kontraststarke Farbe vom übrigen Text abhebt, erfüllt vielleicht den Kontrast, verstößt aber gegen 1.4.1. Denn die Information „das hier ist ein Link" hängt allein an der Farbe. Eine Unterstreichung löst das Problem. Wie du Kontrastwerte konkret prüfst, behandeln wir ausführlich in der Kontrastprüfung ; diese Seite bleibt bei der Frage, welche Information du an Farbe knüpfst.

Typische Stellen, an denen Farbe allein scheitert

In der Praxis taucht das Problem immer an denselben Stellen auf. Diese Übersicht fasst die häufigsten Muster zusammen und zeigt, welche zweite Codierung jeweils funktioniert.

Die zweite Codierung: Form, Text, Position, Muster

„Eine zweite Codierung" klingt abstrakt, meint aber etwas sehr Konkretes: ein zweites, farb-unabhängiges Merkmal, das dieselbe Information trägt. Vier Familien decken fast alle Fälle ab:

• Text: die robusteste Lösung. Ein Wort („Fehler", „Aktiv", „Pflichtfeld") funktioniert in jeder Darstellung, für jede Hilfstechnologie und in jeder Sprache nach Übersetzung.
• Form und Symbol: ein Warn-Dreieck, ein Häkchen, ein Kreuz, eine unterschiedliche Punkt-Form. Wichtig: Das Symbol muss selbst erkennbar sein und braucht oft noch eine Text-Alternative.
• Position und Layout: wenn die Anordnung schon eindeutig ist (etwa „der obere Wert ist der höhere"), trägt sie Information unabhängig von Farbe.
• Muster und Textur: Streifen, Punkte oder Schraffuren in Diagrammen und Flächen, wenn Text dort nicht passt.

Im Code heißt das vor allem: Die Fehlermeldung gehört nicht nur visuell ans Feld, sondern auch programmatisch, damit Screenreader sie mit dem Feld zusammen ankündigen.

 <!-- Farbe (im CSS) wird durch Symbol + Text + aria-Verknüpfung gestützt --> 
<label for= "email" 
>E-Mail</label>
<input id= "email" 
type= "email" 
aria-invalid= "true" 
aria-describedby= "email-fehler" 
>
<p id= "email-fehler" 
class= "fehler" 
>
  <span aria-hidden= "true" 
>⚠️</span>
  Bitte gib eine gültige E-Mail-Adresse ein.
</p>

Wenn Farbe doch trägt: der 3-zu-1-Kontrast

Manchmal ist Farbe, gestützt durch eine zweite Codierung, der praktischste Weg, etwa bei Diagramm-Flächen, Status-Symbolen oder Bedien-Elementen. Dann greift das Erfolgskriterium 1.4.11 (Nicht-Text-Kontrast) auf Level AA: Grafische Objekte und Bedien-Elemente, die zum Verständnis nötig sind, brauchen einen Kontrast von mindestens 3 : 1 gegenüber angrenzenden Farben.

Praktisch heißt das: Zwei benachbarte Datenreihen in einem Diagramm müssen sich um mindestens 3 : 1 unterscheiden, nicht nur „irgendwie anders aussehen". Ein heller Gelbton neben Weiß verfehlt das, egal wie unterschiedlich die Farbtöne wirken. Für reinen Text gilt strenger 4,5 : 1 (Erfolgskriterium 1.4.3). Die genaue Mess-Methode und Werkzeuge dafür findest du in der Kontrastprüfung.

Praxis-Checkliste

1. Bleibt jede Information erkennbar, wenn du die Seite in Graustufen betrachtest?
2. Sind Links im Fließtext zusätzlich unterstrichen, nicht nur eingefärbt?
3. Tragen Formular-Fehler einen Text und ein Symbol, nicht nur einen farbigen Rahmen?
4. Haben Status-Anzeigen ein Textlabel oder eine Form zusätzlich zur Farbe?
5. Sind Pflichtfelder über Text oder eine erklärte Markierung gekennzeichnet?
6. Ordnen Diagramme ihre Reihen über Beschriftung, Form oder Muster zu, nicht nur über die Legende?
7. Unterscheiden sich benachbarte grafische Flächen um mindestens 3 : 1?
8. Ist die Fehlermeldung per aria-describedby mit dem Feld verknüpft?

Mythen-Prüfung