Farbe barrierefrei einsetzen: Status und Fehler erklären

Ein roter Rahmen sagt nicht jedem Menschen, welches Formularfeld falsch ist. Ein grüner Punkt erklärt auch nicht, ob ein Vorgang gespeichert oder bereits abgeschlossen wurde. Gute Oberflächen verwenden Farbe als zusätzliche Orientierung und benennen die eigentliche Information ausdrücklich. Dieser Leitfaden zeigt, wie Sie solche Stellen erkennen, überarbeiten und im Browser prüfen.

Welche Information steckt in der Farbe?

Beginnen Sie mit einer Bestandsaufnahme der Bedeutungen. Suchen Sie auf einer tatsächlichen Aufgabenseite nach Pflichtfeldern, Fehlern, Bestätigungen, Links, Diagrammreihen und Statusangaben. Schreiben Sie zu jedem farbigen Element einen vollständigen Satz: „Dieses Feld enthält eine ungültige Postleitzahl“ oder „Der Antrag wurde gespeichert“. Wenn Sie diesen Satz nur aus der Farbe erschließen können, fehlt vermutlich eine sichtbare Erklärung.

Das W3C beschreibt in WCAG 2.2, Erfolgskriterium 1.4.1 auf Stufe A, dass Farbe nicht das einzige visuelle Mittel für Information, Handlungsaufforderungen oder die Unterscheidung von Elementen sein soll. Eine sichtbare Textangabe oder eine zusätzliche Form kann die Bedeutung vermitteln. Das ist eine konkrete Anforderung an die Darstellung, noch kein Nachweis für die Barrierefreiheit einer gesamten Website.

Unterscheiden Sie dekorative Farbe von bedeutungstragender Farbe. Ein blauer Seitenhintergrund braucht keine Übersetzung. Ein blauer Termin zwischen grauen Terminen dagegen braucht eine Erklärung, wenn Blau „ausgewählt“ bedeutet. Diese Unterscheidung verhindert, dass das Team jede Gestaltung entfernt, während die wirklich problematischen Bedienelemente unverändert bleiben.

Formulare: Fehler nennen und Korrektur ermöglichen

Schreiben Sie die Fehlermeldung am betroffenen Feld so, dass der nächste Schritt klar wird. „Bitte geben Sie eine Postleitzahl mit fünf Ziffern ein“ hilft in einem Formular für deutsche Adressen mehr als „Ungültig“. Vermeiden Sie vertrauliche Angaben in Fehlermeldungen. Der Inhalt einer Meldung muss zur tatsächlich akzeptierten Eingabe passen; internationale Adressen dürfen nicht durch eine unpassende deutsche Regel abgewiesen werden.

Ein Symbol allein ist ebenfalls nicht immer selbsterklärend. Ein Ausrufezeichen kann Warnung, Fehler oder einen wichtigen Hinweis bedeuten. Kombinieren Sie das Symbol deshalb mit einer passenden Bezeichnung. Sorgen Sie außerdem dafür, dass Beschriftungen und Meldungen technisch dem Feld zugeordnet sind. Sichtbare Verständlichkeit und die Ausgabe durch Hilfstechnologien benötigen jeweils eine Prüfung; ein Screenreadertext ersetzt den sichtbaren Fehlerhinweis nicht.

Zwei Fragen für jede Statusanzeige

Prüfen Sie anschließend, ob sich die Zustände auch sprachlich unterscheiden. „Aktiv“ kann heißen, dass ein Filter gesetzt ist, dass ein Vertrag läuft oder dass ein Nutzerkonto freigeschaltet wurde. Eine genauere Bezeichnung reduziert Rückfragen. Für eine Rechnung passen etwa „Entwurf“, „Versendet“ und „Bezahlt“. Die Farben dürfen diese Wörter verstärken, aber nicht ersetzen.

Nutzen Sie eine Graustufenansicht als praktische Suchhilfe. Sie zeigt, wo Informationen verschwinden könnten. Ein unauffälliges Graustufenbild beweist allerdings keine vollständige Konformität: unterschiedliche Helligkeiten können weiterhin sichtbar sein, obwohl die konkrete Farbbedeutung unklar bleibt. Entscheidend ist die Aufgabe des Menschen auf der Seite, nicht der optische Eindruck eines Screenshots.

