Windows High Contrast Mode

Für erhöhten Kontrast gibt es zwei grundverschiedene Ansätze. Sie werden häufig verwechselt.

Über die CSS-Media-Query prefers-contrast: more lässt sich ein eigenes, kontraststärkeres Farbschema definieren. Das Signal bedeutet lediglich: Diese Person wünscht mehr Kontrast. Wie viel mehr, entscheidet die Gestaltung — die Verantwortung liegt vollständig beim Entwicklungsteam. macOS und iOS setzen auf diesen Weg, dort löst die Einstellung »Kontrast erhöhen« die Abfrage aus.

Der Windows High Contrast Mode, technisch Forced Colors Mode, funktioniert grundlegend anders: Das Betriebssystem erzwingt ein Farbschema für die Oberfläche wie für Webinhalte. Erkannt wird er über forced-colors: active.

Dabei werden sämtliche Farben auf eine kleine Systempalette abgebildet, Hintergrundbilder verschwinden und Schatten entfallen. Genau daraus entstehen die typischen Probleme.

Seit Windows 11 heißt die Funktion »Kontrastdesigns«, zu finden unter Einstellungen › Barrierefreiheit. Die Umbenennung ist treffend: Die Schemata sind frei konfigurierbar, es geht nicht zwingend um maximalen Kontrast. Manche Menschen wählen bewusst weichere Kombinationen, weil sie angenehmer zu lesen sind.

Grundsätzlich soll die Systementscheidung Vorrang haben. Statt eigene Farben zu setzen, arbeitet man mit den CSS-Systemfarben Canvas, CanvasText, LinkText, ButtonFace und Highlight. Dann fügt sich alles von selbst ein.

An vier Stellen geht dabei jedoch Information verloren, und dort muss man eingreifen:

• Schaltflächen ohne Rahmen verschwinden, wenn sie nur über eine Hintergrundfarbe erkennbar waren. Ein zusätzlicher border schafft Abhilfe

• Fokusindikatoren als box-shadow entfallen ersatzlos. Deshalb outline statt Schatten

• SVG-Icons mit fest eingetragenen Füllfarben bleiben falsch stehen; mit fill: currentColor erben sie die Systemfarbe

• Farbmuster, Diagramme und Farbwähler verlieren ihren Zweck, wenn die Farbe die Information ist. Hier hilft forced-color-adjust: none