19 Adapting your websites and applications to forced colors mode

Display modes

Display Modes sind eine Barrierefreiheitsfunktion, die vordefinierte visuelle Konfigurationen auf Betriebssystemebene (OS) zur Verfügung stellt, die Webinhalte im Browser beeinflussen können.

  • Dark Mode
  • Reduced Motion Mode
  • Invert colors
  • Increase contrast
  • Text contrast
  • Reduce transparency
  • Reader Mode
  • Windows Contrast Themes (formerly Windows High Contrast Mode)

Manche dieser Funktionen beeinflussen Websites gar nicht, manche nur, wenn diese diejenige Funktion explizit unterstützen (z.B. Dark Mode + @media prefers-color-scheme: dark).
Manche dieser Funktionen beeinflussen immer auch die Website, egal, ob sie explizit unterstützt werden oder nicht (z.B. Invert colors - das kehrt die Farben um, beeinflusst aber nicht die Farbpalette als solche).

Forced Colors Mode

Der Forced Colors Mode deaktiviert die auf einer Website verwendeten Farben und wendet ein eigenes Farbschema an.

Windows 11: Contrast Themes bzw. Windows High Contrast Mode (WHCM) in älteren Versionen - standardisiert unter der forced-colors Medien-Funktion in CSS.

Wer benutzt den Forced Colors Mode?

Personen mit visuellen Beeinträchtigungen wie Sehschwäche oder Lichtempfindlichkeit. High contrast modes (heller Text auf dunklem Hintergrund) sind sehr beliebt. 4% aller aktiven Windows-PCs benutzen den High-Contrast-Mode.

Windows high contrast color themes

Sowohl in Windows 10 als auch Windows 11 kann zwischen vier verschiedenen Themes gewählt werden. Alle benutzen eine reduzierte Farbpalette mit hohem Kontrast. Jede Farbe kann vom Benutzer individuell verändert werden.

Was passiert mit einer Website, wenn ein High Contrast Theme aktiviert ist?

Gewisse CSS-Eigenschaften werden überschrieben, um die Lesbarkeit zu gewährleisten (Textfarbe, Hintergrundfarbe, text-decoration color, ... = force-adjusting of styles), manche Eigenschaften werden komplett deaktiviert (Box-Shadow, Text-Shadow, Hintergrundbilder, die nicht die url()-Funktion verwenden ...).

Wie beeinflusst der Forced Colors Mode das Website-Design?

Der Forced Colors Mode basiert auf dem HTML-Markup. Viele HTML-Elemente sind standardmäßig auf system colors gemappt. Forced Colors Mode bekommt keine Information vom accTree! D.h., ARIA-Attribute beeinflussen die Styles im FCM nicht! Custom Widgets müssen manuell angepasst werden:

  1. Feststellen, ob der Forced Colors Mode aktiv ist
  2. CSS System Colors keywords verwenden, um die Widgets zu stylen

Niemals die eigenen Farbeinstellungen aufzwingen!

Relevante Success Criteria

SC 1.4.8 Visual Presentation (Level AAA)
For the visual presentation of blocks of text, a mechanism is available to achieve the following:
  • Foreground and background colors can be selected by the user
  • ...

Den Forced Colors Mode erkennen

Mit feature queries in CSS oder mit JavaScript:

/* Check if forced colors mode is active on any OS */

/* Internet Explorer, deprecated */
@media screen and (-ms-high-contrast: active) { ... }

/* all modern browsers */
@media screen and (forced-colors: active) {
  /* put your forced colors mode style adjustments here */
}
const forced_colors = matchMedia('(forced-colors: active');

if ( forced_colors.matches ) {
  // do stuff for Forced Colors Mode
}

CSS System Color keywords für forced-colors-spezifische Anpassungen

CSS Color Module Level 3: 28 System Color Keywords (deprecated, IE, early versions of Edge)

  • Text ➟ WindowText
  • Hyperlinks ➟ <a> (-ms-hotlight)
  • Disabled Text ➟ GrayText
  • Selected Text, Selected Text Background ➟ HighlightText, Highlight
  • Button Text, Button Background ➟ ButtonText, ButtonFace
  • Background ➟ Window
/* proprietary, Internet Explorer and Edge only */

