Grafik/Farbkonzept/Farben und Kontraste
Text-Info
- 10min
- einfach
- Grundkenntnisse in
● HTML
● CSS
Ohne Zweifel stehen Sehbehinderte und Blinde vor den größten Barrieren, wenn sie mit dem Computer arbeiten und damit auch ins Internet wollen. Dies liegt daran, dass sie sich spezieller Hilfsprogramme wie Screenreader oder Bildschirmlupen (Screen magnifier) bedienen müssen. Aber auch Benutzer, die keine solchen technischen Hilfen benötigen, leiden häufig unter nicht optimal ausgesuchten Farben und zu geringen Kontrasten.
Die Gründe für solch einen Mangel an Benutzerfreundlichkeit liegen zum Teil an den individuellen Einschränkungen der Sehfähigkeit der Benutzer, weitaus häufiger aber an der suboptimalen Darstellung auf älteren Monitoren, kleinen Bildschirmen von Mobilgeräten gekoppelt mit schlechten Lichtverhältnissen bzw. übermäßiger Sonnenstrahlung am Standort des Benutzers:
Inhaltsverzeichnis
Kontrast[Bearbeiten]
Die W3C fordert einen ausreichend hohen Kontrast (lat für. Unterschied) zwischen Text und Hintergrund, damit er auch von Benutzern mit eingeschränkten Sehfähigkeiten erkannt werden kann.[1] Die Fähigkeit Texte mit geringen Kontrasten entziffern zu können, nimmt mit fortschreitendem Alter rapide ab. Auch wenn Texte mit ähnlichen Helligkeitswerten von Text und Hintergrund noch gelesen werden können, steigt doch die Lesedauer. Im Extremfall wandern Benutzer von der Webseite ab, ohne den gesamten Inhalt gelesen zu haben.
Viele Webdesigner versuchen in ihrem Farbkonzept eine perfekt farblich abgestimmte Webseite zu erstellen, vernachlässigen dabei jedoch die gute Lesbarkeit:
- snook.ca: Colour Contrast Check
- colorsontheweb: Color Contrast Analyzer
- Check my Colors
- wickline.org: Colorblind Web Page Filter
Farben[Bearbeiten]
Es leuchtet den meisten ein, dass rote Schrift auf grünem Hintergrund schwieriger zu erkennen ist als gelb auf blau oder schwarz auf weiß. Bei der Gestaltung von Webseiten sollte die Auswahl der Farben bestimmten Kriterien entsprechen.
- Die Farben sollten sich komplementär ergänzen. Eine Farbpalette aus aufeinander abgestimmten Farben wirkt sympathischer und stimmiger.
- adobe: KULER
- paletton: Color Scheme Designer
- Text und Hintergrund sollten einen hohen Kontrast aufweisen, um eine Überanstrengung der Augen zu vermeiden und die Aufmerksamkeit auf den Text zu lenken:
Farbenfehlsichtigkeit[Bearbeiten]
Auch die Farbwahrnehmung unterscheidet sich; Schätzungen besagen, dass bei 8 bis 10% der Männer eine Rot-Grün-Schwäche bis hin zur Rot-Grün-Blindheit vorliegt.[2] Menschen mit einer solchen Einschränkung haben Schwierigkeiten, zwischen bestimmten Farbtönen zu differenzieren, da die Zapfen für die Erkennung von roten, bzw. grünen Farben fehlen. Die beiden Farben werden nur als unterschiedliche Abstufungen von Brauntönungen erkannt.
Verwenden Sie lieber Helligkeitsabstufungen gegenüber Farbvariationen, da diese von Rot-Grün-Sehschwachen oft besser wahrzunehmen sind.
Viel seltener ist die Gelb-Blau-Sehschwäche, bei der die Rezeptoren für Blau fehlen.
Strategien zur Barrierefreiheit[Bearbeiten]
Einstellungen der Benutzer[Bearbeiten]
Sie (und die Benutzer Ihrer Webseiten) können Betriebsystem und Browser auf kontrastreiche Einstellungen umschalten.[3]
p {
background-color: black;
background-image: url(...);
color: white;
}
responsive Anpassung an Lichtverhältnisse[Bearbeiten]
Auch von Seiten des W3C und der Browser-Hersteller wird versucht, die aktuellen Lichtverhältnisse zu berücksichtigen.
Ursprünglich sollte der Helligkeitssensor der Kamera die Lichtverhältnisse überprüfen und dann eine Anpassung der Farbeinstellungen der Webseite´mit dem light-level in media queries und dem lightingDevice-Event ermöglichen.[4]
Mittlerweile ist man davon wieder abgekommen und lässt den Nutzer mittels prefers-color-scheme entscheiden, ob er einen Dark Mode bevorzugt.
Wie testet man die Seite auf Barrierefreiheit?[Bearbeiten]
Um eine erste Einschätzung der Barrierefreiheit zu bekommen, empfiehlt sich ein einfacher Test mit Ihrem Browser. In den Einstellungen von Standard-Browsern gibt es die Möglichkeit, die Anzeige von Grafiken auszuschalten. Wenn sich Ihre Webseiten auch bei ausgeschalteter Grafikfunktion des Browsers ohne Informationsverlust lesen lassen, können Webseiten auch von blinden und sehbehinderten Menschen genutzt werden.
Farbinvertierungs-Test[Bearbeiten]
In den Optionen für die Bildschirmdarstellung im Browser können Sie die Farbanzeige selbst einstellen (im Firefox unter
Einstellungen > Allgemein > Sprache und Erscheinungsbild > Farben
Wenn Sie als Extremfall die Farben auf Text = "weiß", Hintergrund = "schwarz" und Links = "gelb" einstellen, und dabei die Option zur Unterdrückung der Farben der Webseite aktivieren, dann muss die Seite noch lesbar sein.
Quellen[Bearbeiten]
- ↑ W3C: Web Content Accessibility Guidelines
- ↑ wikipedia: Rot-Grün-Sehschwäche
- ↑ Sozialnetz Hessen: Einfach Surfen - So macht Ihr Browser, was Sie wollen
- ↑ MDN: Using Lighting Events
Weblinks[Bearbeiten]
- J. E. Hellbusch: Barrierefreies Webdesign
- viget.com: Color Contrast for Better Readability
- webdesignerdepot.com: Fully Understanding Contrast in Design
- webdesignledger.com: The Principle of Contrast in Web Design
- alistapart.com: Easy Color Contrast Testing vom 09.04.2014
- tutsplus.com: An Introduction to Color Theory for Web Designers
- nngroup.com: Ensure High Contrast for Text Over Images vom 18.10.2015
Analyzer:
Web-Interface für alle Screen Reader:
- webformator: Das intelligente Tool für das Internet
