Windows - High Contrast Mode

What is high contrast mode?

High contrast in Windows is an accessibility feature designed to increase text readability and make content easier to read. There are many reasons why someone may enable high contrast in Windows: to see screen elements better, to reduce visual noise and focus better, to ease 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 do you enable high contrast mode?

The description can be found here: Microsoft instructions

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 applies user colors to semantic HTML elements by default. However, if we want to do so, we can use:

• media query forced-colors: is used to detect the active forced colors mode, which is essentially equivalent to the high contrast feature in Windows, but in the future similar forced colors modes may appear in other operating systems.
• 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

The case when we want to display our color palette to the user anyway

Let's assume we are creating a website for a service that sends clothes tailored to individual preferences. We style the following widget, which provides the user with suggested color palettes:

Figure 1. Default widget

Figure 2. High contrast widget

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

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

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

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