@media screen and (-ms-high-contrast: active) {
  svg {
    fill: windowText; /* icon's fill color inherits the color of its surrounding text /*
  }
}

CSS Color Module Level 4: 19 System Color Keywords www.w3.org 6.2 System Colors

  • Text ➟ CanvasText
  • Hyperlinks ➟ LinkText
  • Disabled Text ➟ GrayText
  • Selected Text, Selected Text Background ➟ HighlightText, Highlight
  • Button Text, Button Background ➟ ButtonText, ButtonFace
  • Background ➟ Canvas
/* Standard; all modern supporting browsers */

@media (forced-colors: active) {
  svg {
    fill: canvasText; /* icon's fill color inherits the color of its surrounding text /*
  }
}

Custom ARIA Widgets in Forced Colors Mode gestalten

Ein natives <button>-Element mappt automatisch auf die Button-Styles im FCM. Ein nachgebauter Button mit ARIA-Attributen wird vom FCM nicht erkannt.

@media (forced-colors: active) {
  div[role="button"] {
    color: ButtonText;
    border-color: ButtonText;
  }
  div[role="button"][aria-disabled="true"] {
    color: GrayText;
    border-color: ButtonText;
  }
}

Forced Colors Mode deaktivieren/überschreiben

In welchen Fällen möchte man den FCM deaktivieren: Immer dann, wenn die Farbe essentiell für das Verständnis ist. Ein Webshop bietet ein Produkt in bestimmten Farben an und man kann nach dieser Farbe filtern (Color swatch). Der FCM würde diese Farbfelder überschreiben.

@media (forced-colors: active) {
  .color-swatch {
  /* opt the .color-swatch element(s) out of the forced colors palette */
    forced-colors-adjust: none;
  }
}

Besser als ein color-swatch ist allerdings ein <svg>. SVG-Bilder und deren Inhalt bleiben im FCM erhalten. Da SVGs mit einem accName ausgezeichnet werden können, sind diese Color Swatches auch für AT verständlich.

Tips für die Vorbereitung von Inhalten für den FCM

Verlasse dich niemals auf Farbe alleine um Elemente auf der Seite zu unterscheiden (Buttons): border: 1px solid transparent; für alle Buttons, Widgets, ... die sich durch ihre Hintergrundfarbe oder Schatten abheben. Ebenso alle überlappenden Elemente wie Dialoge, Modals, Flyouts wie Drop-Down-Navigationen

Verlasse dich nie auf Farbe alleine, um Informationen zu kommunizieren! Fehlermeldungen, Warnungen etc. sollten immer auch mittels einem weiteren Hinweis wie einem Icon oder einem Muster kommuniziert werden.

Relevante Success Criteria

SC 1.4.1 Use of Color (Level AA)
Color is not used as the only visual means of conveying informatione, indicating an action, promting a response, or distinguishing a visual element.

Entferne Link-Underlines nie komplett! Linkunterstreichungen mit box-shadow etc. gehen im FCM völlig verloren. Man kann sie mit text-decoration-color: transparent; für den FCM erhalten und dann eigene Styles ergänzen.

Entferne Fokus-Styles nie komplett! outline-color: transparent; als Fallback verwenden!

Benutze svg für Icons! SVG kann inline eingebunden werden und so die Farbe vom Kontext übernehmen. stroke/fill: currentColor. Wenn die Farbe nicht geändert werden kann, dann eine Systemfarbe verwenden! (Siehe Video)

Entferne ornamental styles. Box-Shadow, Gradient-Background-Images werden deaktiviert bzw. entfernt, ebenso alles, was mit CSS aufgehübscht werden kann, z.B. border images, custom list markers, custom cursors und Inhalte, die mit der CSS content property hinzugefügt werden. 

@media (forced-colors: active) {
  *, ::before, ::after {
    border-image: none !important;
    list-style-image: none !important;
    cursor: revert !important;
  }
}

Verwende <picture> und srcset um einen Fallback für Bilder mit Transparenzen zur Verfügung zu stellen!

<picture>
  <source srcset="logo-without-transparency.jpg" media="(forced-colors-active)">
  <img src="logo-with-transparency.svg" alt="[ IMAGE ALT TEXT ]">
</picture>

Links