Farbenblindheit und Farbschwäche: Was sie bedeuten und wie barrierefreies Webdesign hilft

Was ist Farbenblindheit?

Wir sehen Farben dank drei Arten von Zapfen in der Netzhaut. Jede Art reagiert auf einen anderen Bereich des Lichts: Rot, Grün oder Blau. Funktioniert eine Zapfenart schlechter oder gar nicht, nehmen Menschen bestimmte Farben anders wahr.

Genau genommen gibt es zwei Formen:

• Farbschwäche (Farbsehschwäche): Betroffene sehen alle Farben, nehmen einige aber schwächer wahr. Rot und Grün wirken zum Beispiel sehr ähnlich.

• Farbenblindheit: Betroffene können eine oder mehrere Farben gar nicht wahrnehmen. Bei vollständiger Farbenblindheit, der Achromatopsie, sehen sie nur Grautöne.

Im Alltag wird „Farbenblindheit“ oft für beides verwendet. Die meisten Betroffenen haben eine Farbschwäche, keine vollständige Farbenblindheit.

Die häufigsten Formen

• Rot-Grün-Schwäche: die mit Abstand häufigste Form. Rot und Grün lassen sich schwer unterscheiden. Je nachdem, welche Zapfen betroffen sind, spricht man von Protanomalie oder Protanopie (Rot) und Deuteranomalie oder Deuteranopie (Grün).

• Blau-Gelb-Schwäche (Tritanomalie oder Tritanopie): selten. Blau und Grün sowie Gelb und Rosa sind schwer zu unterscheiden.

• Vollständige Farbenblindheit (Achromatopsie): sehr selten. Betroffene sehen nur hell und dunkel und sind oft sehr blendempfindlich.

^{Abbildung 1: Simulation verschiedener Farbschwächen. Original (oben links), Rotblindheit (oben rechts), Grünblindheit (unten links) und Blaublindheit (unten rechts)}

Wie viele Menschen sind betroffen?

Laut dem Gesundheitsportal des Bundesministeriums für Gesundheit, gesund.bund.de, haben etwa 8 % der Männer und 0,4 % der Frauen eine Farbsinnstörung. In einem Team aus 25 Männern sind also statistisch zwei betroffen. Vollständige Farbenblindheit ist dagegen sehr selten: In Deutschland leben nur etwa 2.700 Menschen damit.

Männer sind deutlich häufiger betroffen, weil die Gene für die Rot- und Grün-Zapfen auf dem X-Chromosom liegen. Männer haben nur ein X-Chromosom, eine Veränderung wirkt sich deshalb direkt aus. Frauen haben zwei und sind meist Überträgerinnen ohne Symptome.

Das Farbensehen kann sich außerdem im Laufe des Lebens verändern, etwa durch Augenerkrankungen. Und viele Menschen sehen Farben in bestimmten Situationen schlechter, zum Beispiel bei Sonnenlicht auf dem Smartphone.

Welche Elemente auf Websites Probleme machen

Farbenblindheit wird zur Barriere, wenn Farbe der einzige Weg ist, eine Information zu vermitteln. Typische Beispiele:

• Links im Fließtext: Sind Links nur farbig markiert und nicht unterstrichen, erkennen viele Menschen sie nicht.

• Fehler- und Erfolgsmeldungen: Ein roter Rahmen um ein Formularfeld oder ein grüner Haken allein reichen nicht.

• Diagramme und Karten: Linien, Balken oder Flächen, die sich nur in der Farbe unterscheiden, lassen sich nicht auseinanderhalten.

• Statusanzeigen: Ampelfarben, etwa für Verfügbarkeit oder Lieferstatus, werden unklar.

• Buttons und Auswahlen: Wird der aktive Zustand nur durch einen Farbwechsel angezeigt, wissen Nutzende nicht, was ausgewählt ist.

• Zu geringer Kontrast: Hellgrauer Text auf weißem Hintergrund oder Text auf Bildern ist schwer lesbar – nicht nur für Menschen mit Farbschwäche.

• Placeholder in Formularen: Hellgrauer Platzhaltertext lässt sich oft kaum von bereits eingegebenem Text unterscheiden.

Wie ein Diagramm für Menschen mit Grünblindheit aussehen kann, zeigt Abbildung 2:

^{Abbildung 2: Links das unveränderte Diagramm, rechts mit simulierter Grünblindheit}

Das Problem ist weit verbreitet. Laut WebAIM Million 2026 hatten 83,9 % der Startseiten der eine Million meistbesuchten Websites Text mit zu geringem Kontrast.

Was die WCAG verlangen

Die Web Content Accessibility Guidelines (WCAG) enthalten drei Erfolgskriterien, die für Farben besonders wichtig sind:

• 1.4.1 Benutzung von Farbe (Stufe A): Farbe darf nicht das einzige visuelle Mittel sein, um Informationen zu vermitteln, eine Aktion anzuzeigen oder ein Element zu unterscheiden.

• 1.4.3 Kontrast (Minimum) (Stufe AA): Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text mindestens 3:1.

• 1.4.11 Nicht-Text-Kontrast (Stufe AA): Buttons, Rahmen von Formularfeldern, Fokusanzeigen und wichtige Grafiken brauchen mindestens 3:1.

Diese Kriterien sind Teil der europäischen Norm EN 301 549, auf die sich auch das Barrierefreiheitsstärkungsgesetz (BFSG) stützt.

