Wenn Farbe die einzige Auskunft ist

Rot heißt belegt, grün heißt frei. Das rote Feld ist der Fehler. Die blaue Linie im Diagramm ist der Umsatz, die orange sind die Kosten.

Das funktioniert. Es ist übersichtlich, es ist schnell zu erfassen, und es sieht gut aus.

Es funktioniert nur nicht für alle. Und der Punkt ist nicht, dass man deshalb auf Farbe verzichten müsste — sondern dass Farbe die einzige Auskunft sein darf oder nicht.

Der Unterschied in einem Satz

Farbe darf nicht das einzige Mittel sein, mit dem eine Information vermittelt, eine Handlung angezeigt, eine Reaktion eingefordert oder ein bedeutungstragendes Element von einem anderen unterschieden wird.

Das ist die Regel, und sie sagt ausdrücklich nicht, dass Farbkodierung verboten wäre. Sie sagt, dass neben der Farbe noch etwas anderes stehen muss.

Rot und ein Kreuz. Grün und ein Haken. Die blaue Linie und eine Beschriftung an ihrem Ende.

Das Wort für den falschen Zustand ist farbabhängig: Der Betrachter ist auf die Farbe angewiesen, um zu verstehen. Das Ziel ist farbunabhängig — und dabei durchaus farbig.

Und es geht nur um Elemente, die etwas bedeuten. Ein farbiger Hintergrund, der nur schön ist, ist nicht gemeint.

Für wen das zählt

Nicht nur für Menschen, die keine Farben sehen. Der Kreis ist deutlich größer, als die meisten annehmen.

Menschen, die bestimmte Farben nicht unterscheiden können. Die häufigste Form betrifft Rot und Grün — also ausgerechnet das Paar, mit dem am liebsten gearbeitet wird.

Menschen mit eingeschränkter Sehkraft, bei denen Farben verwaschen ankommen.

Alle bei ungünstigem Licht. Ein Handydisplay in der Sonne zeigt sehr blasse Farben.

Alle mit schlecht eingestelltem Bildschirm — und das sind mehr, als man denkt.

Und alle, die etwas ausdrucken. Ein Diagramm, dessen Linien sich nur durch Farbe unterscheiden, ist in Schwarzweiß unlesbar.

Die letzten drei Gruppen sind keine Randgruppen. Es ist jeder, gelegentlich.

Ein Beispiel, an dem es klickt

Ein Saalplan für Veranstaltungstickets, bei dem verschiedene Preiskategorien durch verschiedene Farben markiert sind. Eine Legende daneben ordnet Farbe zu Kategorie zu.

Wer die Farben nicht unterscheiden kann, kann nicht erkennen, welcher Platz zu welcher Kategorie gehört. Die Information ist vorhanden, sie ist sogar sorgfältig aufbereitet — und sie kommt nicht an.

Das Beispiel stammt aus einer Quelle, die es auf einer echten Ticketseite gefunden hat, und es ist deshalb so lehrreich, weil dort niemand geschludert hat. Die Seite ist gestalterisch in Ordnung. Sie hat nur eine einzige Sache übersehen.

Der Nachtest dazu — Reinzoomen, um Tischnummern zu lesen — scheiterte übrigens auch: Die Grafik war nicht anklickbar und beim Vergrößern unscharf. Zwei Fehler, die zusammen dafür sorgen, dass es keinen Ausweichweg gibt.

Die Stellen, an denen es fast immer passiert

Formularfehler. Das Feld bekommt einen roten Rahmen, und das ist die ganze Rückmeldung. Wer den Rahmen nicht sieht, sucht. Wer sich die Seite vorlesen lässt, erfährt gar nichts — ein Rahmen wird nicht vorgelesen.

Der Fehler muss als Text dastehen, in der Nähe des Feldes, und er muss technisch mit dem Feld verbunden sein. Der rote Rahmen darf gerne dazukommen.

Pflichtfelder. Werden gern durch eine Farbe oder ein Sternchen ohne Erklärung markiert. Ein Sternchen ist besser als Farbe allein und trotzdem nur dann eine Auskunft, wenn irgendwo steht, was es bedeutet.

Verfügbarkeitsanzeigen. Grüner Punkt, roter Punkt. Ohne Wort daneben ist es geraten.

Diagramme. Der klassische Fall. Legende links, Farben rechts, und die Zuordnung geht nur über die Farbe. Die Lösung ist einfach: die Linien direkt beschriften, unterschiedliche Strichstärken oder Muster verwenden, Punkte in verschiedenen Formen setzen.

Links im Fließtext. Der Fall, an den fast niemand denkt. Wenn ein Link sich vom umgebenden Text nur durch seine Farbe unterscheidet, ist er für einen Teil der Leser kein Link. Die Unterstreichung, die viele aus gestalterischen Gründen entfernen, ist genau die zweite Auskunft.

