Mehr Kontrast im Web

Wenn ein Verhältnis von 4,5:1 nicht ausreichend ist

Barrierefreies Web Design besteht nicht nur aus semantischem Markup, Screenreadern und Tastatursteuerung. Auch der Kontrastmodus ist ein wichtiges Hilfsmittel, sowohl bei Seheinschränkungen, als auch bei älteren Nutzern.

Für Menschen mit einer Seheinschränkung ist der „High Contrast Mode“ (Kontrastmodus) von Windows eine wichtige Hilfe beim Lesen von Bildschirminhalten. Er kann in der Systemsteuerung unter „Eingabehilfen – Anzeige – Kontrast aktivieren“ eingeschaltet werden. Der Kontrastmodus alleine teilt Programmen nur mit, die UI-Elemente in Abstand und anderen Parametern zu adaptieren – die Farben ändern sich dadurch aber nicht. Um sich an verschiedene Arten der Farbwahrnehmung anzupassen, stellt Windows daher unterschiedliche UI-Themes zur Verfügung, die auch individuell konfigurierbar sind.

So kann es für ältere Menschen sinnvoll sein, das „Windows Standard Theme (large)“ zu aktivieren, welches Buttons, Schriften und andere UI-Elemente größer darstellt. Da Webseiten häufig die Kontrastanforderungen der WCAG 2.0 missachten, können sie zusätzlich den Kontrastmodus aktivieren und erhalten so in Browsern eine optimierte Darstellung der Webseite. Der Browser ignoriert hierfür bestimmte CSS-Defintionen und setzt Farbwerte für Text und Hintergrund selbstständig.

Viele Webseiten, darunter auch ORF.at, setzen zu Steigerung der Web Performance sogenannte CSS-Sprites ein. Die dafür verwendeten Hintergrundgrafiken ignorieren Browser jedoch im Kontrastmodus. Glücklicherweise gibt es hierfür eine simple Lösung: Liefert der DOM-Knoten, für den eine Hintergrundgrafik definiert ist, null bei der Abfrage vom berechneten CSS-Style zurück, befindet sich der Browser höchstwahrscheinlich im Kontrastmodus. Frameworks wie Dojo reagieren darauf mit Fallback-Mechanismen und ersetzen CSS-Sprites mit Textalternativen.

Bei news.ORF.at und sport.ORF.at wurden nun zwei kleine Änderungen vorgenommen, die auch im Kontrastmodus die Lesbarkeit erhalten und für eine bessere Orientierung sorgen. Bei Ticker-Meldungen, die sich durch Anklicken öffnen, wird nun ein 2 Pixel breiter Rahmen angezeigt. Für Browser im normalen Darstellungsmodus ist dieser nicht sichtbar, da er in der gleichen Farbe wie der Hintergrund gehalten ist. Der selbe Trick wurde auch beim Footer angewendet, der sich nun besser vom restlichen Text im Kontrastmodus abgrenzt.

iPhone-User, die den „Weiß auf Schwarz“-Modus von iOS aktiviert haben, werden keinen Unterschied merken. Dieser funktioniert wie ein Filter, der vor der finalen Ausgabe am Bildschirm vom Betriebssystem aktiviert wird. Daher arbeitet er auch App-übergreifend und ist auch nicht mit dem Kontrastmodus von Windows vergleichbar.