Viele Webdesigner stellen leider immer noch das Erscheinungsbild einer Internetseite über Usability und Zugänglichkeit. So werden die Richtlininen des W3C für farbliche Konzeption, die in der WCAG 2.0 festgelegt wurden, häufig außer Acht gelassen.
Das Konzept
Internetseiten sollten natürlich immer barrierefrei gehalten werden. Internetseiten für »Träger öffentlicher Gewalt« (so heisst es im Amtsdeutsch) müssen sogar nach § 11 Barrierefreie Informationstechnik so gestaltet sein, dass sie von behinderten Menschen grundsätzlich uneingeschränkt genutzt werden können.
Das farbliche Konzept einer Internetseite ist ein wichtiger Bestandteil der Barrierefreiheit und sollte sich deshalb bereits in seiner Planungsphase an gewissen Richtlinien orientieren. Nicht nur das Layout und Design spielen eine wichtige Rolle, sondern auch – und vor allem – die durch Farben und Farbkontraste gewährleistete Usability und Zugänglichkeit (Accessibility). Statistisch gesehen leidet zum Beispiel jeder zwölfte Besucher einer Internetseite an Farbfehlsichtigkeit.
So sehen Rot/Grün-Blinde mein Blog (von dem fehlenden Umlaut mal abgesehen). Der Screenshot stammt vom Colorblind Web Page Filter.
Das W3C macht da mit der WCAG 2.0 (Web Content Accessibility Guidelines 2.0) klare Vorgaben. Der Kontrast zwischen Text im Vordergrund und seiner Hintergrundfarbe sollte bei einer Textgröße kleiner 18pt (ohne Fettschrift) und kleiner 14pt (fett geschrieben) ein Verhältnis 4,5:1 aufweisen, kleiner 18pt (nicht fett geschrieben ) und größer 18pt (bei Fettschrift) noch 3:1, um die AA Spezifikationen zu erfüllen. Für die AAA-Spezifikation beträgt die Ratio sogar 7:1 bzw. 4,5:1 (A, AA und AAA sind die Stufen der Konformität, mit denen die Zugänglichkeit einer Internetseite vom W3C bewertet wird). Text über gemustertem Hintergrund oder Bildern sollte dementsprechend höher kontrastiert werden. Texte und Schriften als Teil eines Logos oder mit rein dekorativem Charakter hingegen sind von diesen Bestimmungen ausgenommen.
Die Farbpalette steht also nach wie vor in vollem Umfang zur Verfügung, es muss aber immer darauf geachtet werden, welche Farbkombinationen man verwendet.
Farbbeispiele von snook.ca mit derselben Hintergrundfarbe. Links durchgefallen – rechts bestanden!
Die Praxis
Sollte ein Kunde auf die Verwendung seiner Hausfarben (CI/CD) bestehen, die diesen Kontrast erstmal nicht bieten, muss Aufklärungsarbeit geleistet und ein Kompromiss gefunden werden. Schmuckfarben für Textbausteine (Überschrift, Navigation, Hervorhebung o. ä.) sollten also von vornherein so angelegt werden, dass sie die Kontrastvorgaben erfüllen – vom Fliesstext natürlich ganz zu schweigen. Aber wie kann ich so etwas verlässlich verifizieren? Hier ist eine Auswahl von Helferlein:
- snook.ca – Colour Contrast Check
- Errechnet anhand einer Vordergrund- und Hintergrundfarbe den Kontrast und vergleicht mit der WCAG 2.0.
- WebAIM – Color Contrast Checker
- Als Alternative zu snook.ca
- Juicy Studio Accessibility Toolbar 1.5
- Als Toolbar für den Firefox
- Colorblind Web Page Filter
- Deine Website aus der Sicht eines Farbenblinden
- CheckMyColours
- Prüft aufgrund einer URL. Achtung: Befindet sich noch in der Testphase!
Fazit
Oftmals wird schon bei der farblichen Planung des Designs der Farbkontrast ausser Acht gelassen. Nach Abnahme durch den Kunden und Onlinestellung lässt sich das schwerlich wieder ändern. Der Webdesigner sollte deshalb dafür sensibilisiert werden, sämtliche Farben schon im Vorfeld auf die Spezifikationen des WCAG 2.0 zu prüfen und dahingehend anzupassen.
Weitere Quelle: STERN.DE: Surfen mit Sehbehinderung
Dieser Artikel erschien am 5. August 2009 bei den Webkrauts.