Zustände von Schaltflächen. Eine ausgegraute Schaltfläche, die nicht anklickbar ist. Woran erkennt man das, wenn man den Unterschied zwischen dem Grau und dem Normalzustand nicht sieht?

Wie du deine eigene Seite prüfst

Zwei Wege, beide kosten Minuten.

Der Graustufen-Test. Mach von der Seite einen Bildschirmabzug und wandle ihn in Schwarzweiß um — das kann jedes Bildbearbeitungsprogramm und jedes Telefon. Dann sieh dir das Ergebnis an und frag bei jeder farbigen Stelle: Weiß ich noch, was das bedeutet?

Das ist der härteste Test und der aussagekräftigste. Wer ihn besteht, ist auf der sicheren Seite.

Die Simulation im Browser. Die Entwicklerwerkzeuge moderner Browser können Sehschwächen nachstellen. Man öffnet sie mit F12, sucht die Darstellungsoptionen und wählt eine Sehschwäche aus. Die Seite wird dann so gezeigt, wie sie bei dieser Wahrnehmung ankommt.

Das ist eindrucksvoller als jede Erklärung, weil man es selbst sieht.

Und der Test ohne Werkzeug: Beschreib jemandem am Telefon, was auf deiner Seite steht — ohne Farbwörter zu benutzen. Wo du ins Stocken gerätst, ist eine Fundstelle.

Was zu tun ist

Es gibt kein Projekt daraus zu machen. Es ist eine Durchsicht mit einer einzigen Frage.

Geh die Stellen durch, an denen deine Seite etwas mitteilt — Formularfehler, Statusanzeigen, Diagramme, Links im Text, Zustände von Schaltflächen.

Frag bei jeder: Was steht hier außer der Farbe?

Wenn nichts: eine zweite Auskunft dazu. Ein Wort, ein Symbol, eine Unterstreichung, ein Muster, eine Beschriftung.

Die Farbe bleibt. Sie bekommt nur Gesellschaft.

Warum das hier steht

Von allen Punkten, die eine Website zugänglicher machen, ist das einer der billigsten. Es verlangt keinen Umbau, keine zusätzliche Technik und kein Fachwissen. Es verlangt, dass jemand einmal hinschaut.

Es fällt trotzdem aus, weil es in der Gestaltung gut aussieht. Farbkodierung ist elegant. Ein Wort danebenzuschreiben wirkt wie ein Rückschritt.

Ist es nicht. Es ist der Unterschied zwischen einer Auskunft und einer Vermutung.

Quellen

• Udemy, How To Design for Accessibility: for UX Designers (WCAG 2.2), Abschnitt 4 — die Definition, dass Farbe nicht als einziges visuelles Mittel verwendet werden darf, um eine Information zu vermitteln, eine Handlung anzuzeigen, eine Reaktion einzufordern oder ein bedeutungstragendes Element zu unterscheiden; dass die Anforderung Farbkodierung ausdrücklich nicht verbietet, sondern nur verlangt, dass Farbe nicht das alleinige Mittel ist; die Unterscheidung zwischen farbabhängig und farbunabhängig, wobei farbunabhängig durchaus farbig sein darf; die Einschränkung auf bedeutungstragende gegenüber rein schmückenden Elementen; die genannten Beispiele Rot für offline und Grün für online sowie ein Liniendiagramm, dessen Zuordnung zur Legende nur über die Farbe läuft; und das ausführlich beschriebene Beispiel eines Saalplans auf einer Ticketseite, bei dem Sitzplatzkategorien allein farblich unterschieden werden, samt der Beobachtung, dass die Grafik weder anklickbar noch beim Vergrößern lesbar war.
• Atlas, accessibility/criteria/3-3-1-error-identification.md — dass ein erkannter Eingabefehler benannt und in Text beschrieben werden muss; dass Menschen, die sich die Seite vorlesen lassen, weder rote Rahmen noch Fehlersymbole wahrnehmen können und Fehler deshalb in Textform mitgeteilt werden müssen; und dass die Fehlermeldung neben dem betroffenen Feld steht und technisch mit ihm verbunden wird.
• Eigene Praxis — die Erweiterung des betroffenen Personenkreises um ungünstige Lichtverhältnisse, schlecht eingestellte Bildschirme und Ausdrucke; die Aufzählung der Stellen, an denen der Fehler in der Praxis am häufigsten auftritt, insbesondere Links im Fließtext ohne Unterstreichung und ausgegraute Schaltflächen; der Graustufen-Test als härteste Prüfung; die Simulation von Sehschwächen in den Entwicklerwerkzeugen; und der Test, die Seite ohne Farbwörter zu beschreiben.
• Lücke in der eigenen Wissensgrundlage — zu diesem Kriterium liegt bislang kein eigener Atlas-Eintrag vor, obwohl die benachbarten Kriterien dokumentiert sind. Der Artikel stützt sich deshalb auf den Kurs und auf das benachbarte Kriterium zur Fehlerkennzeichnung. Der fehlende Eintrag ist vermerkt.