Ein roter Rahmen bedeutet Fehler. Ein grüner Punkt bedeutet „aktiv“. Blauer Text ist ein Link. Auf den ersten Blick scheint alles klar zu sein – vorausgesetzt, der Nutzer erkennt diese Unterschiede genauso wie der Designer. WCAG verbietet die Verwendung von Farbe nicht. Die Richtlinien verlangen lediglich, dass Farbe nicht der einzige Träger wichtiger Informationen ist.

Die Regel ist einfacher, als sie klingt

Das WCAG-2.2-Erfolgskriterium 1.4.1 „Use of Color“ besagt, dass Farbe nicht als einziges visuelles Mittel verwendet werden darf, um Informationen zu vermitteln, eine Aktion anzuzeigen, eine Reaktion auszulösen oder ein Element zu unterscheiden. W3C nennt sehr vertraute Beispiele: Pflichtfelder, die nur rot markiert sind, Fehler, die ausschließlich in Rot angezeigt werden, oder Datenreihen, die nur durch Farben unterschieden werden.

Die Korrektur erfordert normalerweise kein neues Design. Meist reicht ein zweites Signal: Text, ein Icon, eine Form, ein Muster, eine Unterstreichung oder ein anderes deutliches visuelles Merkmal. Die Farbe kann bleiben. Sie ist nur nicht mehr die einzige Bedienungsanleitung.

WebsiteGarage / Leistungen

Entdecke unsere Leistungen.

Formulare: Ein roter Rahmen sagt nicht, was passiert ist

Das ist einer der praktischsten Tests. Sende ein Formular mit einem leeren Pflichtfeld oder einer falschen E-Mail-Adresse ab. Wenn sich nur der Rahmen des Feldes rot färbt, hängt die Information vollständig von der Farbwahrnehmung ab. Ein besseres Muster kombiniert Farbe mit einer Textmeldung wie „Bitte gib eine gültige E-Mail-Adresse ein“ und verknüpft den Fehler korrekt mit dem jeweiligen Feld.

Dasselbe gilt für Pflichtfelder. Nur die Beschriftung rot einzufärben reicht nicht. Ein Sternchen mit Erklärung, das Wort „Pflichtfeld“ oder ein anderer verständlicher Hinweis vermittelt die Information unabhängig davon, wie ein Nutzer Farben wahrnimmt.

Statusanzeigen: Ein grüner und ein roter Punkt sind zu wenig

Kundenportale, Buchungssysteme, Lagerverwaltungen und Dashboards lieben Statuspunkte. Grün bedeutet „OK“, Rot „Problem“, Gelb „Achtung“. Ein solches System lässt sich visuell schnell erfassen, sollte aber nicht bei der Farbe enden. Zusätzlicher Text wie „aktiv“, „Fehler“, „wartet“ oder ein passendes Icon sorgt dafür, dass der Status auch ohne Farberkennung verständlich bleibt.

Diagramme: Eine Legende in fünf Farben reicht nicht

Bei Diagrammen entsteht das Problem besonders leicht, weil mehrere Datenreihen häufig nur durch unterschiedliche Farbtöne getrennt werden. Eine Lösung kann darin bestehen, Linien direkt zu beschriften, verschiedene Muster oder Marker einzusetzen oder eine andere Codierung zu verwenden, die nicht zusammen mit der Farbe verschwindet. Das Diagramm darf weiterhin farbig sein. Es muss nur auch dann verständlich bleiben, wenn die Farben nicht die gesamte Arbeit übernehmen.

Wenn sich ein Link innerhalb eines Absatzes vom normalen Text nur durch seine Farbe unterscheidet, muss geprüft werden, ob die konkrete Lösung die WCAG-Anforderungen tatsächlich erfüllt. Die einfachste und robusteste Methode bleibt eine klassische Unterstreichung oder ein anderes sichtbares Signal, das nicht allein vom Farbton abhängt.

Das ist kein Krieg gegen Farbe

W3C weist ausdrücklich darauf hin, dass Farbe ein wichtiges Designwerkzeug ist und Usability sowie Barrierefreiheit verbessern kann. Das Problem beginnt erst dann, wenn mit der Farbe auch die Bedeutung verschwindet. Ein gut gestaltetes Interface darf Grün, Rot, Limette und Magenta nach Belieben einsetzen, solange Nutzer nicht eine bestimmte Farbe erkennen müssen, um zu verstehen, was sie tun sollen.

Ein schneller Test ohne vollständiges Audit

  • versuche jedes Formular mit einem Fehler abzusenden und prüfe, ob die Fehlermeldung auch unabhängig von der Farbe existiert,
  • prüfe Statusanzeigen, Badges und Warnungen – enthalten sie Text, ein Symbol oder ein anderes zweites Signal,
  • prüfe Diagramme und Legenden – lassen sich Datenreihen unterscheiden, ohne die Farbe erraten zu müssen,
  • prüfe Links im Fließtext – sind sie auch für Personen sichtbar, die Unterschiede zwischen Farbtönen nicht erkennen.

Die Graustufenansicht kann als grober Orientierungstest nützlich sein: Sie zeigt schnell Stellen, an denen das Design fast vollständig auf Farbe beruht. Sie simuliert jedoch nicht alle Arten von Farbsehschwächen und ersetzt keinen WCAG-Test.

Kommentar von WebsiteGarage

Das ist eines dieser Barrierefreiheitsprobleme, die „spezialisiert“ wirken, bis man sie in einem ganz normalen Kontaktformular sieht. Dann stellt sich heraus, dass die Korrektur oft aus einem Satz neben dem roten Rahmen oder einem zusätzlichen Icon beim Status besteht.

Genau deshalb lohnt sich die Prüfung. Nicht jeder WCAG-Fehler erfordert ein großes Projekt, einen Frontend-Umbau und eine Woche voller Meetings. Manchmal reicht es, nicht mehr zu erwarten, dass Farbe gleichzeitig Dekoration, Nachricht, Anleitung und Alarmsystem ist.