Kontrast von Farben berechnen
Häufig klagen Menschen darüber, dass die Farben auf Websites schwer zu unterscheiden sind. Dabei liegt dem nicht zwangsläufig eine Sehbeeinträchtigung zugrunde. Schon ungünstige Lichtverhältnisse, etwa bei direkter Sonneneinstrahlung auf das spiegelnde Laptop-Display, erschweren die Lesbarkeit enorm. Webdesigner*innen haben meist keine Sehbehinderung, verfügen über moderne Geräte und arbeiten bei guten Beleuchtungsverhältnissen. Es ist aber wichtig, bei der Gestaltung nicht grundsätzlich von Idealsituationen auszugehen.
Mit diesem Kontrastrechner gibt es eine Abhilfe: Präzise wird das Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe berechnet. Automatisch wird anschließend die Konformität mit den verschiedenen Levels der WCAG geprüft.
So funktioniert’s: Betätigen Sie das Farbfeld, um den Farbwähler zu öffnen. Alternativ können Sie die RGB-Werte oder den Hexadezimal-Code eingeben. Über die Schaltflächen können Sie eine Farbpinzette öffnen oder den Hexadezimal-Code kopieren bzw. einfügen.
Kontrastverhältnis berechnen
Vordergrund
Hintergrund
Kontrastverhältnis 1:1
- : großer Text (1) im Level AA (3:1)
- : großer Text (1) im Level AAA (4,5:1)
- : normaler Text (2) im Level AA (4,5:1)
- : normaler Text (2) im Level AAA (7:1)
- : Nicht-Text-Kontrast (3) im Level AA (3:1)
- Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
- Bei jedem klugen Wort von Sokrates rief Xanthippe zynisch: Quatsch! Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich.
- ✓ ⚠ ❤
Der Kontrastrechner wurde überarbeitet! Entspricht er Ihren Erwartungen? Ihre Rückmeldung ist willkommen unter info@barrierefreies.design.
Die Level der WCAG
In der Auswertung dieses Werkzeugs zum Berechnen des Kontrastverhältnisses werden Ihnen verschiedene Konformitätsstufen, sogenannte Level, angezeigt. Diese Level zu kennen bildet die Grundlage für die Festlegung auf ein Mindestkontrastverhältnis:
Normaler und großer Text
In der Auswertung stoßen Sie auf die Einteilung in »normalen Text« und »großen Text«. Die WCAG (Web Content Accessibility Guidelines) legen in dem Kriterium 1.4.3 zwischen Text und Hintergrund bestimmte Kontrastverhältnisse fest, die abhängig von der Schriftgröße variieren. Das Ideal ist schwarze Schrift auf weißem Hintergrund oder umgekehrt. Aber selbst mit den strengsten Kritierien der WCAG bleibt ein großer Spielraum:
Der Nicht-Text-Kontrast
Etwas sperrig klingt der »Nicht-Text-Kontrast«. Er wird im Kriterium 1.4.11 der WCAG beschrieben und betrifft grafische Objekte und Teile der Bedienoberfläche:
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.
Bei heller Schrift auf dunklem Hintergrund ist es der Lesbarkeit dienlich, die Laufweite der Schrift geringfügig zu erhöhen.
Wenn das Farbkonzept auf Barrierefreiheit abgestimmt ist …
… dann muss es noch barrierefrei angewendet werden. Farben dürfen nicht der alleinige Informationsträger sein (WCAG-Kriterium 1.4.1). 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. Diese Menschen haben Schwierigkeiten, rote und grüne Gestaltungselemente voneinander zu trennen. Das Gestaltungsmaterial kann mit verschiedenen Farbsehschwächen 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.
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.
Dieses Werkzeug hilft, Zeit zu sparen?
Sehr gut!
Ich würde mich darüber freuen, wenn Sie die Weiterentwicklung unterstützen, damit dieses Werkzeug auch weiterhin allen Menschen zur Verfügung steht. Ohne Bannerwerbung, ohne Anmeldung, ohne Kosten.