High Contrast Mode in Internet Explorer 10 and greater

suggest change

In Internet Explorer 10+ and Edge, Microsoft provides the -ms-high-contrast media selector to expose the “High Contrast” setting from the browser, which allows the programmer to adjust their site’s styles accordingly.

The -ms-high-contrast selector has 3 states: active, black-on-white, and white-on-black. In IE10+ it also had a none state, but that is no longer supported in Edge going forward.


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
      background: #fff;
      color: #000;

This will change the header background to white and the text color to black when high contrast mode is active and it is in black-on-white mode.

@media screen and (-ms-high-contrast: white-on-black) {
      background: #000;
      color: #fff;

Similar to the first example, but this specifically selects the white-on-black state only, and inverts the header colors to a black background with white text.

More Information:

Microsoft Documentation on -ms-high-contrast

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents