Der sogenannte **Kontrastmodus** ist eine systemweite Einstellung in Windows, die es Nutzer:innen mit Sehbeeinträchtigungen ermöglicht, Inhalte mit besonders hohem Kontrast darzustellen. Er wird durch die CSS-Media-Query `@media (forced-colors: active)` erkannt und erlaubt es Entwickler:innen, gezielt auf diese Einstellung zu reagieren.
Die Verwendung von `forced-colors` ist **nicht durch die WCAG (Web Content Accessibility Guidelines)** vorgeschrieben – insbesondere nicht in Version 2.1 oder 2.2. Dennoch sehen wir es als Teil unseres barrierefreien Designverständnisses an, allen Nutzer:innen, unabhängig von ihren individuellen Voraussetzungen oder genutzten Systemmodi, ein **optimales Nutzungserlebnis** zu bieten.
Dieser Artikel dokumentiert unsere technischen Erkenntnisse, zeigt typische Stolpersteine im Umgang mit dem Forced-Colors-Modus und erklärt, wie wir diese Herausforderungen gelöst haben.
## Technischer Ablauf
Wird der Kontrastmodus auf Betriebssystemebene aktiviert, überschreibt der Browser **alle CSS-Farbangaben** mit den systemdefinierten Kontrastfarben. Dabei wird nicht nur der Textfarbwert (`color`), sondern auch der Hintergrund (`background-color`), Rahmen (`border-color`) und andere farbbezogene Eigenschaften wie `fill` oder `stroke` durch die vom System gewählten Farben ersetzt.
Einige CSS-Eigenschaften werden dabei **ignoriert oder nicht dargestellt**, darunter unter anderem:
-`box-shadow`
-`text-shadow`
- komplexe Farbverläufe
-`mask` und `clip-path` (je nach Anwendungsfall)
## Unstimmigkeiten nach Aktivierung
1.**Icons verschwinden:** Der forced-colors-Modus setzt zwar Farben für `stroke` und `fill`, aber wir benutzen `mask` für unsere Icons, weswegen die Icons unsichtbar sind.
2.**Fokus-Indikatoren verschwinden:** Üblicherweise werden `border` für `:focus` verwendet. Wir benutzen allerdings `box-shadow`, damit der Fokusrahmen immer einen guten Kontrast zum Hintergrund hat – egal auf welchem Untergrund Nutzer:innen den Button verwenden. Das Problem: `box-shadow` wird im Kontrastmodus ignoriert, und nur `border` oder `outline` werden angezeigt. Das hat Auswirkungen auf die Erfüllung des WCAG-Kontrastverhältnisses für Fokusindikatoren.
## Lösungen
### 1. Mixin für Forced-Colors-Styling
Wir haben ein zentrales SCSS-Mixin erstellt, das betroffene Elemente im Kontrastmodus gezielt stylt:
**Achtung:**`forced-color-adjust: none` sollte mit Vorsicht verwendet werden, da es die automatische Farbanpassung des Browsers unterbindet. Das bedeutet, dass alle Farben manuell gesetzt werden müssen – andernfalls riskieren wir eine unlesbare Darstellung.
### 2. Outline statt Box-Shadow für Fokus
Damit Fokuszustände im Kontrastmodus sichtbar bleiben, setzen wir zusätzlich zur normalen Gestaltung eine transparente Outline:
```scss
@mixinforced-colors-outline{
outline-offset:2px;
outline-color:transparent;
}
```
Diese transparente Outline ist im Normalmodus unsichtbar, wird aber vom Browser im Kontrastmodus automatisch durch die systemdefinierte Fokusfarbe ersetzt – und bleibt damit barrierefrei sichtbar.