Tipps für farbbarrierefreies Webdesign

1. Nie nur Farbe verwenden: Kombiniere Farbe mit Text, Symbolen, Mustern oder Unterstreichung. Eine Fehlermeldung braucht einen klaren Text, nicht nur einen roten Rahmen.

2. Links unterstreichen: Links im Fließtext sollten unterstrichen oder auf andere Weise sichtbar markiert sein.

3. Kontraste prüfen: Prüfe mit einem Kontrastprüfer, ob Text und wichtige Elemente die WCAG-Werte erreichen.

4. Diagramme direkt beschriften: Schreib Beschriftungen direkt an Linien und Balken, statt nur eine farbige Legende zu nutzen. Auch Muster oder unterschiedliche Linienarten helfen.

5. Kritische Farbkombinationen vermeiden: Rot und Grün, Grün und Braun sowie Blau und Lila sind für viele Menschen schwer zu unterscheiden.

6. Mit einer Simulation testen: Viele Designtools und die Entwicklertools der Browser können verschiedene Farbsehschwächen simulieren. So siehst du schnell, wo Informationen verloren gehen.

7. Über Farbenblindheit hinausdenken: Gute Kontraste und klare Signale helfen auch älteren Menschen, Menschen mit Sehbehinderung und allen, die ihr Smartphone draußen nutzen.

Weitere praktische Tipps findest du in unserem Leitfaden zu barrierefreien Formularen.

Wie Eye-Able hilft

Barrierefreies Design ist die Grundlage. Zusätzlich können Besuchende mit Eye-Able Assist eine Website an ihre eigenen Bedürfnisse anpassen. Ein eigener Modus passt die Farben für Menschen mit Farbenblindheit oder Farbschwäche an, und der Kontrastmodus macht Text leichter lesbar. Die folgende Abbildung zeigt, welchen Nutzen diese Funktion hat:

^{Abbildung 3: Darstellung der Farbkorrektur anhand von Ishihara-Testbildern (Quelle: Wellcome Collection, CC BY 4.0)}

Wie in Abbildung 3 zu sehen ist, macht der Farbmodus Farbunterschiede für Betroffene wieder besser erkennbar. Neben den jeweiligen Farbschwäche-Modi kann auch eine Erhöhung von Kontrast oder Farbsättigung helfen. Ein weiteres Beispiel, wie der Farbmodus von Eye-Able Assist Farbunterschiede wieder sichtbar macht, zeigt die folgende Ampel:

^{Abbildung 4: Ampel mit normalen Farben (links), Ampel für Menschen mit Rotschwäche (Mitte) und mit dem Farbmodus von Eye-Able Assist (rechts)}
Assist ersetzt barrierefreies Design aber nicht. Ob eine Website die Kontrastanforderungen der WCAG erfüllt, hängt von Gestaltung und Umsetzung ab. Mit Eye-Able Audit & Report kannst du deine Website auf Kontrastfehler und andere Barrieren prüfen und sie an der Quelle beheben.

Fazit

Etwa jeder zwölfte Mann hat eine Farbsehschwäche. Informationen, die nur über Farbe vermittelt werden, gehen für ihn verloren. Die Lösung ist einfach: nie nur Farbe verwenden, auf ausreichende Kontraste achten und das Design mit einer Simulation testen. So werden Websites für alle leichter nutzbar.

Wie barrierefrei ist deine eigene Website? Unser kostenloser Barrierefreiheitscheck gibt dir in weniger als 2 Minuten einen ersten Überblick.

FAQ: Farbenblindheit im Web

Wie häufig ist Farbenblindheit?

Etwa 8 % der Männer und 0,4 % der Frauen haben eine Farbsehschwäche. Die häufigste Form ist die Rot-Grün-Schwäche. Vollständige Farbenblindheit, bei der Betroffene nur Grautöne sehen, ist sehr selten.

Was ist der Unterschied zwischen Farbenblindheit und Farbschwäche?

Menschen mit Farbschwäche sehen alle Farben, nehmen einige aber schwächer wahr. Menschen mit Farbenblindheit können eine oder mehrere Farben gar nicht wahrnehmen. Im Alltag wird „Farbenblindheit“ oft für beides verwendet.

Welche Farben sollte ich für farbenblinde Menschen vermeiden?

Vermeide Kombinationen aus Rot und Grün, Grün und Braun sowie Blau und Lila, wenn sie einen Unterschied anzeigen sollen. Am wichtigsten: Nutze Farbe nie als einziges Signal, sondern ergänze immer Text, Symbole oder Muster.

Was sagen die WCAG zu Farben?

Das WCAG-Erfolgskriterium 1.4.1 besagt, dass Farbe nicht das einzige Mittel sein darf, um Informationen zu vermitteln. Außerdem braucht Text ein Kontrastverhältnis von mindestens 4,5:1 (1.4.3), Buttons, Formularfelder und wichtige Grafiken mindestens 3:1 (1.4.11).

Wie teste ich meine Website auf Farbenblindheit?

Nutze die Simulation für Farbsehschwächen in deinem Designtool oder in den Entwicklertools deines Browsers, um deine Website so zu sehen, wie Menschen mit verschiedenen Formen der Farbenblindheit sie sehen. Ein Kontrastprüfer oder ein automatischer Barrierefreiheitscheck zeigt Kontrastfehler.