Get Firefox, a free web browser backed by Mozilla, a non-profit dedicated to internet health and privacy. Available now on Windows, Mac, Linux, Android and iOS. How to Disable the Firewall on a Mac in macOS High Sierra August 12, 2018 by Kermit Matthews Your MacBook that is running the macOS High Sierra operating system has a built-in firewall to prevent unauthorized connections across the Internet from gaining access to your computer.
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.
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.
Firefox High Sierra
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.
Firefox Mac High Sierra
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:
Firefox High Sierra Crash
Safari Tech Preview double inverts images and video when on 'invert colors' mode in the OS, so they appear normally while the rest of the UI can have the inverted colors. Sweet!