Kontraste im Web Design
[Materialsammlung]

Bedeutung von Kontrasten im Web Design

Das Kontrastsehvermögen nimmt im Alter ab. Aber gute Kontraste zwischen Hintergrund- und Schriftfarbe erleichtern auch die visuelle Wahrnehmung bei reflektierenden Displays, alten Bildschirmen oder bei Verschmutzung der Anzeige. Für Menschen mit Farbfehlsichtigkeiten ist es wichtig, dass zwischen den Elementen auch ein deutlicher Helligkeitsunterschied vorliegt. Aber auch Grafiken und Bilder können durch eine kontrastreiche Gestaltung optimiert werden.

Die Symbolgrafik Low Contrast zu diesem Abschnitt weist als Hintergrund die Farbabfolge Rot – Gelbgrau – Grün – Blau auf. Darauf ist deutlich der Schriftzug CONTRAST zu erkennen. Dahinter befindet sich aber je nach Farbsehvermögen teilweise reduziert oder visuell überhaupt nicht wahrnehmbar der Schriftzug LOW. Die Hintergrundfarben und der schlecht wahrnehmbare Schriftzug weisen nämlich zwar visuelle Unterschiede auf, verfügen jedoch über einen ziemlich identische Hellwerte (Relative Luminance). Auf einem Schwarz-Weiß-Foto oder bei Farbenblindheit wären nur ein gleichmäßig grauer Hintergrund mit dem Schriftzug CONTRAST zu sehen.

Ausreichende Festlegung von Hintergrundfarbe UND Schriftfarbe

Der Internet Explorer greift auf das Farbdesign für Hintergrund und Schriftfarbe aus der Systemsteuerung im Betriebssystem zurück, wenn auf einer Webseite Seitenelemente über keine Festlegung der Hintergrundfarbe oder der Schriftfarbe verfügen. Möglicherweise trifft dies auch auf andere Browser und Betriebssysteme zu.

Nun kann es sein, dass NutzerInnen die Standardfarben in der Systemsteuerung des Betriebssystems umgestellt haben. Wer auf dem Smart Phone Energie sparen will oder stark blendempfindlich ist, hat möglicherweise den Bildschirmhintergrund schwarz und die Schriftfarbe hell eingestellt.

Fehlt auf einer Webseite in dieser Konstellation aber beispielsweise die Hintergrundfarbe, während die Schriftfarbe auf Schwarz festgelegt ist, wird die Schriftfarbe aus der Systemsteuerung und die Hintergrundfarbe vom Design der Webseite übernommen. Blöderweise erscheint dadurch schwarze Schrift auf schwarzem Hintergrund.

Seitenelemente, für die entweder Hintergrundfarbe oder Schriftfarbe festgelegt sind, müssen daher auch über eine Festlegung des jeweils anderen Elements verfügen.

Verzicht auf Farbfestlegungen

In den CSS-Anweisungen kann natürlich weithin auch auf Farbfestlegungen für Bereiche und Elemente verzichtet werden. Damit wird die Darstellung von Hintergrund und Schriftfarbe an den Browser bzw. das Betriebssystem übergeben.

Das kann von Vorteil sein für BesucherInnen, die im Browser oder Betriebssystem persönliche Konfigurationen vorgenommen haben.

Allerdings stoßen diese Personen erfahrungsgemäß auf gravierende Probleme, wenn dann doch für entweder Hintergrund oder Schriftfarbe in irgendeinem Bereich eine Festlegung der Farbe erscheint.

Seitenelemente, für die entweder Hintergrundfarbe oder Schriftfarbe festgelegt wird, müssen daher auch bei sonstigem Verzicht auf Farbfestlegungen über eine Festlegung des jeweils anderen Elements verfügen.

Hintergrundbilder für Texte

Text auf Hintergrundbildern ist grundsätzlich schwerer zu lesen und sollte daher vermieden werden. Wenn Hintergrundbilder aus grafischen Gründen erforderlich erscheinen, sollte zumindest darauf geachtet werden, dass die Bildbereiche, auf denen Text erscheinen soll, möglichst einfärbig sind und keine zu wenig Mustereffekte aufweisen. Und natürlich muss der Mindestkontrast zwischen Hintergrundfarben des Bildes und Schriftfarbe in jedem Bereich gewährleistet sein. Dies gilt selbstverständlich auch, wenn sich der Text gar auf einer Slide-Show befindet.

