javascriptcsshigh-contrast

How to check if user is in high contrast mode via JavaScript or CSS


When pressing Shift+Left+Alt+Print Windows switches into high contrast mode - is there any chance to detect that on a web page (using JavaScript or CSS)?

Is there any chance to detect that in the HTTP-Request (a.k.a the server-side e.g. via PHP or Ruby)?


Solution

  • According to this article about using CSS sprites in high contrast, in high contrast mode on Windows, background images should be set to "none" and it also changes the background color. This should override any CSS stylesheet. So you can perform some javascript to detect it after initial rendering. Check his demo page (the "FYI [Not] in high contrast mode" text).

    I have Mac (FYI switch using Cmd + Alt + Ctrl + 8) and his technique doesn't work for me, but he says it works on Windows.

    If it works, you can either use some JavaScript to simply change your CSS or set a (session) cookie and reload the page to pass it to the server and perform server-side actions.