Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Kontrastreiche Farbwelten

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. Henry Zeitler beleuchtet Möglichkeiten und Wege der farblichen Konzeption im Sinne des W3C (WCAG 2.0).

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 jeder zwölfte Besucher einer Internetseite an Farbfehlsichtigkeit.

So sehen Rot/Grün-Blinde mein Blog Freizeitler.de (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 18px (ohne Fettschrift) und kleiner 14px (fett geschrieben) ein Verhältnis 4,5:1 aufweisen, kleiner 18px (nicht fett geschrieben ) und größer 18px (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