Was Barrierefreiheit im Internet bedeutet

Farben sind in der Gestaltung ein tolles Element. Mit ihnen können

• emotionale Inhalte erstellt werden (etwa mit einem feurigen Rot)
• unterschiedliche Themen strukturiert werden (So wird beispielsweise Produkt A in orange, Produkt B in blau dargestellt)
• oder sogar Markenwerte transportiert werden (Mit dem Kärcher-Gelb oder Telekom-Magenta)

Farben und Gefühle

Wie gesagt, können Farben auch Emotionen hervorrufen. Nicht umsonst sind die Grenzen zum Greenwashing teilweise fließend, wenn Logos und ganze Marken in Grün dargestellt und damit auf ökologisch anmutend gestaltet werden. Im Sommer 2021 wurden die Fußballstadien Regenbogenfarben. Das drückt eine Haltung aus, aber auch eine Emotion, nämlich Zusammenhalt und Gemeinschaft, zumindest bei vielen.

Denn Farben werden auch immer wieder politisch eingesetzt. Das eben angesprochene Grün ist auch eine Farbe des Islam (immer wieder zu erkennen in Flaggen islamischer Staaten). Während des Nationalsozialismus wurde Rot mit Schwarz und Weiß immer wieder gern genutzt, als starke, aggressive Farben. Das ist der Grund, weshalb man bei den olympischen Spielen 1972 in München viele Farben nutzte, aber auf keinen Fall Rot; also der Kontrast zu den Spielen in Berlin 1936. So gilt es eben auch zu beachten, dass Farben neben ihren kulturellen Bedeutungen (Ruhe, Kraft oder Stärke) eben auch gesellschaftlich-historische Konnotationen erhalten können.

Farben sind im Design also unheimlich mächtig. Umso wichtiger ist, sich bewusst zu machen, dass nicht jeder Farben gleich sieht.

Warum sind Farben ein Werkzeug in der digitalen Barrierefreiheit?

Folgendes Experiment: Haltet mal euren Computer in die Sonne, oder dreht die Helligkeit des Monitors herunter. Sind die Farben weiterhin noch gut erkennbar? Auch wenn dies natürlich nicht das Erlebnis von Beeinträchtigten zeigt, erkennt man doch schnell: Allen ist durch hohe Kontraste und einen bewussten Einsatz von Farben geholfen. Das bedeutet, je nach Situation und Person werden Farben anders wahrgenommen:

• Farbwahrnehmungen unterliegen, wie bereits angesprochen, kulturellen Bedingungen. So trägt man in Deutschland Schwarz als Ausdruck der Trauer. In Asien jedoch Weiß. Blau bedeutet Vertrauen, wird daher oft von Versicherungen genutzt. Aber das wird nicht überall der Fall sein.
• Laut WHO sind rund 2,2 Milliarden Menschen betroffen von visuellen Einschränkungen. Diese sind natürlich vielfältig (von Weitsichtigkeit bis Blindheit). Aber ein Drittel der Menschheit sieht die Farben deiner Website vielleicht anders als du. Dazu altert unsere Gesellschaft, und schaut dabei ständig auf Monitore. Rücken- und Sehprobleme sind die neuen Volkskrankheiten. Es ist also grundlegend, dass Gestaltung dies berücksichtigt. Das Problem ist nämlich oft, dass Designer (berufsbedingt) natürlich oft gut sehen können. Das ist aber nicht der Regelfall.

Was sind barrierefreie Farben?

Es wird also immer wichtiger, Farben auf ihre Kontraste hin zu prüfen. Also was tun? Bereits zu Beginn des Gestaltungsprozesses sollte Barrierefreiheit eine Rolle spielen. Darunter fallen auch die Farben. Für das Web bieten die Web Content Accessibility Guidelines (WCAG) einen guten Orientierungspunkt. Die Barrierearmut wird dort für Farben in drei Klassen geteilt:

A: Kontrast 3:1

AA: Kontrast 4,5:1

AAA: Kontrast 7:1

