Farbenblindheitssimulator

Warum es wichtig ist, für Farbfehlsichtigkeit zu gestalten

Farbfehlsichtigkeit (CVD) ist häufig. Das US National Eye Institute berichtet, dass etwa 1 von 12 Männern eine Form von CVD hat; Frauen sind in viel geringerem Maße betroffen, weil die häufigsten Formen über X-chromosomal rezessive Gene vererbt werden. Zusammengenommen geht die weltweite Bevölkerung mit einem gewissen Grad an CVD in die Hunderte von Millionen. Jedes nutzerseitige Design, das sich auf Rot und Grün verlässt, um Bedeutung zu vermitteln (Fehler- vs. Erfolgsanzeigen, Diagramme, Status-Pills, Validierungsmeldungen), versagt bei einem erheblichen Teil der Nutzer, sofern die Farbe nicht mit einem weiteren Hinweis kombiniert wird.

Das ist auch eine formale Anforderung an die Barrierefreiheit. WCAG 2.2 Erfolgskriterium 1.4.1 („Use of Color“), Stufe A formuliert die Regel direkt: „Farbe wird nicht als einziges visuelles Mittel verwendet, um Informationen zu vermitteln, eine Aktion anzuzeigen, zu einer Reaktion aufzufordern oder ein visuelles Element zu unterscheiden.“ Stufe A ist die niedrigste WCAG-Konformitätsstufe; sie zu verfehlen bedeutet, dass eine Website nicht nur unzugänglich, sondern in Rechtsräumen, die WCAG-Konformität vorschreiben, auch rechtlich nicht konform ist (US Section 508, EU Accessibility Act, UK Equality Act).

Die acht Formen der CVD

Das menschliche Farbsehen beruht auf drei Arten von Zapfen-Fotorezeptoren: L-Zapfen (langwellig, Maximum um Rot), M-Zapfen (mittelwellig, Maximum um Grün) und S-Zapfen (kurzwellig, Maximum um Blau-Violett). Jede Form der CVD entspricht dem Fehlen eines dieser Zapfen (-anopie) oder einer Verschiebung seiner Empfindlichkeit (-anomalie).

Deuteranomalie ist die am weitesten verbreitete Form, weil die Fotopigment-Gene des L- und des M-Zapfens auf dem X-Chromosom benachbart sind und sich nur um wenige Aminosäuren unterscheiden. Kleine Mutationen verschieben das Empfindlichkeitsmaximum des M-Zapfens leicht näher an den L-Zapfen und verringern die Fähigkeit des Gehirns, zwischen Rot und Grün zu unterscheiden.

Warum Männer häufiger betroffen sind

Die Fotopigment-Gene des L-Zapfens (OPN1LW) und des M-Zapfens (OPN1MW) sitzen beide auf dem X-Chromosom. Männer erben nur ein X (von ihrer Mutter); Frauen erben zwei (eines von jedem Elternteil). Damit sich eine rezessive Schwäche ausprägt, bräuchte eine Frau das defekte Gen auf beiden X-Chromosomen, während ein Mann es nur auf seinem einzigen X braucht. Die Rechnung ergibt speziell bei der Rot-Grün-CVD einen etwa 10-fachen Unterschied in der Häufigkeit zwischen Männern und Frauen. Das Gen des S-Zapfens liegt auf Chromosom 7 und ist autosomal; Tritanopie und Tritanomalie betreffen Männer und Frauen in ähnlichem Maße, aber beide Formen sind ohnehin sehr selten.

WCAG-Kontrastanforderungen gelten ebenfalls

Über SC 1.4.1 hinaus schreibt WCAG auch Mindest-Kontrastverhältnisse für Text und UI-Komponenten vor, alle gemessen an der tatsächlich sichtbaren Farbpaarung:

• SC 1.4.3 Kontrast (Minimum), Stufe AA: mindestens 4,5:1 für normalen Fließtext, 3:1 für großen oder fetten Text.
• SC 1.4.6 Kontrast (erhöht), Stufe AAA: 7:1 für normalen Text, 4,5:1 für großen.
• SC 1.4.11 Nicht-Text-Kontrast, Stufe AA: 3:1 für UI-Komponenten und grafische Objekte (Schaltflächenränder, Fokusindikatoren, Icon-Umrisse).

Verwenden Sie diesen Simulator zusammen mit einem Kontrastprüfer. Zwei Farben können im normalen Sehen ein völlig ausreichendes Kontrastverhältnis von 4,5:1 haben und für einen Deuteranopen dennoch nicht unterscheidbar sein. Der Simulator fängt den zweiten Fehlermodus ab, den eine reine Kontrastprüfung übersieht.

Häufige Design-Fallstricke und ihre Lösungen

