Barrierefreies Webdesign – Farben

Warum barrierefreies Webdesign?

Barrierefreies Webdesign sorgt dafür das Menschen mit Behinderungen (welcher Art auch immer), das Internet nutzen können. Je nach Art der Behinderung spielen verschiedene Arten der Barrierefreiheit eine Rolle. Bei Sehbehhinderungen sind natürlich Farben und Schriftarten ein wichtiges Thema, bei Blindheit hingegen, ist die Informationsarchitektur und die Navigation wichtig.

Häufig wird sich beim barrierefreien Webdesign auf Sehbehinderungen bezogen, da dies eine sehr häufige Behinderung ist und man als Nutzer im Netz mit einer Sehbehinderung in der Navigation eingeschränkter ist, als beispielsweise ein Hörgeschädigter. Trotzdem zählen auch Dinge wie Untertitel zum Barrierefreien Webdesign.

Farben im barrierefreien Design

Ich möchte mich in diesem Kapitel den Farben widmen, da dies eine der häufigsten Problemquellen für sehgeschädigte User darstellt. Laut einem Artikel, den ich gefunden habe, haben knapp 655.000 Deutsche eine Sehschädigung. 155.000 davon sind blind – wobei es keine offiziellen Statistiken darüber in Deutschland gibt (man mag es kaum glauben). Darin sind noch nicht die Menschen mit einer Farbenschwäche eingeschlossen, das sind knapp 5% der Bevölkerung, also knapp 4 Mio. Deutsche.

Wenn man nun also seine Internetseite nicht visuell-barrierefrei gestaltet, schließt man schonmal knapp 4,5 Millionen Menschen aus, bzw. beschert ihnen zusätzliche Probleme. Mein Vater hat eine schwere Sehbehinderung, von daher weiß ich, wie sehr er sich teilweise im Netz rumquälen muss, um an Informationen zu kommen.

Was kann ich als Designer tun?

Es gibt verschiedene Tools, die dir als Designer helfen, um dein Design zu überprüfen.

Sketch Plugin Stark

Es gibt zum Beispiel das Sketch Plugin Stark, welches dein Design auf Farbenblindheit und Kontraststärke prüft. Somit kannst du direkt in Sketch verschiedene Formen der Farbenblindheit simulieren und auch checken, ob dein Kontrast hoch genug ist.

Google Color Tool

Wenn du ein Projekt hast, das konform mit „Material Design“ sein soll, dann gibt es das Color Tool von Google. Damit kannst du zum einen Prüfen wie deine Farben in einer Material Design App aussehen würden, aber auch der Farbkontrast wird gecheckt.

Kontraste checken

Wenn du an einem bestehenden Projekt arbeitest, gibt es verschiedene Tools, um die aktuelle Farbpalette zu überprüfen. Man gibt einfach die aktuellen Farben ein und bekommt dann gesagt, ob die Farben kontrastreich genug sind und ob man beispielsweise weiße Schrift auf dem CI-Farbton nutzen kann, oder nicht. Das hilft einem auch den richtigen Farbton zu finden.

Zum einen gibt es da das Contrast Grid, bei dem man sehr viele Farben auf einmal checken kann. Ideal für große und komplexe Projekte, die bald barrierefreies Webdesign gewähleisten sollen.

Zum anderen gibt es ein sehr simples Tool, welches einfach nur zwei Farben gegeneinander checken soll. Perfekt um einfach einen Buttonstyle zu überprüfen.

Wenn du ganz schnell alle Farben herausfinden willst, die auf einer Seite verwendet wurden, jage einfach die URL in das Eingabefeld von CSS Stats und du bekommst eine gute Übersicht.

Nächster Schritt

Wenn du herausgefunden hast, welche Farben barrierefreies Webdesign garantieren, erstelle eine neue oder modifizierte Farbpalette. So hast du immer im Blick, was du nutzen kannst. Das betrifft natürlich auch die Typografie, aber dazu komme ich im nächsten Artikel.

Ich hoffe, ich konnte dir einen groben Überblick über das Thema geben und würde mich freuen, wenn du beim nächsten Artikel dabei bist. Abonniere doch meinen Newsletter, damit du ihn nicht verpasst.

 

Chris

UX Design Freelancer aus Berlin. Nie müde Projekte und Experimente nebenher zu betreiben. Ehemann, Vater und überzeugter Pflanzenfresser.