Farben auf barrierfreien Webseiten
Pfad: Startseite / Entwickler / Layout / Farbwahl
Die richtige Farbwahl ist auch bei Webseiten sehr wichtig. Der folgende Artikel bietet Ihnen Informationen zu häufig
auftretenden Farbenfehlsichtigkeiten und einigen Grundsätzen die Sie im Umgang mit Farben auf Webseiten beachten sollten.
Erläuterung zu Farbfehlsichtigkeiten
Die menschliche Netzhaut des Auges enthält drei unterschiedliche Fotorezeptoren, die als Zapfen bezeichnet werden. Diese
spezialisierten Nervenzellen sind für die Farbwahrnehmung verantwortlich. Im Gehirn werden verschiedene Rezeptoren in Verbindung
mit Licht angeregt, wodurch der Sinneseindruck für eine bestimmte Farbe entsteht.
- S-Zapfen (Blaurezeptoren) decken den Blau-Bereich ab.
- M-Zapfen (Grünrezeptoren) decken den Grün-Bereich ab. Sie sind genetisch eng mit den L-Zapfen verwandt und sind oft der Auslöser
bei Farbfehlsichtigkeiten.
- L-Zapfen (Rotrezeptoren) decken den Rot-Bereich ab.
Menschen mit Farbenfehlsichtigkeit haben einen Defekt an mindestens einem dieser Zapfentypen. Entsprechend der Farbenlehre kommt es
dadurch zu Fehlern bei der Erkennung der Grundfarbe und der daraus gemischten Farben.
- Monochromaten:
- Es gibt nur einen funktionierenden Zapfentyp.
- Dichromaten:
- Es gibt zwei funktionierende Zapfentypen. Das bekannteste Beispiel hierfür ist die Rot-Grün Sehschwäche (Protanopie oder
Deuteranopie) von der in westlichen Ländern zwischen 4 und 8% aller
Männer und 0,4 bis 1% der Frauen betroffen sind. Deutlich seltener tritt hingegen die Blau-Gelb Sehschwäche (Tritanopie) auf.
- Achromaten:
- Wenn kein Zapfentyp funktioniert, spricht man von einer kompletten Farbenblindheit.
Farbenblinde Menschen sind besonders blendungsempfindlich und sehen am Tag nur mit einem Zehntel der Sehleistung. Hiervon
sind nach Schätzungen 0,03% der Bevölkerung betroffen.
Bei Dichromaten gibt es Schwierigkeiten mit der Wahrnehmung von Farben des defekten oder fehlenden Zapfentyps:
- Protanopie (rot):
- Verwechslungen bei Rot, Gelb, Braun und Grün, sowie bei der Unterscheidung von Violett und Blau; Dunkelrot und Schwarz können ebenfalls
nicht unterschieden werden
- Deuteranopie (grün):
- gleich wie bei der Protanopie; Dunkelrot und Schwarz werden jedoch nicht verwechselt
- Tritanopie (blau):
- Verwechslungen zwischen Rot und Orange, Blau und Grün, Gelbgrün und Grau sowie Violett und Hellgelb
Was muss man bei Farben auf Webseiten beachten?
Neben Menschen mit Farbfehlsichtigkeiten betrifft die Wahl der Farben, Kontraste und ihre jeweilige Verwendung natürlich auch
alle anderen Besucher. Es ist für die Augen sehr anstrengend Texte auf einem Monitor zu lesen, da die meisten Monitore stark flackern
(auch wenn man das beim Arbeiten nicht bemerkt) und Blendungen sowie Spiegelungen auftreten. Beachten Sie daher die folgenden Punkte:
- Vermeiden Sie komplementäre Farbkombinationen und Kombinationen die bei Farbfehlsichtigkeiten zu Problemem führen
(zum Beispiel: rot / grün!)
- Vermeiden Sie Farbkombinationen die blendungsempfindliche Besucher stören können. Schwarzer Text auf reinweißem Hintergrund
blendet sehr und strengt die Augen an. Nutzen Sie statt reinweiß lieber eine leichte Farbtönung. Verzichten Sie auf grelle
Farben.
- Erstellen Sie Unterscheidungen nicht nur durch Farbänderungen. Der Besucher sollte den Unterschied zwischen einem normalen
Link und einem Link auf dem sich der Fokus befindet immer deutlich erkennen. Geben Sie ihm daher zusätzlich zur Farbe
noch ein farbunabhängiges Element, das sich ändert (zum Beispiel: Unterstreichungen, Rahmen, Fettdruck, Kursiv).
- Achten Sie auf deutliche Kontraste und Helligkeitsunterschiede zwischen Hintergrund und Textfarbe.
- Bedenken Sie, dass blinde oder farbfehlsichtige Nutzer mit Handlungsangaben die nur von Farben abhängen (zum Beispiel:
Klicken Sie zur Bestätigung auf den grünen Button
) nichts anfangen können. Vermeiden Sie daher Aktionen die nur
von Farben abhängig sind.
- Weisen Sie Bildern möglichst eine Hintergrundfarbe statt Transparenz zu. Menschen mit Sehschwächen nutzen gerne
eigene Stylesheets, mit denen Sie die Farben der Webseite entsprechend Ihren Bedürfnissen
überschreiben. Es könnte passieren, dass Bilder nicht mehr gut sichtbar sind, da die Hintergrundfarbe plötzlich zu ähnlich ist.
- Vermeiden Sie (starke) Musterungen oder Farbverläufe beim Texthintergrund. Sie lenken unnötig ab und erschweren das Lesen.
Die Initiative Web for All bietet den Farbkontrast-Analyzer
kostenlos an. Diese Programm testet, ob der gewählte Farbkontrast und die Farbhelligkeit ausreichend ist.
Testhilfen:
Infoseiten zur Farbenlehre:
Quellen zur Farbfehlsichtigkeit:
zum Seitenanfang
