allerlayDie kurze Antwort auf die Frage, welche Farben barrierefrei sind und welche nicht: Es gibt keine barrierefreie Farbe. Deshalb gibt es auch keine Farbe, die absolut nicht barrierefrei ist. Ja, du darfst sogar zarte Pastellfarben einsetzen. Ich bin selbst ein grosser Fan von Mintgrün.
Wann ist eine Farbe nicht mehr barrierefrei? Wenn du Farben miteinander kombinierst, die zueinander kein ausreichendes Kontrastverhältnis aufweisen. Pastelltöne kannst du jederzeit als Akzentfarbe einsetzen. Oder du kombinierst die helle Farbe mit einer dunklen, so dass ein gut erkennbarer Kontrast entsteht. Fürs Messen der Kontraste gibt es verschiedene Tools, die ich in einem früheren Blogpost schon vorgestellt habe.
Barrierefreiheit ist mehr als Schwarz und Weiss
Da es keine «verbotenen» Farben gibt, darfst du für die Barrierefreiheit ruhig Farben einsetzen. Also bitte nicht einfach alle Farben weglassen und alles nur noch Schwarz-Weiss darstellen. Das hat nämlich nichts mit Barrierefreiheit zu tun, sondern mit fehlender Kreativität. Auch eine Website-Version, bei der du alles Schöne weglässt, hat nichts mit Barrierefreiheit zu tun. Barrierefreies Design darf, ja, muss ästhetisch ansprechend sein.
Wenn du wissen willst, wie man es nicht machen soll: Klicke auf der Website der Stadt Dietikon oder der Stadt Langenthal auf die Schalter «Barrierefreiheit» oder «Barrierefreiheit an«. Stellen die Entwickler hinter diesen Web-Projekten sich die Welt von Menschen mit Behinderungen wirklich so vor? Traurig, Schwarz-Weiss und langweilig? Wenn man die Barrierefreiheit auf diesen Websites wieder deaktiviert, wird die URL mit «_display-mode=normal» ergänzt. Es gibt also eine normale Ansicht für die Normalen und eine vereinfachte Ansicht für die anderen. Ich will mich nicht weiter zur Agentur äussern, denke aber, dass die Wortwahl viel darüber aussagt, wie sie über Menschen mit Behinderungen denken.
Wo die Mindestkontrastwerte gelten
Die Mindestkontraste gelten nicht nur für Text, sondern auch für alle anderen Elemente, mit denen du Informationen vermittelst. Bei Text kommt es auf die Schriftgrösse an. Bei Text muss nach WCAG auf der Stufe AA ein Mindestkontrastverhältnis von 4.5:1 eingehalten werden. Bei grossem Text gilt ein Mindestkontrastverhältnis von 3:1. Das höchste mögliche Mindestkontrastverhältnis liegt bei 22:1, nämlich bei Schwarz auf Weiss.
Weitere Elemente, bei denen diese Mindestkontrastwerte gefordert sind:
- Ränder bei Eingabefeldern
- Linien, Balken und andere Elemente in Diagrammen
- Text in Infografiken
Es gibt aber auch Elemente, bei denen es keine Anforderungen an den Kontrast gibt:
- Logos
- Redundante Icons oder ähnliches, wenn die Information auch schon in Textform vorhanden ist
Farben barrierefrei einsetzen
Die hohen Kontraste stellen sicher, dass Menschen mit Sehbehinderung oder Farbfehlsichtigkeit die Inhalte wahrnehmen und verstehen können. Manchmal ist es aber schwierig, Farbkombinationen zu finden, die sich einerseits zum Hintergrund ausreichend unterscheiden und andererseits auch zu den anderen eingesetzten Farben genügend Kontrast aufweisen. In einem Liniendiagramm zum Beispiel müssen die einzelnen Linien sich gut vom Hintergrund abheben und ein Mindestkontrastverhältnis von 3:1 aufweisen. Das Kontrastverhältnis zwischen den Linienfarben muss jedoch auch 3:1 sein. Bei vielen verschiedenen Linien ist es praktisch unmöglich, passende Farben zu finden.
Deswegen darf man Informationen nicht über Farben alleine vermitteln. Bei einem Liniendiagramm kann man mit unterschiedlichen Linienarten arbeiten, zum Beispiel mit gepunkteten oder gestrichelten Linien. Bei Linktexten im Fliesstext kannst du den Link nicht nur farblich hervorheben, sondern diesen beispielsweise mit einer Unterstreichung oder Fettung kennzeichnen. Sobald du ein zweites Gestaltungsmittel hinzufügst, vermittelst du Informationen nicht nur über Farbe und ermöglichst es, dass Menschen mit Sehbehinderung deine Inhalte besser wahrnehmen können.
Mit Barrierefreiheit Design-Wildwuchs vermeiden
Als Grafikerin oder Designer erstellst du ein Farb- und Typografie-Konzept. Doch vielleicht hast du dich auch schon in dieser Situation gefunden: Sobald der Kunde oder die Kundin die Website übernimmt und Inhalte einpflegt, entsteht ein Wildwuchs. Unterschiedliche Überschriftenebenen werden nach eigenem Gutdünken und Gefallen eingesetzt, weil die eine Überschrift vielleicht zu klein und eine andere zu farbig ist. Der Wildwuchs ist nicht nur aus Designsicht problematisch. Auch die hierarchische Struktur gerät durcheinander, was für Screenreader-Nutzende problematisch ist.
Die Barrierefreiheit ist ein gutes Argument dafür, dass Kundinnen und Kunden sich an die Gestaltungsrichtlinien halten.
Fazit
Barrierefreiheit schränkt Kreativität nicht ein. Designer und Grafiker können barrierefreie Projekte als besondere Challenge sehen und ästhetisch ansprechende Designs entwerfen, die von allen Menschen gut wahrgenommen werden können. Schwarz-Weiss ist keine Lösung und dient im besten Fall nur einer begrenzten Zielgruppe. Menschen mit Behinderungen sind nämlich vielseitiger und lassen sich nicht in «Normal» oder «Nicht normal» einteilen.