

The same naive example fails though if the user has chosen a high contrast theme with a light background colour – in this case, resulting in pink text on a white background.Īll authors can really do here is to ensure that their styles will “work well” in a high-contrast setting – and as so much of this will depend on all the (undocumented) changes that the operating system and the browser will make to the author’s CSS, there is really not a lot of mileage here beyond some of the more drastic changes such as avoiding the use of background images (which will not be rendered in high contrast modes in Internet Explorer) and instead making alternative visually hidden text for these images visible, if present. Naive example of using -ms-high-contrast-adjust:none to force a particular foreground colour when -ms-high-contrast:active is true– forcing a light colour (in this case pink) works fine if the user happens to have chosen a scheme with a dark background.

Most notably, authors can’t really infer that -ms-high-contrast:active means the default “light colours on dark background” (and then perhaps try to force single-colour elements to use a white foreground colour), as the user may well have a colour scheme that favors “dark colours on light background” instead. However, authors have no indication of what kind of colour scheme the user has actually enabled, so it’s not really appropriate for them to try and force a particular colour (possibly with the addition of -ms-high-contrast-adjust:none) or to load alternative resources such as images with “pre-baked” colors. A simple -ms-high-contrast media feature test, showing that -ms-high-contrast:active evaluates to true when the “High Contrast #1” theme is chosen. Regardless of which specific colour scheme a user has chosen, -ms-high-contrast:active will evaluate to true when any of these high contrast themes are enabled. Windows 10 High Contrast “Choose a theme” settings dialog In addition, users can redefine any of the colours used and save their own custom high contrast theme. For instance, in Windows 10 the user can choose between “High Contrast #1”, “High Contrast #2”, “High Contrast Black” and “High Contrast White”. Windows High Contrast Mode provides users with a selection of different ready-made high-contrast themes.

While on the face this feature seems pretty useful, it arguably provides authors with very little actionable information. The media feature supports three values that can be tested: active, black-on-white and white-on-black. Internet Explorer and Edge have a vendor-prefixed -ms-high-contrast media feature which allows developers to detect if the user is currently in Windows High Contrast Mode, and to apply specific additional style rules in that situation.
