Bei den Webkrauts gibt es einen netten Artikel zur Farbwahl in Webseiten. Dabei geht es um Barrieren. Einerseits gibt es reichlich viele Farbenblinde, andererseits können mangelnde Kontraste auch Nicht-Farbenblinden so manche Probleme bereiten. Von gewissen Farbkombinationen mal ganz zu schweigen, die auch für Normalsichtige das reinste Augenpulver sind.
Was ist nun eine gute Farbwahl? Zum Glück gibt es da Richtlinien und Vorgaben des W3C, nachlesbar in den WCAG 2.0. Da steht z.B. dass der Kontrast zwischen Vordergrundtext und Hintergrund bei einer Textgröße kleiner als 18px (das ist der Normalfall) ohne Fettschrift ein Verhältnis von 4.5:1 aufweisen soll.
Da habe ich nicht widerstehen können und habe meine Seite mal mit dem Farbtester bei snook.ca getestet. Und siehe da, Alles einwandfrei. Meine Seite entspricht bei der Farbkomposition problemlos WCAG AAA. Na, das ist doch was. Allerdings habe ich auch einige Zeit daran getüftelt.
Ein anderes Prüfungstool, das die Webkrauts erwähnen, versagt bei meiner Seite
allerdings völlig: Der Colorblind Web
Page Filter. Dieses Tool kann kein background-position, so dass
der Hintergrund oben statt unten positioniert wird. Bei der Gelegenheit wird dann
auch background-color vergessen. Noch schlimmer ist, dass
background-color auch im Hauptcontainer völlig vergessen wird, wodurch die
Schrift total unlesbar wird. Merkwürdigerweise funktioniert background-color
aber im Kopfcontainer und im Navigationscontainer. Da muss jedenfalls an dem Tool
noch Einiges nachgebessert werden. Aber es ist ja auch erst in der Entwicklung.
Was man an dem kleinen Screenshot von snook.ca aber auch sieht: So wirklich zugänglich ist diese Seite nicht. Die Ergebnistexte sind größer als der dafür vorgesehene Platz. das liegt daran, weil ich mir aufgrund meiner Sehschwäche die Standard-Textgröße größer gestellt habe. Das wird hier netterweise auch honoriert. Aber das gilt leider nur für den Text in der Ergebnisbox. Das gilt weder für den sonstigen Text (der mir viel zu klein ist), noch für den Platz, den der Ergebnistext hat. Also wird dieser Text abgeschnitten. Das Ergebnis muss ich raten. Bei dem Punkt "Contrast Ratio" kann ich nur lesen, dass er 19.Irgendwas sein muss. Ob diese "Contrast Ratio" nun 19.0 oder 19.9 ist, kann ich nicht erkennen. Im Quelltext steht's auch nicht drin, da die Zahlen nur per JavaScript eingefügt werden. Auch nicht unbeding zugänglich, wenn man JavaScript gesperrt hat.
Aber immerhin, das ist trotzdem ein Tool, das man als Webdesigner kennen und nutzen sollte, um Farbkombinationen zu wählen, die auch lesbar sind.