Das System ist aus den USA und beschreibt, wie viel jemand aus einer bestimmten Entfernung erkennen kann. Das kennt man vom Augenarzt, wo man Buchstaben und Zahlen vorlesen muss. Der Standardwert bei gesunden Augen ist 3:1. Damit ist Level A nur der absolute Mindeststandard. Bei Level AA ist der Kontrast schon anderthalb mal so hoch, und nochmal deutlich besser bei Level AAA. Das höchste Level sollte dabei natürlich das Ziel sein, was jedoch vielleicht nicht immer möglich ist. Level AA sollte aber schon der Standarf sein. Dabei gilt beispielsweise, dass Texte unter einer Größe von 24px einen Kontrast von mindestens 4,5:1 erreichen sollten. Bei Überschriften, die größer sind als 24px, kann der Wert auch etwas darunter liegen.

Im Internet gibt es dafür eine Menge Kontrastchecker. Diese unterstützen dabei, barrierearm zu arbeiten. Darüber hinaus gibt es Möglichkeiten, die Einschränkungen von Farbwahrnehmungen simulieren. Auch wenn man natürlich keine exakte Simulation erreicht, so ist es hilfreich, sich der Problematik bewusst zu machen. So setze ich dann vielleicht die nicht ganz so kontrastreiche Farbe nur sehr sparsam in Akzenten ein. Oder dort, wo vielleicht etwas zusätzlich und damit für das Verstehen der Inhalte nicht unbedingt notwendig ist. Denn die wesentlichen Inhalte sollten immer optimal les- und erkennbar dargestellt sein.

Farben sollten nicht alleiniger Informationsträger sein

Darüber hinaus ist es wichtig, sich nicht nur auf Farben als Unterscheidungsmerkmal in der Gestaltung zu verlassen. So hat der Shampoo-Hersteller Schauma beispielsweise ein Redesign seiner Shampoo-Flaschen angekündigt. Das Element, das bislang Orientierung hab, das Foto eines Models, fällt weg. Damit ist das Hauptunterscheidungsmerkmal nun die Farbe. Hier kann es also für Menschen mit Beeinträchtigungen zu Missverständnissen kommen. Man könnte also zusätzlich zur Farbe mit einem weiteren Gestaltungsmittel arbeiten, etwa Grafiken, Typografie oder unterschiedlichen Flaschenformen. So ist sichergestellt, dass Menschen, die eins dieser Unterscheidungsmerkmale nicht erkennen können, durch ein anderes Orientierung erhalten. Denn gerade bei Produktverpackungen suchen wir in den Regalen immer wieder nach gestalterischen Elementen, die uns bei der Orientierung unterstützen. Das können Markenfarben oder -Logos sein, die mir vertraut sind, das können Formen sein (Eine Milchtüte beispielsweise hat immer die gleiche Form, im Gegensatz zum Haferdrink), Siegel, oder einfach der Ort im Regal.

Hier noch einige Tipps, die man beachten sollte:

• Achtet gleich bei der Erstellung von Farbpaletten an ausreichen große Kontraste.
• Durch ausreichend große Kontraste lassen sich auch Schlagschatten vermeiden.
• Nutzt Kontrastchecker wie stark
• Es gibt unterschiedliche Varianten von Farbenblindheit. Jedoch haben 9% der Männer und 0,5% der Frauen die Schwierigkeit, Grün und Rot zu unterscheiden. Nutzt diese Farben also am besten nicht gemeinsam.
• Vermeidet Komplementärkontraste. Also kein Gelb mit Blau, Rot mit Grün und so weiter. Auch bei gesunden Augen können diese Flimmern hervorrufen.
• Nutzt weitere Stil- oder Strukturelemente wie Illustrationen oder Icons, die farbunabhängig erkannt werden können.

Man sieht also: Es ist nicht schwierig, barrierefreie Websites zu bauen. Wenn man Barrierefreiheit zu Beginn des Prozesses mitdenkt, schließen sich Barrierearmut und richtig cooles Design nicht aus. Ganz im Gegenteil: Gestaltung wird noch stärker aus der Nutzerbrille gesehen und kann dadurch nur besser werden. Denn Websites sollen zur Interaktion einladen. Und je intuitiver das für alle möglich ist, desto besser.