CODEWITHSUNDEEP
javascriptcsshigh-contrast
pagid
pagid

Reputation: 13867

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

Upvotes: 10

Views: 11306

Answers (4)

danday74
danday74

Reputation: 56936

Use @media (prefers-contrast: more):

.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

It's supported in all major evergreen browsers.

Warning: -ms-high-contrast only works in Microsoft browsers.

Upvotes: 2

Prabhat Maurya
Prabhat Maurya

Reputation: 1088

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............. */ }

Upvotes: 1

robert4
robert4

Reputation: 1102

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.

Upvotes: 4

instanceof me
instanceof me

Reputation: 39138

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.

Upvotes: 7

Related Questions