• Rot-/grüne Statusanzeigen für Erfolg vs. Fehler. Kombinieren Sie sie mit einem Icon (✗ / ✓), einer Textbeschriftung oder unterschiedlichen Formen. Verlassen Sie sich nie allein auf den Farbton.
• Farbige Links ohne Unterstreichung. Viele CVD-Nutzer können einen farbigen Link nicht vom umgebenden Fließtext unterscheiden. Fügen Sie eine Unterstreichung, eine Änderung der Schriftstärke oder beides hinzu.
• Balkendiagramme, die nur nach Kategorie eingefärbt sind. Fügen Sie Muster, direkte Beschriftungen hinzu oder verwenden Sie eine farbenblindensichere Palette (Viridis, Cividis, Magma, Okabe-Ito, die CVD-sicheren Sets von ColorBrewer).
• Heatmaps mit Rot→Grün-Verläufen. Wechseln Sie zu wahrnehmungsgleichmäßigen Paletten; Matplotlibs Viridis (seit 2017 Standard) und Cividis (Nuñez et al., 2018, speziell für CVD-Betrachter entworfen) sind beide sicher.
• Formularvalidierung allein durch roten Text. Kombinieren Sie sie mit einem Icon, einer ausdrücklichen Fehlermeldung und einer sichtbaren Änderung des Feldumrisses.
• „Klicken Sie auf den grünen Knopf“-Anweisungen. Verweisen Sie auf Position oder Beschriftung, nicht auf die Farbe.
• Kartenlegenden mit ähnlichen Farbtönen. Choroplethenkarten mit Rot-Orange-Gelb-Skalen können unter Deuteranopie auf zwei nicht unterscheidbare Farben zusammenfallen. Verwenden Sie eine einfarbige Skala (hell- bis dunkelblau) oder eine CVD-sichere divergierende Palette.
• Farbcodes im Spieldesign. Bekanntermaßen stellten die frühen Apricorns in Pokémon Kristall und die ursprünglich farbcodierten PokéStops in Pokémon GO Rot-Grün-Entscheidungen dar, die für viele CVD-Spieler unlösbar waren.

Farbenblindensichere Paletten

• Viridis: Matplotlibs sequenzielle Standardpalette seit 2017. Wahrnehmungsgleichmäßig im normalen Sehen wie bei CVD.
• Cividis: Speziell für CVD-Betrachter entworfen (Nuñez, Anderton & Renslow, PLOS ONE 2018). Hält den gleichmäßigen wahrnehmungsbezogenen Abstand auch dann ein, wenn Deuteranopie oder Protanopie simuliert wird.
• ColorBrewer: Cynthia Brewers Paletten für die Kartografie. Die Website markiert ausdrücklich CVD-sichere Varianten für sequenzielle, divergierende und qualitative Daten.
• Okabe-Ito: Eine qualitative Acht-Farben-Palette, entworfen von Masataka Okabe und Kei Ito für Barrierefreiheit im wissenschaftlichen Publizieren. Die empfohlene Standardpalette für kategoriale Daten mit bis zu 8 Kategorien.

Browser-DevTools haben ebenfalls CVD-Simulatoren

Sowohl die Chrome- als auch die Edge-DevTools haben eine eingebaute Option „Sehschwächen emulieren“ (im Rendering-Tab), die Protanopie, Deuteranopie, Tritanopie und Achromatopsie über den gesamten Viewport simulieren kann. Der Accessibility Inspector von Firefox bietet einen ähnlichen Simulator. Diese eignen sich hervorragend für ganzseitige Audits bei Design-Reviews; dieses Einzelfarben-Werkzeug ergänzt sie, indem es jeweils ein Farbfeld isoliert, sodass Sie eine Paletten-Entscheidung treffen können, ohne dass der Rest der Seite den Vergleich stört.

Diagnostische Tests, von denen Sie vielleicht gehört haben

• Ishihara-Tafeln (Shinobu Ishihara, 1917), die berühmten Farbpunkt-Tafeln mit versteckten Zahlen. Standard im klinischen Umfeld zur Früherkennung von Rot-Grün-Schwächen.
• Farnsworth-Munsell-100-Hue-Test: Ordnen Sie Farbkappen in fortlaufender Farbtonreihenfolge an. Testet die feine Unterscheidung, nicht nur das Ja/Nein-Vorhandensein von CVD.
• Anomaloskop: Stellen Sie eine Rot-Grün-Mischung so ein, dass sie einer gelben Referenz entspricht. Wird zur klinischen Klassifizierung von CVD-Typ und -Schweregrad verwendet.

Dieses Werkzeug ist kein Diagnoseinstrument, es simuliert, wie eine gegebene Farbe für jemanden mit verschiedenen Formen von CVD erscheint, damit Sie entsprechend gestalten können, nicht um das Sehvermögen einer Person zu testen.

Häufige Fehler

