Gestalten für Farbenblindheit: der vollständige Leitfaden

Weltweit haben etwa 300 Millionen Menschen eine Form der Farbsehschwäche (CVD). Wenn Ihre Website, Ihre App oder Ihre Datenvisualisierung Informationen allein über Farbe transportiert, wird ein erheblicher Teil Ihres Publikums Schwierigkeiten haben.

Die gute Nachricht: Gestaltung mit Blick auf Farbenblindheit nützt allen. Barrierefreie Farbentscheidungen verbessern Klarheit, Lesbarkeit und Bedienbarkeit für sämtliche Nutzenden – ob mit oder ohne Farbsehschwäche.

Warum barrierefreie Farbgestaltung zählt

Farbsehschwächen betreffen etwa 8 % der Männer und 0,5 % der Frauen. Praktisch bedeutet das:

In einem Team aus 20 Männern haben etwa 1 bis 2 eine Farbsehschwäche
In einem Publikum von einer Million Menschen haben rund 80 000 Männer eine Form der Rot-Grün-Schwäche
Die Rot-Grün-Verwechslung ist mit rund 98 % der CVD-Fälle die häufigste Form

Gestaltung für Farbenblindheit wird zudem zunehmend zur rechtlichen Anforderung. Die Web Content Accessibility Guidelines (WCAG) 2.1 verlangen ausdrücklich, dass Informationen, die über Farbe vermittelt werden, auch auf anderem Weg verfügbar sind.

Die goldene Regel: niemals allein auf Farbe setzen

Das wichtigste Prinzip CVD-freundlicher Gestaltung ist einfach:

Verwenden Sie Farbe niemals als einziges Mittel, um Information zu vermitteln.

Ergänzen Sie Farbe immer um mindestens einen weiteren visuellen Hinweis:

Textbeschriftungen – benennen Sie Kategorie oder Status ausdrücklich
Symbole oder Icons – nutzen Sie farbunabhängige Formen
Muster oder Texturen – besonders hilfreich in Diagrammen und Karten
Position – nutzen Sie die räumliche Anordnung, um Hierarchie zu zeigen
Form – verwenden Sie unterschiedliche Formen für unterschiedliche Datenkategorien

Problematische Farbkombinationen vermeiden

Bestimmte Farbpaare sind für Menschen mit Rot-Grün-Schwäche besonders schwer zu trennen:

Riskante Kombinationen, die Sie meiden sollten

Vermeiden	Warum	Alternative
Rot auf Grün	Für Deuteranope vollständig unsichtbar	Blau auf Orange
Grün auf Rot	Dasselbe Problem	Gelb auf Blau
Rote und grüne Schaltflächen	Bestanden/nicht bestanden nicht unterscheidbar	Symbole (✓/✗) und Text ergänzen
Roter und schwarzer Text	Rot kann dunkelgrau wirken	Fettschrift oder Unterstreichung zur Betonung
Rosa und Grau	Für Protanope identisch	Blau und Grau

Sicherere Kombinationen

Für Menschen mit Rot-Grün-Schwäche ist Blau und Orange das verlässlichste barrierefreie Farbpaar – diese Töne bleiben bei praktisch allen CVD-Formen unterscheidbar.

Weitere sichere Paare:

Blau + Gelb (hervorragend für Rot-Grün- und Blau-Gelb-Schwächen)
Blau + Weiß
Schwarz + Gelb (maximaler Kontrast)
Violett + Gelb

Barrierefreie Diagramme gestalten

In der Datenvisualisierung wirkt sich Farbenblindheit am stärksten aus. Häufige Fehler:

Rot/Grün für positive und negative Werte
Heatmaps mit Rot-Gelb-Grün-Verlauf
Mehrere Datenreihen allein über Farbe unterscheiden

Lösungen für Diagramme

1. Musterfüllungen zusätzlich zur Farbe Schraffuren, Punkte oder Kreuzschraffuren halten Flächen unterscheidbar, selbst wenn die Farben ähnlich wirken.

2. Daten direkt beschriften Beschriften Sie Datenreihen direkt im Diagramm, statt sich auf eine Farblegende zu verlassen. Das hilft allen, nicht nur farbenblinden Menschen.

3. Eine CVD-taugliche Palette verwenden Empfohlene barrierefreie Paletten:

Okabe-Ito-Palette: eigens für CVD-Barrierefreiheit in wissenschaftlichen Abbildungen entwickelt
ColorBrewer-Paletten: forschungsbasierte Paletten für Karten und Diagramme
Prüfen Sie mit unserem Farbenblindheits-Simulator, ob Ihre Diagramme unter CVD-Simulation unterscheidbar bleiben

4. Alternative Datenformate anbieten Stellen Sie neben jedem Diagramm eine Tabellenansicht oder einen Datendownload bereit, damit auch Menschen mit Schwierigkeiten bei der visuellen Darstellung an die Information kommen.

Formulare und Oberflächenzustände

Formulare sind für CVD-Nutzende besonders heikel, weil Statusanzeigen häufig auf Farbe beruhen:

Typische Probleme

Roter Rahmen bei ungültigen, grüner Rahmen bei gültigen Feldern
„Status: aktiv“ nur in grüner Schrift
Fehlermeldungen nur in Rot

Barrierefreie Alternativen

Validierungszustände:

