Kontrast zwischen Text und Hintergrund

24. November 2006

Verwenden Sie Text- und Hintergrundfarben mit großem Kontrast, um die Schrift möglichst gut lesbar zu machen.

Erläuterung

Haben Sie vielleicht generelle Schwierigkeiten verschiedene Farben voneinander zu unterscheiden und sind dazu noch Brillenträger? Konnten Sie vielleicht auf einer Webseite einmal den Text nicht genau lesen, oder haben Sie schon mal die Erfahrung gemacht, dass sie nach längerem Lesen eines Textes Kopfschmerzen oder Probleme mit Ihren Augen bekommen haben, da Sie das Lesen des Textes angestrengt hat?

Dann sollten Sie folgende Hinweise beim Erstellen von Textinhalten auf einer Webseite durchaus beachten:
Das farbliche Design einer Webseite ist durchaus wichtig. Jedoch sollte man Farbpaare, die im Farbraum eng beieinander liegen, nicht verwenden um Textinhalte darzustellen. Damit laufen Sie Gefahr, dass diese Farbpaare als Kontrast kaum wahrgenommen werden. Solche Farbpaare wären z. B. Rot-Orange, Grün-Cyan oder Blau-Magenta. Vermeiden Sie Weiß als Hintergrundfarbe. Ein dunkelgrauer Hintergrund gewährleistet beste Sichtbarkeit bei Vordergrundfarben.
Denken Sie vor allem an diejenigen Benutzer die unter Rot-Grün-Sehschwäche leiden. Diese Menschen haben Schwierigkeiten diese beiden Farben voneinander zu unterscheiden. Verwenden Sie also niemals rote Schrift auf grünem Hintergrund.

Beispiel

Beispiel 01

Beispiel 1: falsch

Beispiel 02

Beispiel 2: richtig

In dem ersten Beispiel ist gut zu erkennen, dass kaum ein Kontrast zwischen den Farben Gelb und Orange besteht und der Benutzer den Text somit schlecht lesen kann. Nach längerem Hinschauen besteht die Gefahr, dass das Auge zu sehr angestrengt wird und dies Kopfschmerzen nach sich ziehen könnte.
Das zweite Beispiel (rote Schrift auf grauem Hintergrund) hingegen empfindet der Benutzer als angenehm und leicht zu lesen.

Diesen Beitrag bookmarken bei:
Bookmark bei: Yigg Bookmark bei: Webnews Bookmark bei: Technorati Bookmark bei: Mr. Wong Bookmark bei: Linkarena Bookmark bei: Del.icio.us Bookmark bei: Google Bookmark bei: Favoriten Bookmark bei: Facebook

Autor des Beitrags