UX Abo

Neuer Workshop: "UX Metrics - Erfolgsmessung im UX Design".

Zeigt her!
Close

Kontraste für barrierefreies Webdesign

Ein sehr wichtiger Faktor für barrierefreie Webauftritte sind die Farbkontraste und Helligkeitskontraste des Weblayouts. Die Kontraste spielen für alle Arten von Sehbehinderungen eine große Rolle, um jeglichen Content gut lesbar zu machen. Ich bin natürlich kein Augenexperte, versuche dennoch in barrierefreien oder -armen Webgestaltungen, diese Art von Einschränkungen zu berücksichtigen.

Farbkontraste

Farbkontraste sind besonders wichtig für alle Arten von Farbblindheit. Menschen die darunter leiden, haben wenig oder gar kein Farbempfinden. Es gibt viele Formen der Farbsehstörungen. Neben der Abneigung gegen Licht (Lichtscheuheit), verminderten Sehschärfe oder unwillkürliche Augenbewegungen gibt es Sehbehinderung die bestimmte Farben ausnehmen, das so genannte Zweifarbensehen. Am häufigsten gibt es eine gestörte Wahrnehmung von Grün. Unter Verwendung des Tools Colorblind Web Page Filter ist es möglich das Zweifarbensehen auf der Webseite zu testen:

Deuteranobie – Grünblindheit

Screenshot Deuteranobie

Protanobie – Rotblindheit

Screenshot Protanobie

Tritanobie – Blaublindheit

Screenshot Tritanobie

Helligkeitskontraste

Helligkeitskontraste dienen Marketingtechnisch meistens der Betonung von Texten oder Elementen. Der absolute Klassiker ist die Kombination von Schwarz und Weiß. Vorsicht vor starken Kontrasten, denn Menschen mit Lichtempfindlichkeit können Probleme mit hohen Kontrasten haben. Starke Kontraste können als zu grell empfunden werden. Deswegen ist es wichtig weniger starke Kontraste gut auszubalancieren. Schwache Kontraste können zum Beispiel zweckmäßig weniger relevanten Inhalt auszeichnen. Das ist für barrierefreie Webauftritte ebenso sinnvoll wenn eine gewisse Differenz eingehalten wird. Am einfachsten lässt sich der Helligkeitsunterschied testen, indem man die Webseite komplett in Grautöne umwandelt. Ich mache dies einfach in Photoshop, es gibt auch ein passendes Webservice mit dem Namen Greybit. Sind die Texte und Grafiken noch gut erkennbar?

Screenshot Helligkeit weiss

Als weiteren Helligkeitstest würde ich den Screenshot der Webseite invertieren, die hellen Farben in dunkle umwandeln und umgekehrt. Es gibt Sehbehinderte die mit einer invertierten Webseite leichter zu Recht kommen.

Screenshot Helligkeit schwarz

Zusammenfassend ist dies eines von vielen Kriterien einer barrierefreien Webseite. Ich veranstalte bei jedem meiner Webdesigns einen kleinen Kontrasttest, es sind 30 Minuten zusätzliche Zeitinvestition, die zu einem guten Webdesign dazugehören sollten.

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
Bild
Die drei Speaker:innen der Veranstaltung
Sonstiges – Blogbeitrag

UX Snacks Vol.09

That’s a wrap on UX Snacks 2024. Am 7. November hat die vierte und letzte Ausgabe in diesem Jahr stattgefunden und wir nehmen mit diesem Recap ganz viel positive UX-Energie mit ins neue Jahr. Und keine Angst: Schon bald verkünden wir die Daten für 2025.

Jetzt lesen

Interesse mit uns zu arbeiten?

Lass uns plaudern …

oder vereinbare gleich mit unserer CEO Susanne einen kostenlosen Termin.