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

Question

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

Answer 1

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.

Answer 2

The following works for me on Win8 with (the desktop-)IE:

<style type="text/css">
// ...
@media screen and (-ms-high-contrast: active) {
   /* any rules may come here, for example: */
   .leftMenu a:hover { text-decoration: underline; }
}
// ...
</style>

I think it must work with Windows Store Apps as well. This is not a complete solution, but maybe useful a bit.

MSDN doc: @media, -ms-high-contrast. The High-contrast mode description is also worth mentioning.

Answer 3

If you are implementing high contrast in your web application then use following code block for detecting black-on-white and white-on-black contrast selection. This will work fine in IE.

@media screen and (-ms-high-contrast: black-on-white) { /* Put your styling code............. */ }

@media screen and (-ms-high-contrast: white-on-black) { /* Put your styling code............. */ }