Windows Contrast themes / High contrast mode in media queries

README.md

Windows Contrast themes / High contrast mode in media queries

Here are all relevant media queries to consider when supporting Contrast Themes / Windows High Contrast Mode.

Results

MS Edge 101, Windows 10 Pro 21H2

• No High Contrast:
  • (forced-colors: none), (prefers-color-scheme: light), (prefers-contrast: no-preference)
• High Contrast #1:
  • (forced-colors: active), (prefers-contrast: more), (prefers-color-scheme: dark)
• High Contrast #2:
  • (forced-colors: active), (prefers-contrast: more), (prefers-color-scheme: dark)
• High Contrast White:
  • (forced-colors: active), (prefers-contrast: more), (prefers-color-scheme: light)
• High Contrast Black:
  • (forced-colors: active), (prefers-contrast: more), (prefers-color-scheme: dark)
• Custom theme (with a dark background):
  • (forced-colors: active), (prefers-contrast: custom), (prefers-color-scheme: dark)
• Custom theme (with a light background):
  • (forced-colors: active), (prefers-contrast: custom), (prefers-color-scheme: light)

Firefox 100, Windows 10 Pro 21H2

High Contrast on: "(forced-colors: active), (prefers-color-scheme: light)"

High Contrast off: "(forced-colors: none), (prefers-color-scheme: light)"

Code

Copy-paste in the browser console:

[
  "(forced-colors: none)",
  "(forced-colors: active)",
  "(prefers-contrast: more)",
  "(prefers-contrast: less)",
  "(prefers-contrast: custom)",
  "(prefers-color-scheme: light)",
  "(prefers-color-scheme: dark)",
  "(prefers-contrast: no-preference)",
]
  .map(window.matchMedia)
  .filter((m) => m.matches)
  .map((m) => m.media)
  .join(", ");