Farbwahrnehmung
Farbwahrnehmung beschreibt, wie unterschiedlich Menschen Farben sehen. Etwa acht Prozent aller Männer und weniger als ein Prozent aller Frauen haben eine Form der Farbsehschwäche – meist eine Rot-Grün-Verwechslung.
Farbwahrnehmung ist eine zentrale Größe der visuellen Barrierefreiheit. Wer Information ausschließlich über Farbe vermittelt, schließt einen erheblichen Teil der Besucher systematisch aus – im B2B-Bereich mit hohem Männer-Anteil besonders deutlich.
In einfachen Worten
Das menschliche Auge nimmt Farben über drei Typen von Zapfen-Rezeptoren wahr: für Rot, Grün und Blau. Wenn einer dieser Rezeptoren fehlt oder eingeschränkt funktioniert, entsteht eine Farbsehschwäche. Die häufigste Form ist die Deuteranopie (Grün-Schwäche), gefolgt von der Protanopie (Rot-Schwäche). Die seltene Tritanopie betrifft die Blau-Wahrnehmung. Komplette Farbenblindheit (Achromatopsie) ist sehr selten. Wichtig für die Web-Gestaltung: Information darf niemals ausschließlich über Farbe vermittelt werden, weil ein nennenswerter Teil der Besucher diese Information sonst nicht entschlüsseln kann. Die WCAG fordern unter dem Erfolgskriterium 1.4.1 ausdrücklich, dass Farbe nicht das einzige Mittel zur Vermittlung von Information sein darf.
Wozu brauche ich das?
Pflicht-Prüfung für jede Form von Status-Anzeige, Diagramm, Formular-Validierung und Tabellen-Hervorhebung. Klassischer Stolperstein: Fehlermeldungen nur in Rot, Erfolgsmeldungen nur in Grün – beide Zustände sind für Menschen mit Rot-Grün-Schwäche praktisch nicht zu unterscheiden. Die Lösung besteht in einer doppelten Codierung: zusätzliches Symbol (Häkchen oder Kreuz), klarer Wortlaut („Erfolg" oder „Fehler"), Position oder Form über die visuelle Hierarchie. Im Mittelpunkt steht das Prinzip „Farbe als Verstärker, nicht als alleinige Information".
Beispiel aus der Praxis
Eine häufige Konstellation in Bestell-Formularen: Pflichtfelder werden bei Fehl-Eingabe rot umrahmt, ohne weiteren Hinweis. Für eine Person mit Deuteranopie ist diese rote Markierung kaum vom umgebenden Grau zu unterscheiden – die Kontrast-Ratio trägt hier nicht, die betroffene Person sieht, dass etwas nicht stimmt, aber nicht, welches Feld konkret betroffen ist. Die Korrektur besteht aus zwei Ergänzungen: ein Warn-Symbol links neben dem Eingabefeld plus ein erklärender Text unter dem Feld („Bitte E-Mail-Adresse prüfen"). Für Besucher ohne Farbsehschwäche bleibt der visuelle Eindruck praktisch identisch – für betroffene Besucher wird der Fehler eindeutig identifizierbar. Der Aufwand ist minimal, die Wirkung zeigt sich in spürbar weniger Formular-Abbrüchen und weniger Support-Anfragen.
Wirtschaftlicher Nutzen
Die Quote der Betroffenen ist epidemiologisch gut dokumentiert: rund acht Prozent aller Männer haben eine Form der Farbsehschwäche. In B2B-Zielgruppen mit hohem Männer-Anteil (Handwerk, Industrie, Technik-Branchen) erreicht die Quote der betroffenen Besucher schnell mehrere Prozent des gesamten Datenverkehrs. Wer Formular-Validierungen, Status-Diagramme oder Bewertungs-Skalen ausschließlich farblich codiert, lässt diese Gruppe systematisch im Dunkeln. Die Überarbeitung ist Standard-Handwerk: Symbol plus Text plus Farbe, statt nur Farbe. Wirtschaftlich relevant ist die Korrektur überall dort, wo Konvertierungs-Strecken (Bestellung, Anfrage, Buchung) durchlaufen werden müssen – ein unmittelbarer Usability-Gewinn.
Typische Fehler
- Fehler-Meldungen ausschließlich durch rote Umrahmung gekennzeichnet – Menschen mit Rot-Grün-Schwäche erkennen den Fehler nicht.
- Diagramme mit Rot und Grün als einziger Farb-Codierung – die Werte werden für einen Teil der Besucher unlesbar.
- Status-Anzeigen (aktiv/inaktiv) nur farblich unterschieden – ohne zusätzliches Symbol oder Beschriftung fehlt die zweite Codierungs-Ebene.
- Bewertungs-Skalen ohne Form-Unterstützung wie Sterne oder Balken – die reine Farb-Codierung reicht nicht aus.
- Heatmaps mit Rot-Grün-Verlauf statt mit linearer Helligkeits-Skala – Werte-Unterschiede werden für einen Teil der Besucher unleserlich.
Worauf achten?
- Information immer doppelt codieren: Farbe plus Symbol, Farbe plus Wortlaut, Farbe plus Form.
- Farb-Paarungen vermeiden, die unter Deuteranopie oder Protanopie schwer zu unterscheiden sind (Rot/Grün, Blau/Violett, Gelb/Hellgrün).
- Simulation einsetzen: Es gibt Browser-Erweiterungen, die Farbsehschwächen simulieren und im Design-Prozess sofort Aufschluss geben.
- Status-Bausteine mit semantischen Symbolen aufbauen (Häkchen für Erfolg, Ausrufezeichen für Warnung, Kreuz für Fehler).
- Heatmap-Farb-Schemata mit linearer Helligkeits-Skala wählen (etwa Viridis statt Rot-Grün-Verlauf) – auch für nicht betroffene Besucher besser lesbar.
Häufig gestellte Fragen
Wie viele Menschen sind von Farbsehschwäche betroffen?
Rund acht Prozent aller Männer und weniger als ein Prozent aller Frauen weltweit. In B2B-Zielgruppen mit hohem Männer-Anteil entspricht das einem nennenswerten Anteil der Besucher.
Was sind die häufigsten Formen?
Deuteranopie (Grün-Schwäche) ist die häufigste Form, gefolgt von Protanopie (Rot-Schwäche). Beide äußern sich als Rot-Grün-Verwechslung. Die Tritanopie (Blau-Schwäche) ist deutlich seltener, die komplette Farbenblindheit (Achromatopsie) sehr selten.
Wie codiert man Information doppelt?
Über mindestens zwei der drei Ebenen Farbe, Symbol und Wortlaut beziehungsweise Form. Beispiel: Ein Erfolgs-Hinweis nutzt grünen Hintergrund, ein Häkchen-Symbol und den Text „Erfolgreich gespeichert" – jede einzelne Ebene wäre für sich allein bereits ausreichend.
Welche Farb-Paarungen sind problematisch?
Rot und Grün ist die häufigste Problem-Paarung, gefolgt von Blau und Violett sowie Gelb und Hellgrün. Eine Simulation mit einer entsprechenden Browser-Erweiterung zeigt im Design-Prozess sofort, wo eine Paarung nicht trägt.
Was fordern die WCAG zu Farbe?
Das Erfolgskriterium 1.4.1 verlangt, dass Farbe nicht das einzige visuelle Mittel zur Vermittlung von Information sein darf. Zusätzlich gelten die Anforderungen an die Kontrast-Ratio (Erfolgskriterien 1.4.3 und 1.4.11) für die Lesbarkeit der gewählten Farben.