Detecting Windows High Contrast Mode for New and Old Browsers

There was a good post by Scott O’Hara last Thursday on how to detect Windows High Contrast mode in JavaScript and CSS.

The most straight forward way to do this is to use their media queries in CSS (forced-colors: active and prefers-color-scheme: dark, respectively).

While the media query for forced-colors works well with all modern browsers in Windows (Chromium Edge, Chrome, Firefox), it doesn’t work in IE or old Edge. Since many people using assistive technology might still be stuck on IE for various reasons (see e.g. WebAIM’s latest survey), it might be a good idea to support the old proprietary media query -ms-high-contrast.

As detailed in a Microsoft blog post from 2020 on styling for Windows high contrast, you can support both old and new in CSS with
@media (forced-colors: active), (-ms-high-contrast: active) { /* ... */ }
and in JavaScript matchMedia('(forced-colors: active), (-ms-high-contrast: active)').

Leave a comment