How to detect MAC OS inverted color mode in JavaScript / CSS?

Question

I want to do some extra contrast work if the OS is in high contrast mode. With Windows we can use the media queries like

@media screen and (-ms-high-contrast: active) {}

which would detect this via media query and we can extend the functionality from there. If we don't have a media query like this in Mac OS, perhaps there's a JS alternative? Or does it invert the colors at such a low level that we can't really look into it at all?

Answer 1

you can do this in safari technical preview right now:

@media (inverted-colors) {
    img.cancel-inversion {
        filter: invert(1);
    }
}

you should use this on:

• photographs
• .icns-ish icon images (things like app icons are okay)

you should not use this on:

• images of text (I mean, you shouldn't use images of text, but if you must for some reason... don't use this technique on those images!)
• decorative images
• monochrome glyphs (things that look like font icons)

while we're on this subject reduce motion media query is in safari technical preview right now as well.

Answer 2

No. This is not possible.

This is an answer based on opinion and circumstantial evidence:

1. The invert color mode does not operate like Windows High Contrast Mode. It does not change content (such as by removing background images on a page), so making it available via a media query does not offer any benefits to the end user but instead opens an avenue for abuse.

2. The feature in Objective-C to determine if the accessibility mode is active (boolean AXAPIEnabled(void);) has been deprecated as of 10.9 with no indication that there is a replacement. You can see it on the Apple Developer site. By extension, if developers at that level of the system no longer have access, I expect web developers would also be restricted (just as AppleScript writers seem to not have access).

3. In general, testing for the presence of assistive technology or activation of assistive features is frowned upon by the users who need it most. It creates the very real risk of both well-intentioned developers breaking these features (perhaps by un-verting the page) and also of allowing bad actors to determine somebody's personal health information.

4. I can find no documentation from Apple saying how to do this or even acknowledging that there is a way to do this. I also have asked around the accessibility community and most think it does not exist (and would be a bad idea).

5. There was a plan for an inverted-colors media query in CSS 4, but you will see it is not in the latest draft (6.4 is now color-gamut). It was dropped seemingly in favor of a light level MQ while accessibility-specific MQs are defined.

I hope someone can give you a clearer answer. I suggest you look on Twitter for any Apple Dev Rel folks and direct them here (assuming you are not a member of the Apple Developer Program, though I suspect you would have asked there).

Answer 3

How to detect MAC OS inverted color mode in JavaScript / CSS?

The JavaScript/TypeScript answer involves programmatically testing the @media (inverted-colors) query that @gregwario posted. The below function returns a boolean value.

isUsingMacInvertedColors: () => {
      const mediaQueryList = window.matchMedia('(inverted-colors: inverted)');
      return mediaQueryList.matches;
}