1.4.1 Benutzung von Farbe

Farbe darf nie das einzige Merkmal sein, das zeigt, was etwas bedeutet, was zu tun ist oder welches Element welches ist.

/ Was es verlangt

Farbe ist oft das schnellste Signal auf einer Seite: ein roter Rahmen um das fehlerhafte Feld, ein grüner Punkt neben dem Dienst, der läuft, ein blaues Wort, das sich als Link herausstellt. Das Kriterium verlangt, dass ein solches Signal nie allein steht. Wo Farbe Informationen vermittelt, eine Aktion anzeigt, zu einer Reaktion auffordert oder ein Element von einem anderen unterscheidet, muss etwas Sichtbares außer der Farbe dasselbe sagen: Text, ein Symbol, ein Muster, eine Unterstreichung, eine andere Form. Geschützt werden Menschen mit Farbsehschwäche, Menschen mit Sehbehinderung und viele ältere Menschen, die Farben schlecht unterscheiden, sowie alle, die einen einfarbigen Bildschirm oder einen mit wenigen Farben nutzen.

Die Anforderung betrifft das Sehen und nicht assistive Technologien. Eine Textalternative, die ein Screenreader vorliest, genügt nicht, denn eine sehende Person, die Rot und Grün nicht unterscheidet, hört sie nie. Zwei Farben, die sich auch in der Helligkeit unterscheiden und untereinander ein Kontrastverhältnis von mindestens 3:1 haben, gelten als zweites visuelles Merkmal, sodass ein Link, der deutlich dunkler ist als der umgebende Text, bestehen kann. Das hilft nicht, wo man einen bestimmten Farbton erkennen muss, etwa Grün für gültig und Rot für ungültig. Farbe zu verwenden ist nie selbst ein Verstoß, und das W3C hält fest, dass besuchte und unbesuchte Links, die sich nur durch die Farbe unterscheiden, nicht durchfallen, weil Autoren den besuchten Zustand nur mit Farbe gestalten können.

/ Woran Seiten scheitern

Links in einem Absatz haben ein Blau, das sich kaum vom Fließtext unterscheidet, sind nicht unterstrichen und erreichen gegenüber diesem Text weniger als 3:1.
Pflichtfelder sind nur durch eine rote Beschriftung gekennzeichnet, ohne Sternchen und ohne das Wort Pflichtfeld.
Ein Formular zeigt ein fehlerhaftes Feld nur durch einen roten Rahmen an, und daneben erscheint kein Fehlertext.
Ein Liniendiagramm trennt seine Datenreihen nur durch Farbe, mit einer Legende aus farbigen Quadraten und ohne Beschriftungen, Markierungen oder gestrichelte Linien.
Eine Statusspalte zeigt grüne, gelbe und rote Punkte ohne Wort und ohne eigenes Symbol, sodass sich der Zustand eines Servers oder einer Bestellung nur über die Farbe ablesen lässt.

/ So prüfen Sie es selbst

Listen Sie jede Stelle auf, an der Farbe etwas zu bedeuten scheint: Links im Fließtext, Pflichtfelder und fehlerhafte Felder, Diagrammreihen, Status-Badges, der gewählte Reiter oder Menüpunkt, Kartenlegenden.
Betrachten Sie die Seite ohne Farbe. Öffnen Sie in den Chrome-Entwicklerwerkzeugen das Panel Rendering, wählen Sie unter Emulate vision deficiencies die Option Achromatopsia und wiederholen Sie es mit Protanopia und Deuteranopia.
Prüfen Sie bei jedem Eintrag der Liste, ob die Bedeutung erhalten bleibt: Unterstreichung oder Symbol bei Links, Sternchen oder das Wort Pflichtfeld bei Feldern, eine Fehlermeldung in Worten, Beschriftungen oder Muster im Diagramm.
Wo sich Links im Text nur durch Helligkeit abheben, messen Sie die Linkfarbe gegen die Farbe des umgebenden Textes mit einem Kontrastprüfer. Das Verhältnis muss 3:1 erreichen, und beide Farben brauchen nach 1.4.3 weiterhin 4,5:1 gegenüber dem Hintergrund.
Senden Sie ein Formular mit Fehlern ab und prüfen Sie, ob jeder Fehler in Text benannt wird und nicht nur durch eine Farbänderung.