1. CVD als Nischenthema behandeln. Einer von 12 Männern ist ein erheblicher Anteil der Nutzerbasis jedes Verbraucherprodukts, und die meisten von ihnen melden es nie, weil sie ihr ganzes Leben lang damit umgegangen sind.
2. Annehmen, dass „Dark Mode“ oder „hoher Kontrast“ das abdeckt. Kontrast und CVD sind unabhängige Achsen. Eine kontrastreiche Palette kann sich dennoch auf Rot-Grün-Unterscheidungen verlassen, die versagen.
3. Nur mit Deuteranopie testen. Deuteranopie ist die häufigste Form, aber nicht die einzige; Protanopie, Tritanopie und die partiellen -anomalie-Varianten erzeugen alle unterschiedliche Verwechslungen. Gehen Sie sie alle durch.
4. Nur den Simulator verwenden und den Kontrastprüfer ignorieren. Eine Palette kann CVD-sicher sein und dennoch die Kontrastmindestwerte von WCAG 1.4.3 verfehlen. Verwenden Sie beide Werkzeuge.
5. Farben nach Namen statt nach wahrgenommenem Abstand auswählen. „Rot, Grün und Blau“ klingt gut getrennt; bei CVD kann es zu „dunkel, dunkel, blau“ zusammenfallen. Testen Sie die tatsächlichen Farbfelder.

Häufig gestellte Fragen

Wie genau ist die Simulation?

Die CVD-Simulation ist eine Näherung, keine perfekte Darstellung. Die Standardalgorithmen (die Methode von Brettel, Viénot & Mollon von 1997, verfeinert durch Viénot 1999 und Machado et al. 2009) projizieren eine Farbe auf die „Verwechslungslinie“ für den fehlenden oder verschobenen Zapfen im LMS-Farbraum. Das Ergebnis ist das, was jemand mit vollständiger Dichromasie im Mittel sehen würde, aber echte CVD-Nutzer unterscheiden sich individuell; das Gehirn gleicht mit Hinweisen aus Leuchtdichte, Kontext und früherer Erfahrung aus, die eine statische Simulation nicht nachbilden kann.

Wird mein Bild oder meine Farbe irgendwohin gesendet?

Nein. Die Simulation läuft vollständig in Ihrem Browser und verwendet ein Canvas-Element, um die Farbtransformation pro Pixel anzuwenden. Es wird nichts hochgeladen, protokolliert oder gespeichert. Das ist wichtig, wenn das von Ihnen getestete Bild ein unveröffentlichtes Design-Mock-up, ein Screenshot vertraulicher UI oder etwas anderes ist, das Sie nicht mit Dritten teilen würden.

Sollte ich für alle acht Formen der CVD gestalten?

In der Praxis deckt das Gestalten für die häufigsten Formen (Deuteranopie und Deuteranomalie) die überwiegende Mehrheit der Nutzer ab. Eine zusätzliche Prüfung gegen Protanopie erfasst den größten Teil des Rests. Tritanopie und Tritanomalie sind selten genug, dass das Bestehen der Deutan-/Protan-Tests meist ausreicht, auch wenn ein wirklich barrierefreies Design, das sich überhaupt nicht auf den Farbton verlässt (kombiniert mit Icons, Mustern oder Beschriftungen), automatisch alle abdeckt.

Meine aktuelle Palette hat „CVD-safe“ im Namen. Muss ich trotzdem testen?

Ja. „CVD-safe“ bedeutet üblicherweise, dass die Kategoriefarben der Palette unter Simulation unterscheidbar sind, aber sobald Sie eine echte Oberfläche zusammenstellen (Text auf farbigem Hintergrund, ein Icon über einer Füllung, ein um 5 % Helligkeit verschobener Hover-Zustand), können Sie Verwechslungen wieder einführen. Testen Sie Ihre zusammengestellten Farbpaare, nicht nur die Ausgangspalette.

Was ist der Unterschied zwischen Protanopie und Protanomalie?

Protanopie ist das Fehlen des Fotopigments des L-Zapfens (Rot), die betroffene Person hat überhaupt keine funktionsfähige Rotempfindlichkeit. Protanomalie ist eine Verschiebung des Empfindlichkeitsmaximums des L-Zapfens statt seines Fehlens, die betroffene Person hat eine verringerte, aber nicht null Rotunterscheidung. Dasselbe Muster gilt für deutera-/deuter- und trita-/triton-: -anopie ist die starke Form, -anomalie ist die partielle Form.

Funktionieren farbkorrigierende Brillen (EnChroma) tatsächlich?

Für viele Menschen mit Rot-Grün-Schwäche ja, sie vergrößern den wahrgenommenen Abstand zwischen bestimmten Rot- und Grüntönen, indem sie spezifische überlappende Wellenlängen zwischen dem L- und dem M-Zapfen herausfiltern. Sie „heilen“ CVD nicht und lassen einen Dichromaten kein normales Farbsehen erlangen; an der Fotopigment-Situation ändert sich nichts. Die Wirksamkeit variiert je nach Individuum und Lichtbedingung; im Tageslicht im Freien helfen sie tendenziell am meisten.

Verwandte Tools