How to detect MAC OS' inverted color mode in javascript / css?


Tags: javascript,css,osx,accessibility,high-contrast

Problem :

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?



Solution :

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


    CSS Howto..

    How to persist checking the screen width in Javascript

    How can I put two divs shaped as circles next to each other?

    how to run html$css$js files locally on browser [closed]

    How to style for first class css

    How to make overflow blocks working well ()

    How to reverse a CSS animation on unchecked state?

    How to do this with vertically stacked tabs, instead of horizontal?

    How to apply inline and/or external CSS loaded dynamically with jQuery

    How to implement a finished coded html/css page into CMS [closed]

    How can you prevent Formsauthentication to block css and images?

    How to display a box of color beside a table row using CSS?

    css - how to determine why a particular css rule is being overwritten

    Showing a large amount of HTML alternative content with swfobject & swffit flash site

    How to add -moz & -o prefixes to code containing only -webkit tags

    How to inject javascript var into css

    How to set vertical alignmetn of text in bootstrap select control?

    How to draw error icon with css only,exactly like in the image

    How do I center my search form within a div?

    How to apply css to div content based on regex

    how to change css property of 2nd & 6rd DIV using jquery

    How this blur works

    How to set element in css at fixed position

    How to modify multiple elements of a block with BEM CSS

    How to align images and text in css?

    how to give css for arranging label, textbox and text area side by side in the same line

    How to create a mouseover effect on menu links EXCEPT for the current page?

    How to create an enumerated tabular environment in HTML/CSS?

    How can I change the paragraph formatting in the SharePoint RichHtmlField

    How to crop an image edge

    CSS - How to make a div as wide as a containing child img