Auf vielen Websites ist der Kontrast sehr schwach. Was bei guter Tageslicht-Beleuchtung für mich manchmal noch lesbar ist, erweist sich bei schlechter Beleuchtung oft als echte Herausforderung.

Schlechtes Kontrastverhältnis

Bei meinen Tests von Webseiten die ich im Rahmen meiner beruflichen Tätigkeit bei der Stiftung «Zugang für alle» durchführe, treffe ich sehr schlechte Kontrastverhältnisse zwischen Schrift oder Links und dem Hintergrund an. Vielfach stosse ich zudem auf Formulare, bei denen die Begrenzungen der einzelnen Eingabefelder für mich kaum erkennbar sind, da das Kontrastverhältnis zwischen dem Rahmen und dem Hintergrund viel zu gering ist. Ein Beispiel, das ich kürzlich gefunden habe, ist das Formular „Private Banking Kunde werden“ der Schwyzer Kantonalbank.

Die Schwyzer Kantonalbank ist aber in guter Gesellschaft, was ein schlechtes Kontrastverhältnis angeht, die Migros-Bank liefert ein Beispiel für schlecht lesbare Links. Hier betrifft es die Seite Leistungsumfang.

Das Phänomen mit dem schlechten Kontrastverhältnis betrifft nicht nur die Bank-Branche, sondern tritt branchenübergreifend auf. Das nächste Beispiel von schlechtem Kontrastverhältnis liefert uns der Basler Zoo in Form der Navigation und Registerkarten, die ich kaum erkenne. Der folgende Screenshot stammt von der Seite über die Gorillas

Zierschriftarten

Es gibt aber auch Schriftarten, die sehen sehr schön aus sind aber so gut wie unlesbar, da sie extrem verschnörkelt sind. Ein Beispiel findet man auf der Site des Künstlers Andreas Bürki.

Die Schrift ist zu dünn und die Buchstaben sind zu eng zusammen geschrieben. Es ist schwierig die einzelnen Zeichen zu unterscheiden.

Abhilfe schaffen

In diesem Abschnitt möchte ich Möglichkeiten aufzeigen, wie man die oben beschriebenen Probleme beheben kann.

Damit Kontrast objektiv gemessen werden kann gibt es verschiedene Tools und eine Formel wie man das Kontrastverhältnis berechnet.

Kontrastverhältnis

Erst möchte ich mal den Begriff Kontrastverhältnis klären. Dazu habe ich in Wikipedia den Beitrag „Kontrastverhältnis“ aus welchen hier einen Ausschnitt wiedergegeben wird.

Das Kontrastverhältnis ist ein in der Unterhaltungselektronik gebräuchlicher Messwert, der zur Darstellung der maximalen relativen Helligkeitsunterschied zwischen Schwarz und Weiß dient. Es beschreibt quantitativ die Fähigkeit eines Bildschirms oder Projektors, ein kontrastreiches Bild zu erzeugen und ist dabei der Quotient der maximal und der minimal darstellbaren Leuchtdichte.

Je größer dieser Quotient ist, desto höher ist der Kontrast und desto heller und „lebendiger“ wirkt das Bild. Ist der Quotient kleiner, wirken Farben matter, da die Farbsättigung durch die Beimischung von Weißanteilen nur geringe Werte erreichen kann. Das Bild wirkt ausgebleicht und schwarze Bereiche des Bildes werden oft als dunkelgrau empfunden. Das Kontrastverhältnis hat direkte Auswirkungen auf den Gamut (die Menge aller darstellbaren Farben) eines Anzeigegerätes. Weitere Effekte, wie der Helmholtz-Kohlrausch-Effekt (wahrgenommene Helligkeit steigt bei zunehmender Sättigung trotz konstanter Leuchtdichte), der Hunt-Effekt (Erhöhung der wahrgenommenen Sättigung durch Erhöhung der Leuchtdichte) oder der Bezold-Brücke-Effekt (Farbtonverschiebung bei Änderung der Leuchtdichte) beeinflussen die Farbwahrnehmung ebenfalls und können das Erscheinungsbild deutlich verändern.

Als besonders wichtig hat sich ein gutes Kontrastverhältnis bei Heimkinoanwendungen erwiesen, bei denen es auf die wirklichkeitsgetreue Wiedergabe sowohl tiefschwarzer als auch reinweißer Flächen ankommt. Allerdings ist dazu anzumerken, dass die Wahrnehmung des Kontrastes sehr von der Umgebungshelligkeit abhängt (relativ dunkle Umgebung beim Heimkino). Bei einer helleren Umgebung wirkt der Schwarzwert eines Monitors dunkler und erhöht somit den wahrgenommenen Kontrast (Simultankontrast). Ist die Umgebung zu hell, treten gegenteilige Effekte auf und die Kontrast- und Farbwahrnehmung werden durch Effekte, wie die Transient Adaptation geschwächt. Die Wahrnehmung des Schwarzwertes ist sehr variabel und sowohl von der Umgebungshelligkeit als auch vom Adaptationszustand des Betrachters abhängig.

Gut lesbare Schrift

Was macht eine gut lesbare Schrift aus?

Wichtige Merkmale für gut lesbare Websites sind neben Kontrastverhältnis, Schriftart und Schriftgrösse. Was ein schlechtes Kontrastverhältnis ausmachen kann habe ich bereits oben beschrieben. Genauso schwierig zu Lesen wie Texte mit schlechtem Kontrastverhältnis sind für Sehbehinderte Texte in verschnörkelten und dünnen Schriftarten wie z. B. Comic Sans MS.

Ebenso problematisch sind Schriftarten mit sog. Serifen, wie z. B. die Schriftart Serif

Ganz schwierig wird es im folgenden Beispiel. Hier sind die angegebenen Schriftarten mit dem Schriftschnitt Fett ausgezeichnet worden

Und die folgenden Schriftarten sind zwar schön zum Anschauen eignen sich für Menschen mit einer Sehbehinderung aber nicht.

Gut lesbar sind hingegen Schriften wie Arial, Helvetica, Verdana

Die Schriftart Teresia, ist in gewisser Hinsicht ein Spezialfall. Diese Schriftart wurde nämlich von der Scientific Research Unit of Royal National Institute of Blind People in London (RINB), dem englischen Blindenverband) entwickelt. Die Schriftart wird hauptsächlich im TV-Bereich verwendet z. B für Untertitel von Filmen.

Da ich die Schrift Teresias erst kürzlich bewusst zum ersten mal gesehen habe, habe ich mir noch keine Meinung machen können, ob ich persönlich die Schriftart mag oder nicht.

Wikipedia-Artikel über die Schriftart Tiressia

Tool und Formel zur Messung des Kontrastverhältnis

Im Folgenden werden die Werkzeuge zum Messen des Kontrastverhältnisses kurz vorgestellt.

Für meine Testarbeit verwende ich zum Ermitteln des Kontrastverhältnisses den Colour Contrast Analyser 2.2, welcher kostenlos bei Vision Australia heruntergeladen werden kann.

Laut WCAG 2.0 (Web Content Accessibility Guidelines) muss das Kontrastverhältnis mindestens 4.5:1 betragen, um das Erfolgskriterium 1.4.3 Kontrast (Minimum) zu erfüllen.

Und hier für alle mathematisch Begabten noch die Formel, die in der WCAG 2.0 zur Berechnung des Kontrastverhältnis verwendet wird.

Quellen:

Die Beispiele der Schriftarten stammen von den beiden Webseiten:

• TypeTalk: Designing For the Aging Eye
• Websichere Schriftarten