Die Farbgestaltung von Webseiten nimmt bei jeden Webauftritt einen wichtigen Stellenwert ein. Nicht nur, weil Informationen und Signale durch Farben übermittelt werden.

Da es in der Bevölkerung sehschwache und farbfehlsichtige Menschen gibt, aber auch der Anteil älterer Internetnutzer (50+) in den kommenden Jahren weiter wachsen wird und einige von ihnen altersbedingt an Sehschwächen, wie z.B. Alterssichtigkeit oder grauen Star leiden, ist es besonders wichtig, die Farbgestaltung den Bedürfnissen dieser Personengruppe anzupassen.

Vom Webprogrammierer wird das erwartet, ja sogar gefordert.

Schon deshalb, weil die BITV in den Anforderungen 2.1 bis 2.3 festlegt, dass Texte und Graphiken auch dann verständlich sein müssen, wenn sie ohne Farbe betrachtet werden.

Anforderung 2.1

Alle mit Farbe dargestellten Informationen müssen auch ohne Farbe verfügbar sein, z.B. durch den Kontext oder die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache.

Anforderung 2.2

Bilder sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.

Anforderung 2.3

Texte sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.

Zunächst aber ein kleiner Überblick der verschiedensten Arten von Farbsehstörungen. Es wird zwischen Farbsinnstörungen (Farbenschwachsichtigkeit) und den drei verschiedene Formen der Farbenblindheit unterschieden:

  • Monochromasie: völlige Farbenblindheit, es werden nur Graustufen und Schwarz/Weiß wahrgenommen
  • Dichromasie: Zweifarbensehen, herkömmlich als Farbenblindheit bekannt
    • Rotblindheit (Protanopie): da der L-Zapfen fehlt, kann die Farbe Rot nicht wahrgenommen werden (1% der Männer und 0,02% der Frauen)
    • Rot gestört (Protanomale): die Farbe Rot kann nur gestört wahrgenommen werden
    • Grünblindheit (Deuteranopie): da der M-Zapfen fehlt, kann die Farbe Grün nicht wahrgenommen werden (1% der Männer und 0,01% der Frauen)
    • Grün gestört (Deuteranomale): die Farbe Grün kann nur gestört wahrgenommen werden (4% aller Männer)
    • Blaublindheit (Tritanopie): da der S-Zapfen fehlt, kann die Farbe Blau nicht wahrgenommen werden (0,002% der Männer und 0,001% der Frauen)
    • Blau-Gelb gestört (Tritanomale): die Farben Blau-Gelb können nur gestört wahrgenommen werden (sehr selten)
  • anomale Trichromasie: anomales Dreifarbensehen, alle Zapfen sind vorhanden, jedoch weist einer ein falsches Spektrum auf

Darüber hinaus gibt es noch eine Reihe weiterer Augenleiden, die berücksichtigt werden müssen. Die oben erwähnte Alterssichtigkeit und der graue Star (Katarakt) sowie der grüne Star (Glaukom) sind nur einige, die ich hier nennen möchte.

Wie können nun die Webseiten farblich so gestaltet werden, dass sie auch für sehschwache und farbfehlsichtige Menschen erkennbar sind?

Von der Sache her ist das eigentlich kein Problem. Es sollten im Web Farben verwenden werden, die über eine ausreichende Helligkeit verfügen sowie den nötigen Kontrast nach W3C aufweisen. Die Farben müssen sich deutlich voneinander abheben.

Die Helligkeitsdifferenz wird entsprechend dem W3C mit der Formel

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

und die Farbdifferenz (Kontrast) mit folgender Formel ermittelt:

