Windows - High contrast mode

What is high contrast mode?

High contrast in Windows is an accessibility feature designed to increase text readability and improve ease of reading. There are many reasons someone might enable high contrast in Windows: to better see items on the screen, to reduce visual noise and focus more easily, to alleviate eye strain, migraines, or light sensitivity.

Apps can integrate with the user's system colors and adapt the user's theme to their interface; for example, browsers can apply high-contrast theme colors semantically to HTML elements and adjust some CSS properties to reduce visual noise.

How to enable high contrast mode?

The instructions can be found here: Instructions from Microsoft's site

Creating styles for high contrast mode

In most cases it is not necessary to write separate CSS rules for high contrast mode, because the web platform provides good text readability and by default applies the user's colors to semantic HTML elements. However, if we want to do so we can use:

• media query forced-colors: is used to detect an active forced color mode which basically corresponds to the high contrast feature in Windows, but similar forced color modes could potentially appear in other operating systems in the future.

• property forced-color-adjust: controls whether the system theme colors should be applied to the element and its descendants.

• media query prefers-contrast: is used to detect whether the user prefers content presented with lower or higher contrast.

Detailed description with use cases:

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast

https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust

A case when we still want to display our color palette to the user

Assume we are creating a website for a service that sends clothes tailored to individual preferences. We style the following widget that offers suggested color palettes to the user:

Illustration 1. Widget in default version

Illustration 2. Widget in high contrast

After using the property forced-color-adjust: none :

@media (forced-colors: active) {
  .prefs__palette {
     forced-color-adjust: none;
  }
}

we remove the forced system colors, any text backgrounds and other customized CSS properties from the element and its subtree - essentially undoing any forced color mode styles. However, we should remember that color swatches should always render on a pure black or white background so they appear distinct regardless of the user's system colors.

Illustration 3. Widget after using the forced-color-adjust: none property