Kontrastmodus & Dark Mode

Neben den in modernen Betriebssystemen verbreiteten sog. Dark Modes haben auch die insbesondere bei Menschen mit starker Sehbehinderung verbreiteten höchst individuellen Kontrast- und Farbeinstellungen erhebliche Auswirkungen auf die barrierefreie Gestaltung von Oberflächen.

Einerseits bieten Betriebssysteme hier vorgefertigte Einstellungen, die häufige anzutreffende Bedürfnisse schon sehr gut abdecken, z. B. durch Invertierung des gesamten Bildschirms bei Blendempfindlichkeit. Andererseits steht es Nutzenden frei, viele Einstellungen zu Text- und Linkfarben an ihre individuellen Bedürfnisse anzupassen.

Hier muss mit den zur Verfügung stehenden Mitteln von CSS abgefangen werden werden, dass z. B. als Folge individueller Einstellungen nun schwarzer Text, schwarze Bildinhalte auf transparenten Hintergründen, oder dunkle UI-Elemente auf schwarzem Hintergrund stehen.

Typische Auswirkungen

Im Kontrastmodus werden nicht nur Farben angepasst, sondern optional können auch Schriftarten, Linien, Abstände und Rahmen anders dargestellt werden. Trotz aller subtilen Unterschiede der Betriebssysteme gibt es einige Gemeinsamkeiten: So werden generell sämtliche Vorder- und Hintergrundfarben von gestalteten Blöcken, Textinhalten und Rahmenfarben durch benutzerdefinierte Farben überschrieben und per CSS eingebundene Hintergrundbilder nicht mehr dargestellt.

CSS

CSS stellt Media Queries zur Verfügung um abzufragen, ob Nutzende individuelle Einstellungen vorgenommen haben. Somit kann man dann spezielle Styles erstellen, die sicherstellen, dass Inhalte auch unter diesen Bedingungen wahrnehmbar bleiben. Die hierfür benötigten Abfragen wie @media: prefers-contrast und @media: forced-colors werden in modernen Browsern zuverlässig unterstützt.

Bei Elementen wie per Hintergrundfarbe abgesetzten Kacheln empfiehlt es sich, um diese eine border: 1px solid transparent; zu legen. Diese stört in der „normalen“ Ansicht nicht weiter, im Kontrastmodus stellt sie aber durch den Wegfall der Hintergrundfarbe ein weiteres gestalterisches Element zur Verfügung, das nun nicht mehr transparent, sondern entsprechend den Nutzereinstellungen in der Textfarbe eingefärbt dargestellt wird.

Wenn eine Komponente gestalterische Maßnahmen benötigt, um z. B. Zustände auch im Kontrastmodus zu visualisieren, dann werden inhaltlich bedeutungstragende Farbflächen durch einen Rahmen ersetzt, der den gleichen Zweck erfüllt.

Relevante BITV-Anforderungen

Bitte beachten Sie, dass es keine anwendbaren Vorgaben zum Umgang mit benutzerdefinierten Farben gibt, da sich diese in den WCAG auf Level AAA (BITV = soll, nicht muss) befinden. Nichtsdestotrotz sind benutzerdefinierte Farben ein gängiges und typisches Szenario für eine Vielzahl von Menschen mit Sehbehinderung und sind in den Komponenten entsprechend berücksichtigt.

• 1.4.8 Visuelle Präsentation (AAA)
• 1.4.9 Bilder eines Textes (AAA) (begrenzt anwendbar)
• 1.4.3 Kontrast (AA) ist nicht anwendbar, wenn Nutzende ihre benutzerdefinierten Farben systemseitig an ihre speziellen Bedürfnisse angepasst haben. CSS liefert nur Vorschläge, wie etwas dargestellt werden könnte, die letztendliche Kontrolle über die tatsächliche Darstellung liegt in der Hand der Nutzenden.

Testhinweise

1. Schalten Sie systemweit in den Dark Mode bzw. in eines der vorgefertigten Kontrastschemata. Unter Windows schalten Sie mit der Tastenkombination linke Alt + linke Umschalt + Drucken um.
2. Alternativ lassen sich die Kontrastschemata auch in den Entwicklertools von Chrome simulieren.
3. Prüfen Sie, ob weiterhin alle relevanten und inhaltstragenden Elemente und Inhalte visuell wahrnehmbar sind.
4. Prüfen Sie, ob alle interaktiven Elemente über deutlich sichtbare Hover- und Fokus-Hervorhebungen verfügen.

Do’s and Dont’s