javascriptcssmacosaccessibilityhigh-contrast

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


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

  • you can do this in safari technical preview right now:

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

    you should use this on:

    you should not use this on:

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