Wenn aus gestalterischen Gründen Hintergrundbilder für Text erforderlich scheinen, empfiehlt es sich, hinter dem Text das Bild so auszugrauen, dass die Kontraste durchgehend gewährleistet bleiben und der Hintergrund nicht mehr störend für die Lesbarkeit des Textes erscheint.

Text auf Hintergrundbild

Techniken, um Text auf einer Hintergrundgrafik mit ausreichendem Kontrast zu realisieren.

HOVER- und FOKUS-Effekte

HOVER-Effekte

HOVER-Effekte sind visuelle Effekte, die auf Links erscheinen, wenn die Maus über ein Element bewegt wird. Sie signalisieren, dass der Seitenbereich erreicht ist, der mit einem Mausklick gewählt werden kann. Links sollten aus diesem Grund über einen HOVER-Effekt verfügen, also das Link visuell verändern.

Natürlich muss der HOVER-Effekt zu einem ausreichenden Kontrast zwischen Hintergrund und Schriftfarbe führen. Ich empfehle darüber hinaus folgende visuellen Effekte:

• Der Kontrast sollte beim HOVER-Effekt tendenziell erhöht werden, damit sich Menschen, die einen erhöhten Kontrastbedarf aufweisen, auf diese Weise mittels Mausbewegung eine bessere Wahrnehmbarkeit erreichen.
• Es ist möglicherweise zweckmäßig, beim HOVER-Effekt die Farben nicht zu invertieren, weil sich Netzhautareale im Auge dadurch zur visuellen Wahrnehmung stärker umstellen müssen.

FOKUS-Effekte

FOKUS-Effekte sind visuelle Effekte, die auf Links oder Formularelementen erscheinen, wenn sich der Tastaturfokus darauf befindet. Hauptsächlich wird dieser Effekt durch Drücken der TABULATOR-Taste erzielt. Der FOKUS-Effekt signalisiert visuell, dass der Seitenbereich durch drücken einer Taste (ENTER, LEERTASTE, CURSOR) ausgewählt oder bearbeitet werden kann. Links und Formularelemente müssen aus diesem Grund über einen FOKUS-Effekt verfügen, also das Link visuell verändern, wenn es den Fokus erhält.

Natürlich muss der FOKUS-Effekt über einen ausreichenden Kontrast zwischen Hintergrund und Schriftfarbe verfügen. Ich empfehle darüber hinaus folgende visuellen Effekte:

• Der Kontrast sollte beim FOKUS-Effekt tendenziell erhöht werden und farblich abheben, damit der Fokus visuell deutlich heraussticht.
• Es ist möglicherweise zweckmäßig, beim FOKUS-Effekt die Farben nicht zu invertieren, weil sich Netzhautareale im Auge dadurch zur visuellen Wahrnehmung stärker umstellen müssen.

Technische Realisierung von Effekten

FOKUS- und HOVER-Effekte sollten weithin durch Festlegungen in der zentralen CSS Datei erfolgen. Damit wird ein einheitliches Erscheinungsbild innerhalb des Webauftritts sichergestellt.

Die visuellen Effekte sollten natürlich auch auf Grafiklinks wahrnehmbar sein und zum besseren Verständnis mit Effekten auf Textlinks assoziiert sein.

Kontrastmodus von Betriebssystemen

Testdatei für den Kontrastmodus

Windows Kontrastmodus

Das Betriebssystem Windows verfügt in der Systemsteuerung über verschiedene Darstellungsangebote. Für Menschen, die blendempfindlich oder auf gute Kontraste angewiesen sind, gibt es den Kontrastmodus. Dieser verfügt standardmäßig über einen schwarzen Hintergrund und weiße Schrift. Diese und andere Bildschirmelemente lassen sich auch individuell konfigurieren.

Der Kontrastmodus lässt sich mittels Shortcut aktivieren und deaktivieren. Die Tastenkombination lautet:

