I can’t see it!

„Ich hab das neue Feature fertig und du kannst es jetzt ausprobieren in der App.“
„Scheint nicht zu funktionieren. Ich drück auf den Button und es passiert nichts!“
„Bist du blind? Du musst nur auf den Button klicken und der Statustext springt von Rot nach Grün!“
„ICH KANN DAS ABER NICHT SEHEN!!11!“ 

 

Farbfehlsichtigkeit 

Unter Farbfehlsichtigkeit versteht man die Unfähigkeit, Farben von bestimmten Wellenlängen wahrzunehmen.
Durch optoelektrische Sinneszellen (Zapfen und Stäbchen) in der Netzhaut sind wir in der Lage Farben zu sehen. Die Zapfen sind hierbei für die Farbidentifikation und die Stäbchen für die Hell-Dunkel-Lokalisierung zuständig. Von den Zapfen sind drei verschiedene Arten vorhanden, die die Wellenlängen des Spektrums Rot, Grün und Blau analysieren und im Sehzentrum des Gehirns zu Bildern zusammensetzen. Die Mischung der drei Farb-Rezeptorerregungen ergeben dann den Sinneseindruck Farbe. Werden z.B. die Rezeptoren für Rot und Grün angeregt, ergibt das die Farbe Gelb.

Bei Farbfehlsichtigkeit sind die für die Farblokalisation notwendigen Zapfen entweder gar nicht vorhanden oder es sind nur relativ wenige in der Netzhaut angelegt. Die Ursache dieses Defektes liegt meist in einer genetischen Störung, ist also angeboren. 

 
Rot-Grün-Sehschwäche 

Eine Rot-Grün-Schwäche tritt bei ca. 9 % aller Männer und 0,8 % aller Frauen auf.
Betroffene erkennen die Farben Rot und Grün unterschiedlich intensiv und können sie schlecht bis gar nicht voneinander unterscheiden. Verglichen mit Normalsichtigen nehmen Rot-Grün-Sehgeschwächte insgesamt weniger Farben wahr. Sie sind zwar normalsichtig für verschiedenste Blau- und Gelbnuancen, allerdings sehen sie Rot und Grün schwächer.

Die Ausprägung einer Rot-Grün-Sehschwäche kann unter anderem mit Farbtafeln (beispielsweise den hier gezeigten Ishihara-Farbtafeln) festgestellt werden.

Die Rot-Grün-Sehschwäche lässt sich für Trichromaten (Farbsichtige mit drei Zapfentypen) simulieren, indem der rote und der grüne Farbkanal eines digitalen Bildes zu einem gelben Kanal zusammengefasst werden, bei dem Rot und Grün die gleiche Helligkeit aufweisen.

Um als normal Sehender herausfinden zu können, wie Menschen mit einer Farbsehschwäche eine Website sehen, eignen sich Seiten wie diese. Dort könnt ihr eure Website durch einen Webseiten-Filter bzw. Farbsimulator schicken. 

 

 

(Abbildung – Quelle)

Niemand wird zurückgelassen! 

Da ein nicht unerheblicher Teil der Bevölkerung an einer Rot-Grün-Sehschwäche leidet, ist es unbedingt notwendig User Interfaces auch für diese Zielgruppe accessible zu machen. Für uns als Frontendentwickler oder UI-Designer stellt sich daher die Frage, wie wir beim Frontenddesign auch Sehschwächen berücksichtigen können. Wollen wir z.B. eine Webseite gleich schön für alle Besucher und Zielgruppen gestalten, werden wir wenig Erfolg haben. Schönheit ist nicht nur eine subjektive Wahrnehmung, es ist zudem auch unmöglich eine Webseite für alle Zielgruppen (z.B. Farbfehlsichtige) farblich gleichschön zu gestalten.  

Usability unfreundlich und schwierig wird es für Menschen mit Farbsehschwäche allerdings erst, wenn eine bestimmte Bedeutung mit einer Farbe verknüpft ist.
Beispiele hierfür sind die Unterscheidung von guten und schlechten Zahlen in einer Tabelle oder die Unterscheidung von Linien in einem Liniendiagramm. 

Diagramme sind hierfür besonders gute Beispiele. Sie bestehen meist aus zwei Teilen: Die Grafik und ihre Legende. Die Grafik besitzt oftmals keine Beschriftung. Stattdessen werden die Balken anhand ihrer Farben in der Legende zugeordnet.
Wenn also Besucher mit einer Farbsehschwäche die Farben der Balken eines Diagramms nicht unterscheiden können, so können sie die Balken auch nicht den jeweiligen Punkten in der Legende zuordnen.

 

Tipps

Verwende weniger Farben 

Es müssen in den wenigsten Fällen viele Farben in einem Design verwendet werden. Oftmals ist weniger mehr. Vor allem für eine Farbenblinde Zielgruppe gestaltet sich das besonders hilfreich.
Dadurch können auch Kombinationen der Farben Rot und Grün vermieden werden. 

Die Farben Rot und Grün nicht in Kombination zu benutzen ist aber nicht die einzige Lösung. Die beiden Farben können sehr wohl gemeinsam benutzt werden, wenn sie für sich alleinstehen.  

Ein rotes und ein grünes Diagramm, welche ordentlich beschriftet sind, stellen beispielsweise kein Problem dar, wenn alle Balken braun dargestellt sind. 

Verwende Farbenblind-freundliche Farbkombinationen

Zwei Farben miteinander zu kombinieren ist prinzipiell okay, solange eine von beiden für gewöhnlich nicht mit Farbenblindheit assoziiert wird.
Blau/Orange ist beispielsweise eine Farbenblind-freundliche Farbkombination. Blau/Rot und Blau/Braun sind ebenfalls gut erkennbar. Blau eignet sich generell gut für Kombinationen, da Blau für die häufigsten Arten von Farbenblindheit nach blau aussieht. 

Verwende unterschiedliche Helligkeiten

Personen mit einer Farbschwäche haben primär Probleme mit dem Farbton und nicht mit der Helligkeit. Fast jeder kann den Unterschied zwischen einer sehr hellen und einer sehr dunklen Farbe erkennen. Wenn unbedingt Rot und Grün verwendet werden muss, besteht eine weitere Möglichkeit darin, einen sehr hellen Grünton mit einem sehr dunklen Rotton zu kombinieren. 

Verwende alternative Methoden zum Kennzeichnen

Ist es nicht möglich die entsprechenden Farben in einem Design zu verwenden, sollten zusätzlich alternative Kennzeichen eingebaut werden, damit auch Farbenblinde die Komponenten richtig interpretieren können.
Symbole, Icons, Pfeilrichtungen, Beschriftungen, Muster, Texturen, etc. erlauben Personen mit Farbenblindheit wichtige Komponenten zu unterscheiden, z.B. ob etwas gut oder schlecht ist.