Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Kontrastreiche Farbwelten

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.

Freizeitler.de mit Rot-Grün-Blindheit gesehen

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.

Ergebnisse eines Farbchecks

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

Kommentare

Stephan
am 06.08.2009 - 16:44

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

Permanenter Link

Andy Pillip
am 07.08.2009 - 19:59

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

Permanenter Link

domingos
am 15.08.2009 - 10:37

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.

Permanenter Link

BrigitteB
am 24.08.2009 - 18:01

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.

Permanenter Link
Nils Pooker

Nils Pooker (Webkraut)
am 24.08.2009 - 19:04

@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.

Permanenter Link

Die Kommentare sind geschlossen.