Zusammenfassung: 8% aller Männer sind von Farbenblindheit betroffen. Designern sollte klar sein, dass bestimmte Farbkombinationen Menschen mit Sehschwächen benachteiligen oder sogar ausschließen. Und das, obwohl ein Layout mit wenigen Clicks getestet ist.

Auf der Smashing Conference in Freiburg hat die Designerin Geri Coady einen Vortrag über Farbenblindheit gehalten.  Sie ist Illustratorin und Web-Designerin.
Das Thema hat mich einigermaßen beeindruckt. Man konnte lernen, dass es drei unterschiedliche Arten von Farbenblindheit gibt, die dafür sorgen, dass Menschen Farben unterschiedlich wahrnehmen (Rot-Grün-Sehschwäche ist die bekannteste). Farbenblindheit betrifft 8% aller Männer. Die Frauen haben’s mit lediglich 0,5% gut getroffen.

Was bedeutet das für Designer?

Ein Layout darf nicht voraussetzen, dass jeder Nutzer die verwendeten Farben unterscheiden kann. Besonders dann, wenn Farben der Kodierung von Informationen dienen, muss man sich dessen bewusst sein.

Ein gutes Beispiel ist der Liniennetzplan der MVV München . Die Linien S6 und U1 sind in rot und grün dargestellt, beide Farben haben sehr ähnliche Sättigungs- und Helligkeitswerte. Jemand mit Rot-Grün-Sehschwäche kann U1 und S6 kaum voneinander unterscheiden. Abhilfe ist leicht geschaffen: Andere Farben, Schraffuren, und unterschiedlich gestrichelte Linien helfen, Layouts so zu gestalten, dass Menschen mit Sehschwäche nicht benachteiligt werden.

Liniennetzplan der MVV München, Simulation von Rot-Grün-Sehschwäche (mit Color Oracle); oben links der normale Plan. Es ist gut zu erkennen, dass alle Linien nur noch blau/violett bzw. in gelb/ocker erkennbar sind

Tools zum Überprüfen von Layouts

Vom World Wide Web Consortium gibt es eine Arbeitsgruppe, die Empfehlungen für Barrierefreiheit herausgibt (die WCAG). Für Farben empfiehlt die WCAG ein Kontrastverhältnis von mindestens 1:4,5 (je höher, desto besser). Das Kontrastverhältnis wird aus der Luminanz zweier Farben berechnet und ist geeignet zu beurteilen, wie gut sich zwei Farben unterscheiden lassen.
Liegt das Kontrastverhältnis über 1:4,5, sind die Chancen gut, dass Menschen mit Sehschwäche damit zurechtkommen.

Dieses Online-Tool rechnet das Kontrastverhältnis zweier Farben aus:
Contrast Ratio von Lea Verou

Installiert man auf seinem Computer Color Oracle, lassen sich mit zwei Clicks alle Arten von Sehschwächen am Monitor simulieren.

Zum Prüfen bestehender Websites bietet Google die Accessibility Developer Tools für Chrome an. Das Plugin kann einen „Accessibility Audit“ durchführen, der auch das Kontrastverhältnis von Farben berücksichtigt.

Zum Abschluss aus der Einleitung zum Thema „Accessibility“:

“There is also a strong business case for accessibility. Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO). Case studies show that accessible websites have better search results, reduced maintenance costs, and increased audience reach, among other benefits. Developing a Web Accessibility Business Case for Your Organization details the social, technical, financial, and legal benefits of web accessibility.”

w3.org, “Why: The Case for Web Accessibility”