Farben und Kontraste prüfen

Nicht selten klagen Anwender*innen darüber, dass die Farben einer Webseite schwer zu unterscheiden sind. Dabei liegt dem nicht zwangsläufig eine Sehbeeinträchtigung zugrunde. Schon ungünstige Lichtverhältnisse, beispielsweise bei direkter Sonneneinstrahlung auf das Smartphone oder das spiegelnde Laptop-Display, erschweren die Lesbarkeit ungemein.

Es ist deshalb wichtig, dass Designer*innen bei ihrer Arbeit nicht selbstverständlich von Idealsituationen ausgehen: Sie selbst haben meist keine Einschränkung und verfügen über topaktuelle Geräte. Die Arbeit der Designer*innen setzt ferner gute Beleuchtungsverhältnisse voraus.

Mit diesem Werkzeug gibt es eine Abhilfe: Präzise wird der Kontrast zwischen Vorder- und Hintergrundfarbe aus einer Formel berechnet, welche den Web Content Accessibility Guidelines (WCAG) entspringt. Automatisch wird die Konformität mit den verschiedenen Levels der WCAG berechnet. Für die Teilhabe von Menschen mit Sehschwächen ist eine barrierefreie Farbwahl elementar.

Ein Tipp: Der Browser Google Chrome verfügt im Farbfeld über eine Farbpinzette. Wenn Sie zwei Browserfenster nebeneinander legen, können Sie direkt die Farbwerte aus der anderen geöffneten Webseite übernehmen.

Designtrends folgend sind einige Webseiten besonders harmonisch und »soft« gestaltet. Die Lesbarkeit wird dabei aus den Augen verloren – mit vielen negativen Folgen. Einigen Menschen sind die Informationen nicht oder kaum zugänglich, die Bedienbarkeit der Webseite leidet darunter. Im schlimmsten Fall wandern einige Besucher*innen wieder ab, die Absprungrate schellt nach oben. Barrierefreiheit ist auch ein wirtschaftlicher Faktor.

Das Ideal ist schwarze Schrift auf weißem Hintergrund oder umgekehrt. Aber selbst mit den strengsten Kritierien der WCAG bleibt ein großer Spielraum für einen individuellen und einprägsamen Internetauftritt.

Neben den Kontrasten, die für die WCAG-Konformität vorausgesetzt werden, gibt es noch weitere Empfehlungen. So darf im Rahmen einer barrierefreien Farbwahl die Berücksichtigung von Farbenfehlsichtigkeiten nicht fehlen. Neun Prozent der Männer und 0,5 Prozent der Frauen sind schätzungsweise von der Rot-grün-Sehschwäche betroffen. Diese Menschen haben Schwierigkeiten, rote und grüne Gestaltungselemente voneinander zu trennen. Deutlich seltener ist die Blaugelb-Sehschwäche oder die komplette Farbenblindheit, die sogenannte Achromatopsie. Das Gestaltungsmaterial kann mit verschiedenen Farbenfehlsichtigkeiten simuliert werden.

Auch gesunde Sehorgane reagieren auf Rot-grün-Kontraste empfindlich. In selber Helligkeit der Farben kann ein Flimmern vor den Augen begünstigt werden. Komplementärkontraste sollten insgesamt mit Vorsicht eingesetzt werden, weil sie oft als unangenehm empfunden werden.

Bei heller Schrift auf dunklem Hintergrund ist es der Lesbarkeit dienlich, die Laufweite der Schrift geringfügig zu erhöhen.

… muss es nur noch barrierefrei angewendet werden. Farben dürfen nicht der alleinige Informationsträger sein. So werden in Bedienoberflächen oft die Farben Rot oder Grün verwendet, um valide oder invalide Formulareingaben zu markieren. Grundsätzlich ist es ratsam, semantisch-passende Farben einzusetzen. Aber ohne einer zusätzlichen, schriftlichen Meldung ist diese Information für Menschen mit einer Farbenfehlsichtigkeit schlimmstenfalls gar nicht wahrnehmbar.

Eine besondere Herausforderung sind auch Diagramme. Wenn die Legende nur über unterschiedliche Farben funktioniert, ist das nicht barrierefrei. Gegebenenfalls können die Balken eines Diagramms direkt beschriftet werden. Unterschiedliche gefärbte Linien eines Liniendiagramms können beispielsweise besser voneinander abgegrenzt werden, wenn die Messpunkte mit unterschiedlichen Formen (Kreis, Quadrat, Dreieck, …) gekennzeichnet werden.