Webkrauts: Für mehr Qualität im Web.

Artikel

Kontrastreiche Farbwelten

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

Zum Autor

Henry Zeitler ist gelernter Mediengestalter und arbeitet als Webproducer in Düsseldorf. Barrierefreiheit, Semantik und Codeoptimierung haben sich zu seiner Leidenschaft entwickelt, die über das berufliche Engagement hinaus geht. Unter Freizeitler.de veröffentlicht er Experimente und Erkenntnisse.

Info:

Kontrastreiche Farbwelten ist Beitrag Nr. 564

Autor:

Henry Zeitler am 5. August 2009 um 07:00

Kategorie:

Artikel

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   Hey,

   sehr interessantes und großes Thema, das leider unterschätzt wird. Unabhängig von dem wichtigen Aspekt der Accessibility – nicht nur für Menschen mit Handycap – spielt die Farbgestaltung insbesondere bei der Usability eine große Rolle.

   So können A/B Tests bzgl. der Farbe bei Landingspages zu einer deutlichen Steigerung der Conversionrate führen. Wir haben dabei, nicht nur mit [die Red.: kostenlose Werbung entfernt], bereits ein wenig herumgespielt, haben für uns festgestellt, dass die Farben, die "Standard-YAML" sind, für uns am Besten funktionieren.

   Ich wollte dem Artikel nur einmal den Aspekt für Landingpage- / Conversionoptimierung beifügen.

   Freue mich auf mehr und bessere Meinungen
   Gruss Stephan

   Kommentar von Stephan - 6. August 2009 um 16:44

2. 2.
   

   Danke für die Helferlein.

   Allerdings finde ich, dass solche Erweiterungen für Firefox keinen Sinn machen, sondern eher dort zur Verfügung stehen sollten, wo sie im Arbeitsprozess benötigt werden: bei der Gestaltung im Bildbearbeitungsprogramm.

   Gibt es denn keine schönen Erweiterungen für GIMP oder Photoshop, um dort z.B. den Kontrast zwischen Vorder- und Hintergrundfarbe angezeigt zu bekommen?

   Grüße aus Trondheim

   Kommentar von Andy Pillip - 7. August 2009 um 19:59

3. 3.
   

   Ich glaube, die WCAG 2 ist hierzulande ziemlich unbekannt, geschweige denn, in deutsche Richtlinien umgesetzt. Ich habe zumindest bisher nicht gehört, dass die BITV entsprechend aktualisiert wurde.

   Kommentar von domingos - 15. August 2009 um 10:37

4. 4.
   

   Sehr wichtig: Farbpaletten schon beim Screendesign auf Kontrast testen. Im Nachhinein beisst man sich die Zähne daran aus, wenn die Farben nicht den Anforderungen entsprechen. Siehe meine Fallstudie http://www.bit-informationsdesign.de/blog/farbkontraste

   Und übrigens: Große Schrift sind 18pt bzw. 14pt bold. Punkt, nicht Pixel. Eine Umrechnungstabelle dafür suche ich noch.

   Kommentar von BrigitteB - 24. August 2009 um 18:01

5. 5.
   

   @Brigitte

   Hier gibt die Working Group Hinweise:
   http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html

   Dort unter "Key Terms":

   Note 3: The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings.

   Kommentar von Nils Pooker - 24. August 2009 um 19:04

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.