Barrierefreie Farben und Kontraste für das Corporate Design

Nicht selten entsteht erst das Corporate Design und dann die Probleme: Menschen klagen darüber, dass sie das Logo und andere Gestaltungselemente erst aus einer gewissen Nähe erfassen können oder dass die Texte auf der Website wirklich anstrengend zu lesen sind. Oft trägt die Farb- und Kontrastwahl daran eine Schuld oder zumindest Mitschuld. Im Nachhinein kann man ein Corporate Design aber nur mühsam korrigieren, wenn entsprechend gestaltete Kommunikationsmaßnahmen bereits im Umlauf sind. Mit ein paar Tipps lassen sich viele Probleme im Vorhinein vermeiden.

• Für die Teilhabe von Menschen mit Sehschwächen ist eine barrierefreie Farbwahl elementar.
• Die Benutzerfreundlichkeit (»Usability«) einer Website oder App wird allgemein erhöht, denn vor allem auf kleinen oder schlechten Displays punktet ein barrierefreies Gestaltungskonzept.
• Ausreichende Kontraste erhöhen auch die Lesbarkeit bei ungünstigen Lichtverhältnissen, beispielsweise bei starker Sonneneinstrahlung auf das Display.
• Das Unternehmen macht seine Informationen zugänglicher und erhöht damit seine Reichweite.

Gerade Webdesigner*innen sind manchmal bemüht, das Farbspektrum einer Website möglichst harmonisch und »soft« zu gestalten. Manchmal wird die Lesbarkeit dabei aus den Augen verloren und die Zeit, die sich die Besucher*innen dabei für das Lesen der Inhalte nehmen müssen, steigt. Wie einleitend angedeutet, ist es ungünstig, wenn beim Design von Idealsituationen ausgegangen wird. Sobald Sonnenlicht direkt auf das Smartphonedisplay trifft, sind die Inhalte umso schwerer zu erfassen. Designer*innen sollten ihr Augenmerk auch darauf richten, dass im zunehmenden Alter das Sehvermögen stark abnimmt und viele weitere Menschen mit einer Sehbeeinträchtigung leben. Im schlimmsten Fall wandern Besucher*innen direkt wieder ab, die Absprungrate schellt nach oben.

Es gibt gute Orientierungshilfen, um diesen Fällen vorzubeugen. Allgemein beschreibt Kontrast den Unterschied zwischen Vorder- und Hintergrundfarbe. Das Ideal ist schwarze Schrift auf weißem Hintergrund oder umgekehrt. Zwischen diesem Ideal und einer eingeschränkten Lesbarkeit bleibt ein Raum für Individualität, die »Web Content Accessibility Guidelines (WCAG) 2.1« machen ihn für eine barrierefreie Website sogar messbar. Jede dieser Richtlinien für Barrierefreiheit hat den Anspruch, prüfbar zu sein. Dabei wird in Formeln ein Kontrastverhältnis zwischen 1:1 (beispielsweise weiß auf weiß) bis 21:1 (schwarz auf weiß) ermittelt. Der Kontrastchecker von barrierefreies.design hilft dabei, das Kontrastverhältnis aus zwei Farben im RGB-Modell zu ermitteln. Praktischerweise sind die Mindestwerte ebenfalls in den verschiedenen Stufen der WCAG aufgeführt. In der Konformitätsstufe AA wird ein Mindestverhältnis von 4,5:1 bei einer Schriftgröße unter 24 Punkt beziehungsweise 18,5 Punkt in einer fetten Schrift vorgesehen. Bei größeren Schriftgrößen ist ein Kontrastverhältnis von 3:1 ausreichend. Von Bildern als Texthintergrund ist unter dem Aspekt der Barrierefreiheit abzuraten, weil dabei meist kein ausreichender, gleichmäßiger Kontrast gegeben ist.

Bei Printprodukten und digitalen Medien gilt gleichermaßen, dass bei Negativtext, also weißer Schrift auf schwarzem Hintergrund, die Schriftgröße und die Laufweite für die Lesbarkeit erhöht werden sollte.

Wenn wir über eine barrierefreie Farbwahl reden, darf die Berücksichtigung der Sehschwächen nicht fehlen. Allen voran geht die Rot-grün-Sehschwäche: Neun Prozent der Männer und 0,5 Prozent der Frauen sind schätzungsweise davon betroffen. Sie haben Probleme, rote und grüne Gestaltungselemente voneinander zu unterscheiden. Seltener sind die Blaugelb-Schwäche und die komplette Farbenblindheit (Achromatopsie), bei der Betroffene nur Graustufen unterscheiden können.

Weil das für Menschen ohne Farbenfehlsichtigkeit schwer nachzuempfinden ist, gibt es Tools zur Simulation von Farbschwächen. Damit lässt sich der Blick auf das eigene Gestaltungsmaterial mit verschiedenen Sehschwächen leicht simulieren.

Übrigens reagieren auch gesunde Sehorgane auf Rot-grün-Kontraste empfindlich: Bei gleicher Helligkeit der Farben entsteht vor dem Auge ein Flimmern. Auch andere Komplementärkontraste sollte man deshalb meiden.

Selbst bei guten Farbkonzepten kann es problematisch sein, wenn eine Farbe der Informationsträger ist. In Liniendiagrammen ist es beispielsweise für sehbeeinträchtigte Menschen nicht leicht, die unterschiedlich gefärbten Linien einzeln zu deuten. Zusätzlich könnten in diesem Fall die Messpunkte in den Liniendiagrammen mit unterschiedlichen Formen (Kreis, Quadrat, Dreieck …) hervorgehoben werden.

Oft werden auch die Ampel-Farben Rot, Orange und Grün in Benutzeroberflächen eingesetzt, beispielsweise um valide oder invalide Formulareingaben zu kennzeichnen. Grundsätzlich bringen semantisch-korrekt eingesetzte Farben (Beispiel: Grün entspricht Bestätigung, Rot entspricht einem Fehler) einen Mehrwert in der Benutzerfreundlichkeit. Ratsam ist jedoch, zusätzlich mit Symbolen oder schriftlichen Meldungen zu arbeiten, damit die Information auch für Menschen mit einer Farbschwäche erkennbar ist. Die Farbe als Informationsträger sollte immer um weitere Gestaltungsmerkmale ergänzt werden, weil die Farbe alleine missverständlich ist.

Im Kern geht um digitale Teilhabe, aber auch jedes Unternehmen träumt eigentlich davon, die eigenen Inhalte zugänglicher zu machen. Barrierefreies Design ist praktisch keine Einschränkung von »Design«, sondern macht es vielleicht erst zu einem »guten Design«, wenn es für mehr Menschen in mehr Situationen besser funktioniert. Deshalb ist es ratsam, Aspekte der Barrierefreiheit in die Gestaltung des Corporate Design einzubeziehen. Bei einem bestehenden Corporate Design hilft ein Redesign, Relaunch oder Rebranding.