CSS Background Images & High Contrast Mode

Screen shot showing web page in both high-contrast and normal 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.

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.

2 Comments

Reply

Hi there, thanks for the post :)

FWIW, I wrote a tiny Modernizr test to check for High Contrast mode activation: https://codepen.io/ffoodd/pen/RWmmOO

I originally wrote it for a fake underlines thing, based on background-image and gradients (https://codepen.io/ffoodd/pen/jbRMqJ) and wanted it to gracefully fallback to real underlines in HC mode.

I don’t use this anymore, but I thought it could be mentionned beside the -ms-high-contrast query.

Have a nice day!

In response to Gaël Poupard. Reply

Gaël, an add-in for Modernizr is a good idea, but Modernizr isn’t strictly necessary. I do the same thing on this site (fake underlines via gradient backgrounds) and disable them and re-enable underlines with just @media screen and (-ms-high-contrast:active). Since this is IE/Edge-only, there is no need for Modernizr’s additional checks. That being said, it’s great that you even considered WHCM users, considering so few sites do when they rely on non-underline underlines.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>