❌ Nicht so: roter Rahmen = Fehler, grüner Rahmen = Erfolg
✅ Besser:   Fehlersymbol (⚠) + roter Rahmen + erklärender Fehlertext
             Erfolgssymbol (✓) + grüner Rahmen + Text „Sieht gut aus!“

Statusanzeigen:

❌ Nicht so: • (grüner Punkt) = Online, • (roter Punkt) = Offline
✅ Besser:   ✓ Online, ✗ Offline (oder klar unterschiedliche Formen: ●/○)

Schaltflächen und Handlungsaufforderungen:

❌ Nicht so: grünes „Bestätigen“ / rotes „Abbrechen“ – für Protanope identisch
✅ Besser:   Schaltflächen klar beschriften + ausreichenden Kontrast sichern + Symbole ergänzen

Anforderungen an den Farbkontrast (WCAG)

Über die Farbwahl hinaus ist ein ausreichendes Kontrastverhältnis entscheidend für die Lesbarkeit. Prüfen Sie Ihre Kombinationen mit unserem Kontrast-Prüfer.

Anforderung	Mindestverhältnis	Kontext
WCAG AA	4,5:1	Normaler Text (unter 18 pt)
WCAG AA	3,0:1	Großer Text (ab 18 pt oder 14 pt fett)
WCAG AAA	7,0:1	Erhöht – normaler Text
WCAG AAA	4,5:1	Erhöht – großer Text

Wichtig: Diese Werte werden zwischen der Leuchtdichte von Text und Hintergrund gemessen und müssen für alle Nutzendengruppen erfüllt sein – auch unter CVD-Simulation.

Entwürfe testen

Prüfen Sie Ihre Entwürfe stets auf mehreren Wegen:

1. Einen CVD-Simulator nutzen

Laden Sie Screenshots in den ColorVision-Simulator, um zu sehen, wie Ihre Entwürfe bei jeder CVD-Form wirken. Testen Sie alle vier: Protanopie, Deuteranopie, Tritanopie und Achromatopsie.

2. Browser-Entwicklerwerkzeuge nutzen

Chrome und Firefox bringen eine CVD-Simulation mit:

Chrome: DevTools → Rendering → Emulate vision deficiencies
Firefox: DevTools → Accessibility → Simulate

3. Kontrastverhältnisse prüfen

Schicken Sie jede Text-Hintergrund-Kombination durch einen Kontrast-Prüfer, der auch eine CVD-Simulation zeigt.

4. Echtes Feedback einholen

Testen Sie wenn möglich mit tatsächlich farbenblinden Personen. Sie entdecken häufig Probleme, die Simulationen übersehen.

Plattformspezifische Hinweise

Webdesign

Ergänzen Sie farbcodierte Elemente per CSS um aria-label- und title-Attribute
Gestalten Sie :focus-Zustände nicht allein über Farbe
Sorgen Sie dafür, dass Formularfehler Symbol und Text enthalten, nicht nur einen Farbwechsel

Data Science und Forschung

Verwenden Sie die Okabe-Ito-Palette als Standard in R, Python (matplotlib) oder jeder Diagrammbibliothek
Fügen Sie stets eine Legende mit Textbeschriftungen hinzu, auch wenn die Farben selbsterklärend wirken

Mobile Apps

iOS und Android unterstützen CVD-Simulation in den Bedienungshilfen
Testen Sie Ihre App vor jedem größeren Release mit aktivierten Einstellungen

Printgestaltung

Verzichten Sie auf Rot-Grün-Ampelmetaphern für Zustände
Achten Sie darauf, dass Infografiken auch als Schwarz-Weiß-Kopie verständlich bleiben

Empfohlene Werkzeuge

Werkzeug	Zweck
ColorVision-Simulator	Simuliert, wie ein Bild mit einer Farbsehschwäche wirkt
Kontrast-Prüfer	Prüft WCAG-Konformität mit CVD-Vorschau
Colour Oracle (Desktop-App)	Systemweite CVD-Simulation als Überlagerung
Who Can Use	Simuliert Kontrastverhältnisse für verschiedene Beeinträchtigungen
Figma-Barrierefreiheits-Plugin	CVD-Prüfungen in Echtzeit in Figma

Häufige Fragen

Muss man für farbenblinde Menschen ganz auf Farbe verzichten? Nein. Farbe darf weiterhin umfangreich eingesetzt werden – sie darf nur nicht der einzige Träger der Information sein. Ergänzen Sie zusätzliche Hinweise (Text, Symbole, Muster).

Reicht es, für Rot-Grün-Schwächen zu gestalten? Rot-Grün-Schwächen machen rund 98 % der Fälle aus, und Gestaltung dafür hilft meist auch anderen Formen. Am inklusivsten ist es, mit einem Simulator alle CVD-Formen zu prüfen.

Nutzen farbenblinde Menschen Screenreader? Nicht zwangsläufig. Eine Farbsehschwäche ist etwas anderes als Blindheit. Betroffene haben in der Regel volle Sehschärfe und nutzen keine Screenreader; sie brauchen farbunabhängige visuelle Hinweise, keinen Alternativtext.

Was ist das beste kostenlose Werkzeug zur Prüfung der Barrierefreiheit für Farbenblindheit? Der Simulator und der Kontrast-Prüfer dieser Website sind vollständig kostenlos. Für Figma bietet das kostenlose Plugin „Able“ eine Kontrastprüfung in Echtzeit.

Kurze Antwort