9.9    Farbe und Usability 

Dem Thema Usability wird in diesem Buch ein eigener Abschnitt gewidmet, siehe Kapitel 3, »Konzeption und Strategie«. Aber bei der Farbgestaltung und speziell bei der Textfarbe spielt die Farbgebung eine so große Rolle, auch in puncto Barrierefreiheit, dass hier noch ein eigener Abschnitt erfolgen muss.

Abbildung 9.134    Bei Apps wird es oft noch deutlicher als bei Webseiten: Eindeutige klare Farbgebung erleichtert die Bedienung von Interfaces, mobile-patterns.com.

Die Farbgestaltung trägt nämlich einen nicht unerheblichen Teil zur Bedienbarkeit einer Webseite bei. So kann durch geschickte Farbwahl der Elemente die Orientierung erleichtert werden. Wichtige, elementare Inhalte wie beispielsweise die Hauptnavigation lassen sich unter anderem durch entsprechende Farbwahl herausstellen. Inhaltlich gleiche Elemente sollten durchgehend in der gleichen Farbe dargestellt werden. Inhaltliche Unterschiede können durch klar unterscheidbare Farben betont werden.

Um Informationen aufzunehmen, ist vor allem die Lesbarkeit des Textes entscheidend. Hier kommt es auf den Kontrast zwischen Hintergrund- und Textfarbe an. Es sollte ein hoher Hell-Dunkel-Kontrast vorherrschen. Je geringer der Kontrast, umso unleserlicher wird der Text.

Abbildung 9.135    Sieht zwar nett aus, aber durch den geringen Hell-Dunkel-Kontrast ist der Text schwer zu lesen (blogst.de).

Schwarzer Text auf weißem Hintergrund als stärkster Hell-Dunkel-Kontrast ist allerdings auch nicht die beste Variante, zumindest auf Bildschirmen. Dieser Kontrast ist, gerade weil er so hoch ist, auf die Dauer unangenehm bzw. ermüdend für die Augen. Als mögliche Varianten lässt sich der Hintergrund leicht abdunkeln oder der Text leicht aufhellen, um eine bessere Lesbarkeit zu gewährleisten.

 

9.9.1    Hürden bei der Farbwahrnehmung 

Zur Usability einer Webseite gehört auch die Farbwahrnehmung, denn ein nicht zu unterschätzender Prozentsatz der Bevölkerung hat eine zumindest eingeschränkte Farbwahrnehmung. Dies ist deshalb eine Herausforderung, da Webdesigner in der Regel nicht an einer Farbsehschwäche leiden.

Abbildung 9.136    Beim Online-Tool Contrast Ratio wird während der Eingabe der Farbwerte der Farbkontrast nach WCAG 2.0-Richtlinien bewertet. Sehr hilfreich! http://leaverou.github.io/contrast-ratio/

Es gibt verschiedene Formen von Farbsehschwächen. Die vollständige Farbenblindheit, bei der die Betroffenen nur noch Grautöne sehen, ist sehr selten anzutreffen. Ein deutlicher Hell-Dunkel-Kontrast hilft dann, die verschiedenen Elemente wahrzunehmen.

Die Rot-Grün-Sehschwäche | Wesentlich häufiger kommt die Rot-Grün-Sehschwäche vor, die auch oft als Rot-Grün-Blindheit bezeichnet wird. Ein Phänomen, das wohl vor allem Männer betrifft (8 % der Männer haben zumindest ein eingeschränktes Farbsehen). Die Betroffenen können Violett nicht von Blau unterscheiden und verwechseln Rot, Gelb, Braun und Grün miteinander.

Webseiten sollten natürlich im Idealfall so gestaltet sein, dass sie keine unnötigen Barrieren darstellen bzw. diese abbauen. Dazu gehört eben auch, dass möglichst viele Besucher die Farben und die Farbwirkung der Webseite wahrnehmen können. Schaut man sich seine Screendesigns mit den Augen eines Betroffenen mit einer Farbsehschwäche an, so kann man schnell enttäuscht sein. Denn möchte man nicht die Webseite nur in Schwarz-Weiß-Grau-Tönen erscheinen lassen, wird es immer für bestimmte (wenige) Personen Einschränkungen geben. So weit muss man aber nicht gehen. Benutzerunfreundlich wäre die Webseite erst, wenn mit den Farben bestimmte Bedeutungen oder Funktionen verknüpft sind, die Betroffene eben nicht erkennen können.

Einen roten Button auf grünem Hintergrund sollte man also aus zwei Gründen vermeiden: zum einen aus ästhetischen Gründen, denn direkt übereinander erzeugen Komplementärfarben ein Flimmern, und zum anderen, um Personen mit Farbsehschwächen nicht unnötig einzuschränken.

Für das Screendesign ist also Folgendes wichtig:

• Objekte oder Funktionen, die unbedingt unterschieden werden müssen, um z. B. die Seite zu bedienen (Navigation) oder eine bestimmte Aufgabe zu lösen, sollten sich nicht nur durch ihre Farbgebung unterscheiden. Neben einer Farbgebung sollte also im Idealfall mindestens ein weiteres Codierungsschema vorhanden sein, wie beispielsweise Rahmen, Größe, Platzierung etc.

• Ein klarer Hell-Dunkel-Kontrast hilft eigentlich immer – übrigens auch Anwendern, die nicht unter einer Farbsehschwäche leiden, aber vielleicht bei schlechtem Umgebungslicht lesen.

• Auch das Unterstreichen von Links kann dann wieder Bedeutung gewinnen, wenn sich für den Betroffenen die Linkfarbe von der Textfarbe nicht unterscheidet.

Abbildung 9.137    Hilfreiches Tool: Check My Colours. URL eingeben und die Seite analysieren lassen, ob die Farbkontraste nach W3C-Richtlinie okay sind! checkmycolours.com

Also, ist die Farb-Usability für Menschen mit eingeschränktem Farbsehvermögen optimiert, dann erfreut dies auch alle anderen Anwender!

Um zu testen, ob die eigenen Farbkombinationen mit den Web Content Accessibility Guidelines übereinstimmen, gibt es beispielsweise den WCAG Contrast Checker: zwei Hexadezimalwerte eingeben und Ergebnisse anzeigen lassen (contrastchecker.com).

Abbildung 9.138    Hier ist der Name Programm: zwei Hexadezimalwerte eingeben und Ergebnisse anzeigen lassen, contrastchecker.com.