OS: High Contrast versus Inverted Colors

Combined screen shot of a page using WHCM and macOS Invert Colors.
Low resolution screen shots combined to show the same page as seen using Windows High Contrast Mode and macOS Invert Colors settings.

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.

Windows 10 (Fall 2017 Creators Update) high contrast mode settings dialog.
Windows 10 (Fall 2017 Creators Update) high contrast mode settings dialog. Other accessibility features related to color and contrast are clipped in this image.

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.

A GitHub project page as seen in Edge with the high contrast mode enabled.
A GitHub project page as seen in Edge with the high contrast mode enabled.

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).

macOS (HighSierra) invert color settings dialog.
macOS (HighSierra) invert color settings dialog. You can see other accessibility features related to color and contrast in this image. Screen shot provided by Patrick H. Lauke.

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.

A GitHub project page as seen in Safari (High Sierra) with the invert color setting enabled.
A GitHub project page as seen in Safari (High Sierra) with the invert color setting enabled. Screen shot provided by Patrick H. Lauke.

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.

Comparisons

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

A GitHub project page as seen in Safari (High Sierra) with the invert color setting enabled. A GitHub project page as seen in Edge with the high contrast mode enabled.
The same page as viewed first using macOS Invert Colors and then in Windows High Contrast Mode. Note that the pages were captured at different window sizes and are therefore have different heights, so the white bar at the top of the macOS screen shot is easy to miss against this page background. As a result, I left the browser toolbar in the Safari shot.
A GitHub page as viewed in Microsoft Edge with no OS color settings applied. The default view. A GitHub project page as seen in Edge with the high contrast mode enabled.
The original page compared to Windows High Contrast Mode.
A GitHub page as viewed in Microsoft Edge with no OS color settings applied. The default view. A GitHub project page as seen in Safari (High Sierra) with the invert color setting enabled.
The original page compared to macOS Invert Colors. Note that the pages were captured at different window sizes and are therefore have different heights, so the white bar at the top of the macOS screen shot is easy to miss against this page background. As a result, I left the browser toolbar in the Safari shot.
A GitHub project page as seen in Edge with the high contrast mode enabled. The same GitHub page as seen in Firefox 57 using Windows High Contrast Mode.
The first image is Windows High Contrast Mode in Edge (again), the second is the same GitHub page as seen using Firefox 57 in WHCM.

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.

2 Comments

Reply

The Windows 10 Fall Creators Update includes Color Filters in addition to High Contrast. Users can apply filters including inverted, grayscale, grayscale inverted, deuteranopia, protanopia, and tritanopia. The latter 3 are specifically designed to make colors easier to discern for people with color blindness.

Jeff Petty; . Permalink
In response to Jeff Petty. Reply

Jeff, thanks for the note. I casually referred to other features in the screen shot for the dialog, but kept this post focused on just the high contrast feature. Since I have your attention, are you aware of any media queries to target those new features?

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>