Testing in Forced Colors Mode

Understanding the forced-colors CSS media query

From MDN:

The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.

Regarding Windows High Contrast mode, as highlighted on the Microsoft Edge Blog:

The name “high contrast” is actually a misnomer—users can set their theme colors to whatever they prefer, including themes that result in lower than common contrast levels.

@media (forced-colors: active) {	/* Styles here apply only when forced colors are active */}

Who uses this feature?

As Kilian Valkhof explains:

High contrast mode is useful for many different people and includes people with low vision, color blindness, people prone to migraines or light sensitivity and people prone to overstimulation.

But also people who know of the feature and use it to keep their screen readable in bright sunlight, or dim their entire UI in dark environments

So why should we test in forced colors mode?

As Dave Rupert mentions, “it’s worthwhile to test High-Contrast Mode just to support low-vision users.” Additionally, since forced colors mode “aggressively flattens and removes colors it has a knock-on effect of showing places where you’ve over-relied on color to make elements or states distinct, which is another accessibility error in itself (§1.4.1).”

CSS properties affected by forced-color mode

Forced-color mode impacts various CSS properties. For a comprehensive list and detailed explanation, refer to the MDN documentation.