Forced-Colors-Modus – Prüfung & Anpassung aller Komponenten
Einleitung
Der Windows-Kontrastmodus ist eine essenzielle Funktion für Nutzer:innen mit Sehbeeinträchtigungen. Über die Media Query @media (forced-colors: active) wird erkannt, ob dieser Modus aktiv ist. Dabei überschreibt der Browser große Teile der CSS-Definition – insbesondere Farben, Box-Shadows, Gradients, Masks und Icons. Das hat zur Folge, dass einige UI-Komponenten in ihrer aktuellen Form nicht korrekt dargestellt werden.
Wir haben bereits zentrale technische Erkenntnisse gesammelt, erste Mixin-Lösungen entwickelt und Stolpersteine analysiert. Diese Erkenntnisse sollen nun systematisch auf alle Komponenten angewendet und evaluiert werden.
Hinweis: Die Datei enthält eine visuelle Dokumentation der Probleme, Icons im forced-colors-Modus sowie Fokus-Indikatoren, und bietet Designlösungen als Grundlage für die Umsetzung.
To-Do
- Prüfung sämtlicher Komponenten auf Darstellung im Forced-Colors-Modus.
- Dokumentation der Probleme und Lösungen.
- Umsetzung bzw. Anpassung mit möglichen SCSS-Mixins:
@mixin forced-colors-focus@mixin forced-colors-style@mixin forced-colors-border-1px
🗂️ Komponententabelle: Forced-Colors-Kompatibilität
| Komponente | Problem(e) | Lösung(en) |
|---|---|---|
| Accordion | Icon zum Aufklappen ist nicht sichtbar und Fokus wird nicht angezeigt | Nutzung von forced-colors-style und forced-colors-focus Mixins |
| Alert | Icon nicht sichtbar | Nutzung von forced-colors-style Mixin |
| Badge | Icon wird nicht angezeigt | Nutzung von forced-colors-style Mixin
|
| Button | Fokus-Indikator fehlt und Button Varianten lassen sich nicht unterscheiden |
forced-colors-focus verwenden und Styles für Buttons setzen, damit man Primary, Secondary und Tertiary unterscheiden kann (siehe Figma) |
| Card | Card interaktiv ohne Fokus | Nutzung von forced-colors-style Mixin |
| Dialog | Keine Probleme | Keine Probleme |
| Divider | Unsichtbar |
forced-colors-style Mixin |
| Fieldset | Keine Probleme | Keine Probleme |
| Icon | Icons verschwinden (Mask-Nutzung) | Alternative Darstellung ohne mask; forced-colors-style
|
| InputDate | Border-bottom reicht nicht aus | forced-colors-border-1px |
| InputEmail | Border-bottom reicht nicht aus | forced-colors-border-1px |
| InputFile | Border-bottom reicht nicht aus | forced-colors-border-1px |
| InputNumber | Border-bottom reicht nicht aus | forced-colors-border-1px |
| InputPassword | Border-bottom reicht nicht aus | forced-colors-border-1px |
| InputTel | Border-bottom reicht nicht aus | forced-colors-border-1px |
| InputText | Border-bottom reicht nicht aus | forced-colors-border-1px |
| InputUrl | Border-bottom reicht nicht aus | forced-colors-border-1px |
| Checkbox | Unsichtbar | Custom Lösung |
| Checkbox-List | Unsichtbar | Custom Lösung |
| Description-List | Keine Probleme | Keine Probleme |
| Kopfzeile | Keine Probleme | Border Bottom für bessere Übersicht |
| Loader | Loader nur schwarz | Custom Lösung |
| Progress | nicht sichtbar | Custom Lösung |
| Radios | Möglicherweise unsichtbar | Custom Lösung |
| Select | Rand ist unsichtbar | forced-colors-style |
| Summary | Unübersichtlich | Mixin forced-colors-border-1px
|
| Table | box-shadow-border wird nicht angezeigt | Custom Lösung mit Border anstatt box-shadow |
| TaskList | Unübersichtlich | Mixin forced-colors-border-1px
|
| Textarea | Border-bottom reicht nicht aus | forced-colors-border-1px |
| Grid | Keine Probleme | Keine Probleme |
| Heading | Keine Probleme | Keine Probleme |
| Title | Keine Probleme | Keine Probleme |
| Preline | Keine Probleme | Keine Probleme |
| Subline | Keine Probleme | Keine Probleme |
| Label | Keine Probleme | Keine Probleme |
| Body | Keine Probleme | Keine Probleme |
| Link | Fokusindikator & Farbe prüfen | Nutzung von forced-colors-focus Mixin |
| Lists | Keine Probleme | Keine Probleme |
🎯 Ziel
Alle Komponenten sollen im forced-colors-Modus lesbar, bedienbar und visuell erkennbar bleiben. Dabei achten wir auf systemkonforme Fokusanzeigen, alternative Iconlösungen und klare Text-/Hintergrundverhältnisse.