UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Kontraste für barrierefreies Webdesign

6. Juni 2008, von stephan

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.
5 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
7. Juni 2008 um 10:47

Hallo Jürgen,
schau dir mal http://www.wob11.de/links/testwerkzeuge.html an, da gibt es eine ganze Fülle von Werkzeugen und Tools. Wie du sagst, eine halbe Stunde mehr Investition… die sich lohnt. Wäre für manche offizielle Seite von Städten & Gemeinden, Ämtern und Büros anzuraten, die Tools zu verwenden.
Gruß Claus

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
6. Juni 2008 um 15:17

Sag ich doch ;o) Benutze ich schon seit Jahren, was besseres gibt es kaum!

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
6. Juni 2008 um 11:38

cool. /saug, saug..

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
6. Juni 2008 um 11:35

Probier’s mal mit dem aDesigner von IBM.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close