CSS-Tricks für bessere Sichtbarkeit im Forced Colors Modus

Ein deutlicher Kontrast zwischen Text und Hintergrund hilft allen. Sowohl Menschen mit Sehschwäche als auch jenen, die bei grellem Sonnenlicht auf ihr Display starren. Aus diesem Grund enthalten die WCAG diverse Mindest-Anforderungen für das Kontrastverhältnis von Text bzw. UI-Komponenten zum Hintergrund.

Für Menschen mit Sehbeeinträchtigung ist das aber nicht immer ausreichend. Sie brauchen spezifische Farbkombinationen mit hohem Kontrast zur Verbesserung der Lesbarkeit. Assistive Technologien wie der High Contrast Mode in Windows überschreiben aktiv die Farben einer Website, um Nutzer:innen mit Sehschwäche zu helfen.

Eine Mischung aus verschiedenen Farben auf einer Leinwand. Foto: © Steve Johnson / pexels.com

Ich zeige euch wie der Forced Colors Modus bei Websites funktioniert und wie ihr eure Inhalte mit einfachen CSS-Tricks optimieren könnt.

Wie funktioniert der Forced Colors Modus?

Der Forced Colors Modus ist ein allgemeiner Browser-Standard, der in CSS Color Adjustment Module Level 1 definiert wurde. Betriebssysteme sollen vordefinierte Farb-Paletten anbieten und es Nutzer:innen ermöglichen, ihre eigenen Farbkombinationen zu definieren.

In der Spezifikation heißt es:

When forced colors mode is active (...), colors on the element are force-adjusted to the user’s preferred color palette.

Das bedeutet, dass Farbwerte durch System-Farben ersetzt werden, welche der definierten Farbpalette entsprechen. Zu den betroffen CSS-Eigenschaften zählen:

  • color
  • background-color
  • border-color
  • outline-color
  • fill

Andere Eigenschaften wie box-shadow und text-shadow werden auf none gesetzt. Um euch ein Beispiel zu geben, so sieht mein Blog im Forced Colors Modus mit dunkler Farbpalette aus:

Eine Unterseite von "Oida, is des org" mit aktivem Forced Colors Modus.

Wie ihr den Forced Colors Modus testet

Mithilfe der Entwicklertools in Chrome und Edge könnt ihr den Forced Colors Modus emulieren und die Sichtbarkeit eurer Inhalte prüfen:

  1. Öffnet den Rendering-Tab.
  2. Unter "CSS-Medienfunktion forced-colors emulieren" wählt ihr "forced-colors: active" aus.

Die Medienfunktion forced-colors

Passt das Styling eurer Website explizit mit der Medienfunktion forced-colors an. Zum Beispiel habe ich in meinem Blog ein SVG-Muster mithilfe der Eigenschaft background-image eingebunden:

#___gatsby { background-image: url("data:image/svg+xml..."); background-attachment: fixed; background-size: cover; }

Mit der Media-Query entferne ich das Hintergrundbild, wenn der Forced Colors Modus aktiv ist:

@media (forced-colors: active) { #___gatsby { background-image: none; } }

Eine weitere nützliche CSS-Eigenschaft ist forced-color-adjust. Diese ermöglicht euch, einzelne Elemente vor dem Zugriff des Forced Colors Modus zu schützen und selbst das Styling zu optimieren.

Transparente Rahmen und Umrisse

Web-Layouts vermitteln die Grenze eines Elements häufig über eine andere background-color oder mit einem box-shadow. Im Forced Colors Modus haben jedoch alle Elemente dieselbe Hintergrundfarbe und alle Schatten werden entfernt. Die fehlende Begrenzung von Elementen kann für Nutzer:innen verwirrend sein.

Kein Grund zu verzweifeln! Es gibt eine geniale Lösung für das Problem: Definiert eine Rahmenlinie mit transparenter Farbe. Bei aktivem Forced Colors Modus wird die Rahmenlinie sichtbar und vermittelt eindeutig die Grenze des Elements:

section.info-card { border: 1px solid transparent; }

Auf dieselbe Weise könnt ihr für sichtbare Fokus-Indikatoren im Forced Colors Modus sorgen. Normalerweise setzen Browser einen Umriss für fokussierte Links und Buttons. Es ist ok diesen mit outline: none zu entfernen, wenn ihr den Fokus auf andere Weise (Hintergrundfarbe etc.) vermittelt. Da dieser Fokus-Indikator im Forced Colors Modus verloren gehen würde, solltet ihr aber besser eine transparente outline setzen.

a:focus { background: var(--primary); color: var(--white); /* Provide visible focus indicator in forced colors mode */ outline: 2px solid transparent; }

Es gibt noch viele weitere CSS-Tricks, mit denen ihr verschiedene Probleme im Forced Colors Modus beheben könnt. Bitte schaut euch das tolle Video „Practical Styling in Forced Colors Mode“ von Mike Herchel an.

Nützliche Links

Erstellt am