CSS Internet Explorer Hacks High Contrast Mode in Internet Explorer 10 and greater

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

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.

Examples

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
   .header{
      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) {
   .header{
      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



Got any CSS Question?