Inhaltsbereich Navigation Navigation Fußzeile

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.

Tooltip und Tooltip-Button mit weissen Rahmen und Icon und weissem Inhalt auf schwarzem Hintergrund.
Tooltip im Windows-Kontrastmodus

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.

Die horizontale Fortschrittsanzeige in der normalen Darstellung mit 2 Schritten in Dunkelblau und 2 Schritten in Hellblau, daneben die Darstellung im Kontrastmodus, die vorher hellblauen Schritte erhalten eine schwarze Umrandung.
Fortschrittsanzeige im Kontrastmodus
Die vertikale Fortschrittsnavigation in der normalen Darstellung mit 2 Schritten in Dunkelblau und 3 Schritten in Hellblau, daneben die Darstellung im Kontrastmodus, die vorher hellblauen Schritte erhalten eine schwarze Umrandung.
Fortschrittsnavigation im Kontrastmodus

SVG

Diese Media Queries, insbesondere die Abfrage von prefers-color-scheme ermöglichen es auch, SVG-Vektorgrafiken umzufärben, indem je nach Kontrastmodus die fill- und stroke-Attribute manipuliert werden.

Sofern SVG-Dateien Texte oder andere relevante Inhalte enthalten dürfen diese nicht auf transparent gesetzt werden, sondern müssen in der Bilddatei selbst vollflächig mit einer passenden Hintergrundfarbe hinterlegt sein.

Transparente Logos mit schwarzem Text auf schwarzem Hintergrund.
Nicht korrekt aufbereitete Logos im Windows-Kontrastmodus
Weiss hinterlegte Logos mit nun lesbarer schwarzer Schrift.
Zum Vergleich korrekt aufbereitete Logos im Mac-Kontrastmodus

Icon-Fonts

Icon-Fonts sind in der Regel nicht von Problemen in der Darstellung betroffen, da sie bei Verwendung entsprechender Media Queries genau so umgefärbt werden können wie herkömmliche Textinhalte.

Tastaturfokus

Besonderer Augenmerk muss im Kontrastmodus auf eine deutliche Hervorhebung von Zuständen und Fokus-Indikatoren gelegt werden, da dieser ja mit einer hohen Wahrscheinlichkeit von Menschen mit Sehbehinderung eingesetzt wird. Hier empfiehlt es sich, den Fokus noch deutlicher darzustellen, z. B. über eine 2px breite abgesetzte Outline zusätzlich zu den vorhandenen Borders.

Kontrastmodus und WAI-ARIA

ARIA-Attribute werden für die Darstellung im Kontrastmodus nicht berücksichtigt, d. h. aus einem per se schon semantisch fragwürdigen und per Hintergrundfarbe gestaltetem <div role="button"> wird im Ernstfall kein Default-Button, sondern ein schwarzer Text auf schwarzem Hintergrund.
Auch ein als Button-Link gestaltetes <a href="…" role="button"> wird im Kontrastmodus mit den benutzerdefinierten Farben für Links dargestellt und wird somit seine Anmutung als Button verlieren.

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.

Testhinweise

  1. Schalten Sie systemweit in den Dark Mode bzw. in einen 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

So:

  • Immer Vorder- und Hintergrundfarbe festlegen
  • Funktional oder inhaltlich relevante Bilder per <img> oder <picture> einbinden
  • Nur durch ihre Hintergrundfarbe optisch abgesetzte Bereiche mit einem transparenten Rahmen versehen

So nicht:

  • Nur Vorder- oder Hintergrundfarbe festgelegt
  • Wesentliche Inhalte in CSS-Hintergrundbildern
  • Schriftgrafik auf transparentem Hintergrund
  • Kein sichtbarer Tastatur- oder Mausfokus
  • Layout nicht mehr nachvollziehbar