Usability-Probleme auf Websites und wie man sie vermeidet: Geringe Kontraste

Hintergrund

Auf Websites werden Texte, Buttons, Formularbeschriftungen oder andere wichtige Elemente teilweise mit zu geringen Farbkontrasten dargestellt. Dadurch können Inhalte je nach Monitor, Bildschirmhelligkeit, Lichteinfall oder dem eigenen Sehvermögen nur schwer erkennbar sein.

Sind Kontraste zu gering, können wichtige Informationen und Bedienelemente übersehen oder gar nicht wahrgenommen werden. Dadurch wird die Orientierung und Bedienbarkeit der Website erschwert.

Usability-Heuristik

Dieses Usability-Problem bezieht sich auf die Heuristik „Wiedererkennen statt Erinnern“. Die Heuristik besagt, dass Elemente und Informationen erkennbar gestaltet sein sollten.

Lösung

Kontraste prüfen

Zunächst sollten die Farbkombinationen der Website systematisch überprüft werden. Das gilt für alle Texte sowie für grafische Elemente, mit denen interagiert werden kann oder die für das Verständnis der Website relevant sind.

Hierfür können auch Tools zur Kontrastprüfung eingesetzt werden, wie beispielsweise der Colour Contrast Analyser. Dieser prüft die Kombination aus Vorder- und Hintergrundfarbe auf ausreichenden Kontrast nach dem allgemeinen Barrierefreiheits-Standard für Websites (WCAG). Ein weiteres hilfreiches Tool ist das Plugin „WCAG contrast checker“ für Google Chrome, das die Website auf ausreichende Kontraste überprüft und mit dem verschiedene Farbfehlsichtigkeiten simuliert werden können.

Farbkombinationen überarbeiten

Wenn Kontraste zu gering ausfallen, sollten einzelne Farbkombinationen oder ggf. das gesamte Farbkonzept angepasst werden. Beispielsweise kann eine hellere Hintergrundfarbe mit einer dunkleren Schrift kombiniert werden. Bei grafischen Elementen können z.B. auch Konturen eingesetzt werden, um ausreichend Kontrast zum Hintergrund oder benachbarten Elementen zu schaffen.

Unter den folgenden Links finden sich weitere Informationen zu Kontrasten bei Texten und grafischen Elementen nach dem Barrierefreiheits-Standard WCAG.

Kontraste von Anfang an berücksichtigen

Im Idealfall sollten ausreichende Kontraste bereits von Anfang an beim Erstellen des Farbkonzepts berücksichtigt werden.

Beispiel

Die Website Gehirngerecht Digital verwendet ausreichende Kontraste und gleichzeitig viele unterschiedliche Farben. Dazu arbeitet sie unter anderem mit dunklen Konturen, beispielsweise bei Buttons (siehe Screenshot).

Fazit: Unsere Empfehlungen

• Kontraste von Anfang an beim Farbkonzept berücksichtigen
• Kontraste bei Texten und wichtigen Bedienelementen prüfen, z.B. mit dem Colour Contrast Analyser
• Bei Bedarf Farbkombinationen überarbeiten