/ So beheben Sie es

Behalten Sie text-decoration: underline bei Links im Fließtext oder geben Sie ihnen ein anderes sichtbares Merkmal wie ein stärkeres font-weight. Fällt die Unterstreichung weg, halten Sie mindestens 3:1 zwischen Link- und Textfarbe.
Kennzeichnen Sie Pflichtfelder mit einem Sternchen oder dem Wort Pflichtfeld in der Beschriftung selbst, erklären Sie das Sternchen am Anfang des Formulars und setzen Sie am Feld das Attribut required.
Zeigen Sie jeden Validierungsfehler als Text neben seinem Feld, auf Wunsch mit Symbol, und verbinden Sie die Meldung über aria-describedby mit dem Eingabefeld.
Beschriften Sie in Diagrammen die Linien direkt, geben Sie jeder Reihe eine eigene Markierungsform oder ein Linienmuster (stroke-dasharray in SVG) und stellen Sie die Werte in einer Tabelle bereit.
Setzen Sie in jedes Status-Badge neben den farbigen Punkt ein Wort wie Läuft, Eingeschränkt oder Ausgefallen, und markieren Sie den aktuellen Navigationspunkt mit aria-current="page" und einer sichtbaren Unterstreichung oder Leiste.

/ Was unser Scanner prüft

In unserem Scan meldet nichts unter 1.4.1. Das Kriterium fragt, ob Farbe das einzige Merkmal ist, also danach, was ein Mensch sieht, und keine unserer Regeln vergleicht einen Link, einen Feldzustand oder eine Diagrammreihe mit ihren Nachbarn, um ein zweites visuelles Signal zu suchen. HTML_CodeSniffer gibt zu 1.4.1 nur einen Hinweis aus, und der Scan behält ausschließlich Fehler. Eine manuelle Prüfung kontrolliert das Kriterium an der Seite in Graustufen.

/ Wer es verletzt, nach unseren eigenen Messungen

Der wöchentliche Index hat für dieses Kriterium keine Zahlen, weil keine Prüfung des Website-Scans es testen kann. Ein Mensch beurteilt es, und genau dafür gibt es ein manuelles Audit.

Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.

/ Fragen zu diesem Kriterium

Müssen Links unterstrichen sein, um WCAG 1.4.1 zu erfüllen?

Nein, aber ein Link im Fließtext braucht ein Merkmal außer seinem Farbton. Die Unterstreichung ist das einfachste. Ohne sie muss sich die Linkfarbe vom umgebenden Text um ein Kontrastverhältnis von mindestens 3:1 unterscheiden, was als Unterschied in der Helligkeit gilt und nicht allein in der Farbe. Das W3C merkt außerdem an, dass ein Link, der genau wie der umgebende Text aussieht, 1.4.1 nicht verletzt, weil keine Farbe ihn kennzeichnet, auch wenn ihn dann niemand gut findet.

Gilt 1.4.1 auch für Diagramme, Karten und Bilder?

Ja. Das Kriterium umfasst jedes visuelle Mittel, Informationen zu vermitteln, also verstößt ein Diagramm, eine Karte oder eine Grafik dagegen, deren Bedeutung allein auf Farbe beruht. Direkte Beschriftungen, Markierungen, Muster oder Zahlen neben den Farben lösen das. Auch die Textalternative muss dieselbe Information tragen: Das W3C führt eine Beschreibung, die weglässt, was die Farben bedeuteten, als Verstoß gegen 1.1.1 und 1.4.1.

Ist Benutzung von Farbe dasselbe wie Farbkontrast?

Nein. 1.4.1 gehört zu Stufe A und verlangt nur, dass Farbe nie das einzige Merkmal ist. Kontrast wird unter 1.4.3 für Text gemessen, mit 4,5:1 für normalen Text, und unter 1.4.11 für Bedienelemente und Grafiken, mit 3:1, beide auf Stufe AA. Eine Seite kann jede Kontrastprüfung bestehen und trotzdem gegen 1.4.1 verstoßen, etwa mit dunkelroten und dunkelgrünen Statuspunkten, die sich beide gut von Weiß abheben.

Eigene Seite messen Alle gemessenen Barrieren