SHIFT + ALT + DRUCKEN

Für das technische Web Design ist relevant, dass im Windows Kontrastmodus die Farben nicht einfach nur invertiert werden, sondern für einzelne Seitenelemente Farben aus dem Farbschema des Kontrastmodus verwendet und mittels CSS eingebettete Hintergrundgrafiken schlichtweg ignoriert werden.

Warnung

Wenn der Kontrastmodus einmal aktiviert ist, läst sich das Standarddesign im Betriebssystem von Windows unter Umständen gar nicht mehr so leicht als Standard wiederherstellen. Ich habe zumindest unter Windows 7 böse Erfahrungen damit gemacht: Unerwünschte Effekte bleiben hartnäckig.

Problembereiche im Windows Kontrastmodus

Ich empfehle nach meinen Beobachtungen zum Kontrastschema von Windows 7 und dem Internetexplorer 11 das Kontrastschema für Menschen mit Sehbehinderung in der Regel nicht. Folgende Probleme sind zu bedenken:

• Texte, die überwiegend mit einem einheitlichen Farbschema für alle Textvarianten erscheinen, sind nicht mehr übersichtlich. Eine visuelle Differenzierung von Seitenbereichen erleichtert die Wahrnehmbarkeit und Identifizierbarkeit von Seitenbereichen.
• Viele Webseiten verfügen nicht über ausreichende Farbdeklarationen für Hintergrund UND Schriftfarbe. Dies führt vielfach zu unerwünschten Kontrastreduktionen.
• Die Standardfarbe für Links kann ich gut von reinen Textbereichen unterscheiden. Ich zweifle jedoch daran, dass dieser Farbkontrast wirklich für alle hilfreich ist, die auf einen Kontrastmodus vertrauen.
• HOVER- oder FOKUS – Effekte scheinen überhaupt verloren zu gehen. Ich vermute, das war zwar keine Absicht beim Design der Linkdarstellung im Kontrastmodus, sehr wohl aber ein technischer Designmangel.
• Hintergrundbilder sollten zwar grundsätzlich nur dekorativen Charakter haben. Auf vielen Webseiten vermitteln sie jedoch auch Informationen, etwa über den Charakter eines Links (extern, englischsprachig, …). Wenn Hintergrundgrafiken grundsätzlich eliminiert werden, gehen semantische Informationen verloren. (Web Designer sollten trotzdem Grafiken mit semantischen Informationen nicht ausschließlich als Hintergrundgrafik einblenden.)

Fazit

Vermeide den Windows Kontrastmodus! Es verschwinden relevante Dinge, wenn sich Webprogrammierer nichts gedacht haben und es verschwinden relevante Dinge, wenn sich Webprogrammierer etwas überlegt haben. Zur ersten Gruppe gehören etwa Informationen, die mittels CSS - Hintergrundgrafiken eingeblendet werden. Zur zweiten Gruppe gehören etwa HOVER- und FOKUS-Effekte. (Aphorismus 12)

Beispiele

Fokuseffekt mit Minimalkontrast

In folgendem Beispiel kann der verfügbare Fokuseffekt visuell auch durch Überstreichen mit der Maus dargestellt werden (Hover-Effekt).

Erläuterungen zum Beispiel

• Der türkise Hintergrund des Schalters weist zum weißen Hintergrund der Umgebung ein ausreichendes Kontrastverhältnis von 3∶1 auf.
  (Berechnung auf contrast-ratio.com)
• Die violette Schriftfarbe des Schalters weist zum türkisen Hintergrund ein ausreichendes Kontrastverhältnis von 4,5∶1 auf.
  (Berechnung auf contrast-ratio.com)
• Der pinke Rahmen des Schalters als Fokuseffekt weist zum türkisen Hintergrund des Schalters ein ausreichendes Kontrastverhältnis von 3∶1 auf.
  (Berechnung auf contrast-ratio.com)

Die Kontrastverhältnisse auf diesem Schalter entsprechen tatsächlich allen Minimalanforderungen der Konformitätsstufe AA. Nicht nur bei einer Rot-Grün-Schwäche werden diese Minimalanforderungen als sehr niedrig angesehen werden.