CSS Background Images & High Contrast Mode

I try to stay up on accessibility gotchas and weird browser implementations, but I just discovered one that I suspect I should have already known.

In Steve Faulkner’s post, Notes on accessible CSS image sprites, he tosses out a factoid that was new to me:

When high contrast mode is enabled in the Windows OS, the sprite is not displayed (CSS background images are not displayed in high contrast mode).

This statement is made in a larger discussion of how to create appropriate fall-backs for designs that rely on CSS image sprites. He provides some handy scripts and techniques within the article.

Separately from this I saw a post yesterday on one of the Microsoft blogs titled -ms-high-contrast media feature that discusses a media query for Windows 8 and IE10 that will detect if the viewer is using high contrast mode (and which flavor).

The code is pretty simple and uses an -ms prefix to do its work:

@media screen and (-ms-high-contrast: active) {/* All high contrast styling rules */}
@media screen and (-ms-high-contrast: black-on-white) {
    div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
    div { background-image: url('image-wb.png'); }
}

Clearly this isn’t ready for prime time, and you’ll still need to use techniques outlined in Faulkner’s post, but it is a handy technique that I hope makes it into the spec and gets support from other operating systems and browsers.

Granted, web devs may still screw it up (as they have with accessibility and/or print styles for years now), but at least those worth their salt (and rates) will have another tool to better support users in various configurations.

Related

• Techniques for High-Contrast-Friendly Icons

Update: November 8, 2013

With coming support for the luminosity media query in CSS4, perhaps you can re-use some of your work for high contrast mode or vice versa: Responding to environmental lighting with CSS Media Queries Level 4

Update: October 14, 2014

In CSS Background Images and Accessibility by SSB Bart Group, the author makes the case that not relying on background images is the best approach for accessibility (offering alternative techniques to satisfy design requirements).

Update: April 20, 2016

Changes are coming in Microsoft Edge:

Microsoft Edge will no longer remove background images, and instead will render an opaque layer behind text to improve legibility while maintaining the site design.

[…]

Along with the changes we have retained full developer control over browser implicit enhancements with -ms-high-contrast media feature and -ms-high-contrast-adjust property.

[…]

Users can disable the “Render backgrounds in high contrast” feature under about:flags to get the previous behavior.

Update: September 23, 2016

CSS tricks has a nice tutorial on making your SVG images work with High Contrast Mode. It really is as simple as changing the fill and maybe background-color styles in your media queries (excluding cases where the SVG is more complex than one color). Read: Accessible SVGs in High Contrast Mode

Update: December 12, 2016

Over at the Paciello Group blog, Patrick Lauke has put together an interesting piece on the limitations within the media query.

In summary, while on the face the -ms-high-contrast media feature may look useful for authors, in practice the information that an author can get from querying this feature is limited (in the case of -ms-high-contrast:active) and only applicable in some very specific situations (for -ms-high-contrast:white-on-black and -ms-high-contrast:black-on-white).

Update: July 28, 2017

In a response to Patrick’s post (linked above), Greg Whitworth penned How to use -ms-high-contrast. In it he provides some details on how the high contrast colors are assigned to web pages:

To make this easier we mapped the Windows High Contrast colors to CSS system color keywords so you can utilize the specified colors without needing to know them.

• Text is mapped to windowText
• Hyperlinks is mapped to N/A, we apply the color to <a>
• Selected Text is mapped to highlightText & highlight
• Button Text is mapped to buttonFace
• Background is mapped to window

CSS system color keywords are an awesome feature, one that many developers keep forgetting exist.

Update: November 19, 2017

Eric Bailey presented a great talk about Windows High Contrast Mode at a11yTO Camp. His slides are on GitHub.

Update: August 7, 2019

Greg Whitworth tackled a question I posted on Twitter first by responding with handy detail, and then by blogging about it: Working with the text backplate in Windows High Contrast

Spoiler: if you are doing a good job of using WHCM and are trying to visually invert controls for hover/focus states, then -ms-high-contrast-adjust: none; can be just what you need.