(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

Die Helligkeitsdifferenz zwischen Vorder- und Hintergrundfarbe sollte größer als 125 und der Kontrast zwischen Vorder- und Hintergrundfarbe sollte größer als 500 sein.

Doch nun genug geredet, jetzt zu einigen Beispielen, die den Unterschied verdeutlichen sollen:

Beispiel 1:

In diesem Beispiel sind ausreichend Kontrast und Helligkeit der Farben gegeben. Der Text hebt sich deutlich vom Hintergrund ab und das Kontrastergebnis ist auch noch bei Rot-, Grün- und Blaublindheit gewährleistet.

Textüberschrift

  • Vordergrundfarbe: #003F6D
  • Hintergrundfarbe: #F9F9F9
  • Kontrast: 575
  • Helligkeit: 200

So wird die Textüberschrift bei Farbfehlsichtigkeit wahrgenommen:

  • Textüberschrift

  • bei Monochromasie
  • Textüberschrift

  • bei Protanopie
  • Textüberschrift

  • bei Deuteranopie
  • Textüberschrift

  • bei Tritanopie

 

Beispiel 2:

Zwar ist hier ein ausreichender Kontrast vorhanden, die Helligkeit der Farben ist jedoch zu gering. Die Überschrift kann sich nicht vom dunklen Hintergrund abheben und scheint zu verschwimmen. Das Kontrastergebnis ist bei Rot-, Grün- und Blaublindheit nicht mehr gewährleistet.

Textüberschrift

  • Vordergrundfarbe: #FF0411
  • Hintergrundfarbe: #00B0A0
  • Kontrast: 575
  • Helligkeit: 41

So wird die Textüberschrift bei Farbfehlsichtigkeit wahrgenommen:

  • Textüberschrift

  • bei Monochromasie
  • Textüberschrift

  • bei Protanopie
  • Textüberschrift

  • bei Deuteranopie
  • Textüberschrift

  • bei Tritanopie

 

Beispiel 3:

Hier ist eine ausreichende Helligkeit vorhanden, der Kontrast der Farben ist aber zu gering. Die Überschrift kann sich nicht stark genug vom hellen Hintergrund abheben. Das Kontrastergebnis ist bei Rot-, Grün- und Blaublindheit nicht mehr gewährleistet.

Textüberschrift

  • Vordergrundfarbe: #B34E00
  • Hintergrundfarbe: #FFECD8
  • Kontrast: 450
  • Helligkeit: 140

So wird die Textüberschrift bei Farbfehlsichtigkeit wahrgenommen:

  • Textüberschrift

  • bei Monochromasie
  • Textüberschrift

  • bei Protanopie
  • Textüberschrift

  • bei Deuteranopie
  • Textüberschrift

  • bei Tritanopie

 

Beispiel 4:

Hier ist weder ein ausreichender Kontrast noch eine ausreichende Helligkeit vorhanden. Die Überschrift kann sich nicht vom hellen Hintergrund abheben und scheint im Hintergrund unterzugehen. Das Kontrastergebnis ist bei Rot-, Grün- und Blaublindheit nicht mehr gewährleistet.

Textüberschrift

  • Vordergrundfarbe: #72841F
  • Hintergrundfarbe: #C8E4C4
  • Kontrast: 347
  • Helligkeit: 100

So wird die Textüberschrift bei Farbfehlsichtigkeit wahrgenommen:

  • Textüberschrift

  • bei Monochromasie
  • Textüberschrift

  • bei Protanopie
  • Textüberschrift

  • bei Deuteranopie
  • Textüberschrift

  • bei Tritanopie

 

Die Helligkeits- und Kontrastwerte können sowohl online als auch offline berechnet werden. Hier einige Internetseiten:

  • Juicy Studio
  • Hier kann die Vorder- und Hintergrundfarbe eingegeben werden. Es werden dann die entsprechenden Werte ermittelt und an einem Textbeispiel ausgegeben.
  • Vischeck
  • Hier wird simuliert, wie die eigene Seite von farbfehlsichtigen Menschen wahrgenommen wird. Dazu muss die URL der eigenen Seite eingegeben und die Art der Fehlsichtigkeit ausgewählt werden.

Auf der folgenden Seite können diverse Tools heruntergeladen werden:

  • Web Accessibility Tools Consortium [WAT-C]
  • Hier stehen diverse Tools zur Verfügung, u.a. auch die deutsche Version des Colour Contrast Analyser 1.1, mit dem Ihr offline arbeiten könnt (ganz unten auf der genannten Seite).

Die Eingabemaske des Color Contrast Analyser

Ich verwende den Colour Contrast Analyser, weil dieser alles zusammenfasst was die obengenannten Internetseiten einzeln erledigen.

Mit der Pipette kann im linken Bereich bspw. die Vorder- und Hintergrundfarbe ausgewählt werden. Die Ausgabe des Kontrastergebnisses bei Farbblindheit erfolgt im rechten Bereich (Bild links).

Simulation der Seiten bei Farbblindheit

Desweiteren zeigt dieses kleine Programm, wie Programme und Seiten bei Farbblindheit wahrgenommen werden. Dazu wird im linken Bereich unter “Fenster wählen” einfach ein Eintrag ausgewählt. Ich habe das mal mit meiner Startseite gemacht und so sieht das Ergebnis bei Deuteranopie aus (Bild rechts).

Weiterführende Informationen zu diesem Thema sind unter folgenden Links zu finden: