Windows - High Contrast mode

What is high contrast mode?

High Contrast in Windows is an accessibility feature designed to increase text readability and make it easier to read. There are many reasons why someone may turn on High Contrast in Windows: to better see items on the screen, to reduce visual noise and focus better, to relieve 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: Instruction from Microsoft

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

• media query forced-colors: is used to detect the active forced-colors mode, which essentially corresponds to the High Contrast feature in Windows, but potentially similar forced-colors modes may 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 descendant elements.

• media query prefers-contrast: is used to detect whether the user prefers content presented in 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 still want to display our color palette to the user

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. Widget in default version

Figure 2. Widget in high contrast

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

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

we will remove the system forced colors, any text backgrounds, and other adjusted CSS properties from the element and its subtree - essentially, we revert any forced-colors mode styles. However, we should remember to make sure that the color swatches always render against 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