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 clutter and focus more easily, to alleviate eye strain, migraines, or photophobia.

Applications 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: Guide 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 essentially corresponds to Windows' high contrast feature, but similar forced color modes may potentially appear on other operating systems in the future.

• property forced-color-adjust: controls whether the system theme colors should be applied to an 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

Case when we do want to show our color palette to the user

Suppose we are building a website for a service that sends clothing matched to individual preferences. We style the following widget that provides the user with suggested color palettes:

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 system forced colors, any text backgrounds and other customized CSS properties from the element and its subtree - essentially reverting any forced color mode styles. However, we should remember that the color swatches should always render on purely black or white backgrounds so they appear distinct regardless of the user's system colors.

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