Konzepte

forced-colors

Auch: High Contrast Mode, HCM, Windows High Contrast, Forced Colors Mode

Die CSS-Media-Query, die nutzerseitig konfigurierte Hochkontrastmodi erkennt — primär den Windows-Hochkontrastmodus sowie Forced Colors in Chrome und Edge. Autoren nutzen sie, um die Darstellung anzupassen, wenn Systemfarbeinstellungen die Site-Stile überschreiben.

forced-colors ist die CSS-Media-Query, die erkennt, ob der Nutzende einen Forced-Color-Modus aktiviert hat — typischerweise den Windows-Hochkontrastmodus (HCM), der die Farbwahl einer Website mit einer kleinen Systempalette überschreibt, die der Nutzende selbst gewählt hat (Weiß auf Schwarz, Schwarz auf Weiß, Gelb auf Schwarz oder eine benutzerdefinierte Palette).

Der Forced-Color-Modus wird intensiv von Menschen mit Sehbeeinträchtigungen genutzt, insbesondere von solchen mit Lichtempfindlichkeit oder extremem Kontrastbedarf. Er wird auch als persönliche Einstellung von Nutzenden ohne dokumentierte Behinderung verwendet, die schlicht hohen Kontrast bevorzugen.

Was HCM tatsächlich bewirkt

Wenn der Windows-Hochkontrastmodus aktiv ist, ersetzt das Betriebssystem die Seitenfarben durch einen kleinen Satz von Systemfarben:

  • Canvas — der Seitenhintergrund.
  • CanvasText — die Standard-Textfarbe.
  • LinkText — die Linkfarbe.
  • VisitedText — die Farbe besuchter Links.
  • ButtonText — der Schaltflächentext.
  • ButtonFace — der Schaltflächenhintergrund.
  • HighlightText / Highlight — Farben für ausgewählten Text.
  • GrayText — deaktivierter Text.
  • Mark / MarkText — hervorgehobener Text.

Browser im Forced-Colors-Modus ersetzen die meisten vom Autor definierten Farben durch diese Systemfarben. Außerdem entfernen sie Hintergrundbilder und setzen mehrere visuelle Eigenschaften auf Systemstandards zurück.

Das ist beabsichtigt: Der Nutzende hat eine Kontrastpalette gewählt, die für ihn funktioniert, und möchte nicht, dass die Site diese Wahl überschreibt. Die Aufgabe der Site ist es, zu kooperieren, nicht dagegen anzukämpfen.

Die CSS-Media-Query

Der Forced-Colors-Modus wird so erkannt:

@media (forced-colors: active) {
  /* Der Nutzende befindet sich in HCM oder einem gleichwertigen Modus; CSS hier anpassen */
}

Der zugehörige Wert prefers-color-scheme ist unabhängig — ein Nutzender kann sich im dunklen Forced-Colors-Modus (Weiß-auf-Schwarz-Systempalette) befinden, während die prefers-color-scheme-Query dennoch light zurückgibt, weil der Nutzende keinen expliziten „Dunkelmodus“ gewählt hat.

Was in der Praxis schiefgeht

  • Hintergrundbilder werden unsichtbar. Forced Colors entfernt Hintergrundbilder. Wenn der „zum Ausklappen klicken“-Pfeil ein SVG als Hintergrundbild ohne Text-Fallback ist, sieht der Nutzende nichts. Abhilfe: <svg> oder eingebettete Icons mit currentColor verwenden, damit sie CanvasText aufnehmen, oder einen Text-Fallback bereitstellen.
  • Rahmen verschwinden. Manche Rahmen werden entfernt oder durch CanvasText-farbige Rahmen ersetzt. Visuelle Hierarchien, die auf subtilen Rahmenfarben beruhten, sind weg. Komponenten-Rahmen in HCM prüfen.
  • Fokusindikatoren funktionieren nicht mehr. Benutzerdefinierte Fokusringe, die mit box-shadow gezeichnet werden, verlieren ihre Farbe. outline (das erhalten bleibt) verwenden oder Forced Colors erkennen und einen systemfarbenbewussten Fallback bereitstellen.
  • Nur-bei-Hover-sichtbare Elemente verschwinden dauerhaft. Tooltip-artige Komponenten, die auf Hover-Zuständen mit Hintergrundbildern basieren, schlagen fehl.
  • forced-color-adjust: none. Manche Designer nutzen diese CSS-Eigenschaft, um die Forced-Colors-Verarbeitung für ein bestimmtes Element zu deaktivieren. Das ist fast immer die falsche Wahl — der Nutzende verliert damit die Farben, die er explizit angefordert hat. Sparsam einsetzen, nur für rein dekorative Elemente, bei denen die Designidentität wesentlich ist (Logos, markenspezifische Icons), und niemals für Text oder interaktive Steuerelemente.

Wie man testet

Windows: Einstellungen → Barrierefreiheit → Kontrastdesigns → eines der integrierten Designs wählen (Aquatic, Desert, Dusk, Night sky) und die Seite neu laden. Chrome und Edge übernehmen die Systemeinstellung; Firefox verfügt über einen eigenen Forced-Colors-Schalter in den Browser-Einstellungen.

Die meisten Probleme fallen bei der ersten Inspektion auf: fehlende Icons, unsichtbare Rahmen, defekte Fokusringe. Behebung mit systemfarbenbewusstem CSS innerhalb der forced-colors: active-Media-Query.