Diagramme und Kontrast getrennt prüfen

Beschriften Sie Reihen möglichst nahe an den Daten. Wer zwischen einer entfernten Legende und einem schmalen Diagramm hin- und herspringen muss, verliert schnell den Zusammenhang. Ergänzen Sie bei komplexen Diagrammen eine Tabelle mit denselben Werten. Die Tabelle sollte die Kategorien tatsächlich benennen und nicht nur Spalten wie „Serie 1“ enthalten. Bei einem Liniendiagramm können unterschiedliche Strichmuster die Zuordnung zusätzlich unterstützen.

Kontrast und Farbbedeutung sind zwei Prüfaufgaben. Ein kräftig roter Fehlerrahmen kann deutlich sichtbar sein und trotzdem nicht erklären, was zu korrigieren ist. Umgekehrt kann eine verständliche Fehlermeldung so hell gesetzt sein, dass sie schwer lesbar ist. Der ergänzende Leitfaden zum WCAG-Kontrast behandelt deshalb die Lesbarkeit von Text, Buttons und Fehlerzuständen gesondert.

Für die Übergabe an das Entwicklungsteam genügt eine konkrete Fehlerkarte: Seitenadresse, betroffener Zustand, bisherige Darstellung, erwartete Information und ein Vorschlag für die sichtbare Ergänzung. Fügen Sie einen Screenshot hinzu, auf dem das Element erkennbar ist. Vermerken Sie außerdem, wie sich der Zustand auslösen lässt. So kann die Korrektur später an derselben Stelle nachgeprüft werden.

Praxis: Ein Anfrageformular vor und nach der Änderung

In einem beispielhaften Anfrageformular werden fehlende Angaben nur rot umrandet. Eine Besucherin sendet das Formular ab und erkennt keine Erklärung. Das Team ergänzt nun über dem Formular eine verständliche Zusammenfassung und am betreffenden Feld die konkrete Meldung. Die Pflichtangaben werden bereits vor dem Absenden sichtbar gekennzeichnet. Beim nächsten Versuch kann die Besucherin gezielt nachbessern.

Die Abnahme umfasst mehr als den ursprünglichen Fehlerfall. Prüfen Sie auch die korrekte Eingabe, den Ladezustand und die erfolgreiche Übermittlung, jeweils am Desktop und auf dem Handy. Lesen Sie die Seite einmal ohne die Farbbezeichnungen „rot“ oder „grün“ vorzulesen. Wenn die Handlungsanweisung weiterhin verständlich bleibt, ist die wichtigste praktische Verbesserung erreicht. Automatisierte Ergebnisse aus Barriereradar können die Fehlerliste ergänzen; die Bedeutung eines selbst entworfenen Status muss das Team dennoch selbst prüfen.

Häufige Fragen

Reicht ein hoher Kontrast für barrierefreie Farben?

Nein. Kontrast betrifft die Erkennbarkeit; eine Information darf trotzdem nicht allein von einer bestimmten Farbe abhängen. Prüfen Sie beides getrennt.

Muss ich alle Farben entfernen?

Nein. Farbe darf die Orientierung unterstützen. Ergänzen Sie die Bedeutung sichtbar, etwa durch Text, eine eindeutige Form oder eine passende Beschriftung.

Ist eine Graustufenprüfung ein WCAG-Nachweis?

Nein. Sie ist eine nützliche Suchhilfe, ersetzt aber keine Prüfung der einzelnen Anforderungen und tatsächlichen Bedienzustände.

Das Wichtigste in Kürze

Dieser Beitrag ersetzt keine Rechtsberatung. Eine automatisierte Erstprüfung ersetzt nicht den vollständigen BITV-/WCAG-Test – maßgeblich sind BFSG, BFSG-Verordnung und die harmonisierte Norm EN 301 549 in ihrer aktuellen Fassung.