OS: High Contrast versus Inverted Colors

There are different ways to make a web page more easy to read, but there are two options that come directly from the operating system that many developers and designers seem to confuse — high contrast and inverted colors.

While the confusion may not be a big deal in most contexts, when talking about implementing support for each it can be critical to know which one you are targeting. Those of who practice the dark arts of accessibility¹ want to be as precise as possible when testing and implementing.

This post is not a judgment about either approach. They both are useful for users in different contexts and do what each says on the tin.

Windows High Contrast Mode

Since Windows 7, users have had the option to apply a color scheme in Windows that reduces the total system colors to a smaller set with much greater contrast than otherwise. While there are some pre-set themes, users can customize the colors as they see fit. The keyboard shortcut to enable it is Left Alt + Shift + Prt Scrn.

Visible Effects

Background images, including gradients, are discarded in Internet Explorer and older versions of Edge. Newer versions of Edge retain background images, but put a solid color block over the image when there is text. I have written more about this in my post CSS Background Images & High Contrast Mode². System colors are applied to text, backgrounds, and form controls. Eric Bailey outlines the CSS keywords you can use to select those colors in slides from his a11yTOCamp talk, Working with High Contrast Mode³. Greg Whitworth has also written some practical advice on accounting for high contrast mode⁴.

Support

Internet Explorer and Edge both support Windows High Contrast Mode. While this is a system-level change, with the exception of Firefox, other browsers do not adjust content to match. I have dropped a screen shot of Firefox way below so you can compare.

Media Queries

You can detect if Windows High Contrast Mode is active with non-standard media queries that are only supported in Internet Explorer and Edge.

@media screen and (-ms-high-contrast: active) { /* All high contrast styling rules */ }
@media screen and (-ms-high-contrast: black-on-white) { /*  */ }
@media screen and (-ms-high-contrast: white-on-black) { /*  */ }

You can then make adjustments to your content, such as not relying on background images or styling controls to be more obvious. Whenever possible, avoid setting any colors, though if you use system colors be sure to test.

macOS Invert Colors Setting

This feature has existed since at least Mac OS X 10.7 Lion. The keyboard shortcut to enable it is Ctrl + ⌥ + ⌘ + 8 (though I understand the shortcut is disabled by default).

Visible Effects

The colors on a web page will be inverted, much like the CSS filter, running the invert filter in Photoshop, or looking at the negative of a photo. Essentially, a color is replaced with its opposite, including black and white. If a page already has poor contrast, this does not increase the contrast, though the color swapping may improve perception for some users. You will see in the screen shot that images are inverted as well. At the OS level, the smart invert is supposed to not invert images⁶.

Support

Because this is a system-level inversion of the colors, it impacts the entire operating system, including all browsers and the content within them.

Media Queries

Safari on macOS High Sierra supports the inverted-colors media query. While this media query was planned for CSS Media Queries Level 4, it has been kicked to Level 5⁸, so its standards-track speed has slowed. PPK offers a quick support test⁹ on his site.

@media screen and (inverted-colors: inverted) { /* All inverted color styling rules */ }

You should be careful how you use this media query, since a user typically flips to this mode for a reason. At the very least, you can use it to un-invert (unvert) images on a page.

Update: March 30, 2018

While I could not get the smart invert feature to work, meaning images and video were inverted along with the rest of the page, it sounds like Safari may be addressing this:

Comparisons

I am just Dropping some images in here for visual comparison. No new information.

Wrap-up

Invert color is particularly handy for reading bright pages in a low-light setting. It does nothing to increase the contrast. High contrast mode is handy for creating contrast where there is too little contrast on a page. It may be annoying in a low light setting if you use the default them and the page has a lot of elements that use the brighter colors.

You can approximate the macOS invert color setting with my invert color bookmarklet¹¹. The bookmarklet unverts images and video. I also have instructions to make the bookmarklet work on mobile devices¹².

You may have noticed that the macOS screen shot shows an option to increase contrast. That is not the same as a high contrast mode, and mostly works like the contrast slider in Instagram.

You also may have noticed that my Windows settings dialog was dark. This is not from Windows High Contrast Mode, this is because I run Windows (and Office, and Firefox, and so on) with a dark theme to help my eyes and my battery.

Update: April 6, 2018

Matthew Atkinson has written a series of posts about color and perception, but it never occurred to me to link this post of his (which was released after I wrote mine): How “invert brightness” can improve accessibility and help us use our devices¹³