Vielleicht sind Sie auf diesem Blog gelandet, weil Sie bei der Gestaltung Ihrer neuen Website oder Ihres Logos barrierefreie Farben suchten. Das ist super, denn Sie beschäftigen sich offensichtlich mit der Barrierefreiheit Ihres Produktes! Leider muss ich Sie enttäuschen, denn so etwas wie barrierefreie Farben gibt es nicht.
Da das für einen Blog-Beitrag aber etwas kurz und frustrierend wäre, folgt nun die gute Nachricht: Jede Farbe kann barrierefrei eingesetzt werden. Und deshalb schauen wir uns an, wann Farben als barrierefrei gelten und wann nicht.
Kontraste zwischen Farben
Wenn wir über die Barrierefreiheit von Farben sprechen, geht es eigentlich nie um die Farben selbst. Denn Farben stehen nie allein. Text oder Icons sind nicht einfach da, sondern stehen vor einem Hintergrund. Und immer dann wenn wir wissen wollen, ob eine Farbe barrierefrei ist, geht es eigentlich um die Frage: „Kann ich die Farbe vom Hintergrund unterscheiden?“. Denn nur, wenn der Text vom Hintergrund gut zu unterscheiden ist, kann er auch gelesen werden. Wir sprechen also nicht von barrierefreien Farben, sondern von barrierefreien Kontrasten. Schwarzer Text auf hellgelbem Hintergrund ist lesbar. Schwarzer Text auf Dunkelblau nicht. Deshalb ist Schwarz nicht mehr oder weniger barrierefrei, sondern der Kontrast ist es.
Minimale barrierefreie Kontraste zwischen Farben
Die WCAG, der internationale Standard für Barrierefreiheit im Internet, gibt klare Vorgaben für die mindestens zu erfüllenden Kontrastwerte zwischen zwei Farben. Dabei spielt es im übrigen keine Rolle, welche der beiden Farben als Vorder- oder Hintergrund verwendet wird.
Folgende Anforderungen gelten:
| Element | Level AA | Level AAA |
| kleiner Text | 4.5:1 | 7:1 |
| großer Text (ab 19px wenn fett, sonst ab 24px) | 3:1 | 4.5:1 |
| grafische Bedienelemente | 3:1 | 4.5:1 |
Das Level AA ist dabei geeignet für Menschen ohne besondere Sehschwäche mit den üblichen Beeinträchtigungen, die man in hohem Alter erwartet. Ein Kontrast von 7:1 kann auch von vielen Menschen mit Sehbeeinträchtigungen oder Farbsehschwächen noch unterschieden werden.
Die Berechnung des Kontrastes beruht dabei vor allem auf der Helligkeit der eingesetzten Farben, welchen Farbwert diese haben spielt nur eine untergeordnete Rolle. Im ersten Blog-Beitrag habe ich mich schon einmal sehr mathematisch damit befasst, wie die Farbkontraste berechnet werden.
Zur Bestimmung des Kontrastverhältnisses zweier Farben müssen Sie allerdings nicht selbst rechnen. Es gibt inzwischen viele Tools auf dem Markt, die Ihnen die Kontrastwerte berechnen. Persönlich nehme ich den Contrast Checker von Webaim, da er auch über eine Pipettenfunktion verfügt und so auch gut für Bilder oder halbtransparente Texte verwendet werden kann.
Unangenehm starke Farbkontraste
Es gibt aber nicht nur Kontraste, die zu gering sind. Auch zu starke Kontraste können unangenehm sein, vor dem Auge flimmern und beim Betrachten anstrengen. Dazu gehören starke Schwarz/Weiß-Kontraste. Sie erscheinen häufig wie ein Flimmern an den Übergängen und ermüden den Leser schnell. Versuchen Sie deshalb hohe, aber nicht zu extreme Kontraste zu finden. Ein Dunkelgrau statt Schwarz als Schriftfarbe oder hellgrau statt weiß im Hintergrund kann oft schon den Unterschied machen.
Das weite Feld der Farbfehlsichtigkeiten
Farbfehlsichtigkeit, oft fälschlicherweise als Farbenblindheit bezeichnet, betrifft viele Menschen und beeinflusst, wie sie Farben wahrnehmen. Dabei gibt es verschiedene Arten und Ausprägungen, die unterschiedliche Herausforderungen mit sich bringen. Schauen wir uns die häufigsten Arten an.
Rot-Grün-Sehschwäche
Als Rot-Grün-Sehschwäche werden alle Farbfehlsichtigkeiten bezeichnet, bei denen Betroffene die Farben Rot und Grün entweder nicht oder nur schwer voneinander unterscheiden können. Beide Farben werden dann mehr oder weniger grau wahrgenommen. Dies tritt bei bis zu 10% der westeuropäischen Männer auf und ist die am weitesten verbreitete Farbfehlsichtigkeit.
- Deuteranomalie: Die häufigste Form, bei der Grüntöne schwerer zu erkennen sind. Viele Betroffene haben Schwierigkeiten, Grün und Rot zu unterscheiden.
- Protanomalie: Hier sind Rottöne weniger intensiv und erscheinen oft dunkler.
- Deuteranopie und Protanopie: Vollständige Unfähigkeit, Grün- bzw. Rottöne zu sehen, wodurch die Welt hauptsächlich in Blau- und Gelbtönen wahrgenommen wird.
Blau-Gelb-Sehschwäche
Entsprechend der Rot-Grün-Sehschwäche gibt es auch die Blau-gelb-Sehschwäche, die jedoch deutlich seltener vorkommt.
- Tritanomalie: Eine seltene Form, bei der Blau- und Gelbtöne schwer zu unterscheiden sind. Tritt bei Männern und Frauen gleichermaßen auf.
- Tritanopie: Völlige Unfähigkeit, Blautöne zu erkennen, was zu einer rot-grünen Wahrnehmung führt.
Vollständige Farbenblindheit (Achromatopsie)
Auch wenn Farbfehlsichtigkeiten häufig als Farbenblindheit bezeichnet werden, sind sie es nicht. Als farbenblind wird nur bezeichnet, wer keine Farben unterscheiden kann.
- Achromatopsie: Extrem selten, führt dazu, dass Betroffene nur Grautöne sehen. Häufig mit Lichtempfindlichkeit und verminderter Sehschärfe verbunden.
Umgehen mit Farbfehlsichtigkeiten
Gestaltet man mit Farben, dann sollte man darauf achten, dass auch Menschen mit den verschiedensten Farbfehlsichtigkeiten nicht benachteiligt werden. Am einfachsten geht das, wenn man sich die Frage stellt: „Was passiert, wenn ich es in Schwarz-Weiß betrachte?“. Gehen Sie beim Entwurf grundsätzlich davon aus, dass man die Farbe nicht erkennen kann. Was machen Nutzer dann? Erhalten sie noch alle notwendigen Informationen?
Denken Sie hier immer an das Zwei-Sinne-Prinzip und gestalten Sie Elemente so, dass man jede Information auf mindestens zwei verschiedene Wege erhalten kann. Barrierefreie Farben mag es nicht geben, eine barrierefreie Gestaltung mithilfe von Farben aber sehr wohl.
Barrierefreie Farben – Fazit
Haben Sie Mut zur Farbe, auch ohne barrierefreie Farben. Langweilige Websites gibt es schon zur Genüge. Achten Sie aber darauf, dass die Kontraste der Farben zueinander stimmen. Denken Sie dabei nicht nur an den Kontrast zwischen Vorder- und Hintergrund sondern auch an den Kontrast zwischen zwei verschiedenen Zuständen. Ist zu erkennen ob ein Element aktiv ist? Insbesondere dann, wenn sich die Farbe fließend in einer Mikroanimation ändert, könnten zu kleine Veränderungen übersehen werden. Wenn die Farbe allein nicht reicht, verwenden Sie weitere Gestaltungsmittel.