direkt zum Inhalt

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.

So funktioniert’s

Wählen Sie die Farben mit einem Klick auf das jeweilige Farbfeld aus. Ein Vorschaufeld mit Blindtexten visualiert die Farbkombination. Die Auswertung erfolgt automatisch nach der Farbwahl.

Kontrastverhältnis 1:1

  • : Für große Schrift (siehe Punkt 1) schreiben die WCAG 2.0 im Level AA einen Kontrast von mindestens 3:1 vor.
  • : Für große Schrift (siehe Punkt 1) schreiben die WCAG 2.0 im Level AAA einen Kontrast von mindestens 4.5:1 vor.
  • : Für normalgroße Schrift (siehe Punkt 2) schreiben die WCAG 2.0 im Level AA einen Kontrast von mindestens 4.5:1 vor.
  • : Für normalgroße Schrift (siehe Punkt 2) schreiben die WCAG 2.0 im Level AAA einen Kontrast von mindestens 7:1 vor.
  • : Für grafische Objekte und Teile der Bedienoberfläche (siehe Punkt 3) schreiben die WCAG 2.1 im Level AA einen Kontrast von mindestens 3:1 vor.
  1. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
  2. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich.
  3. ✓ ⚠ ❤

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.

Was Sie außerdem beachten müssen

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.

Mit barrierefreiem Webdesign mehr Menschen erreichen

Eine Projektanfrage? Ein kostenloser Kurztest Ihrer Webseite auf Barrierefreiheit? Etwas anderes? Nehmen Sie den Kontakt für eine persönliche Beratung auf:

Beratung vereinbaren

Wenn das Farbkonzept auf Barrierefreiheit abgestimmt ist

… 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.