-ms-high-contrast

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -ms-high-contrast CSS @media media feature is a Microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.

This media feature applies to bitmap media types. It does not accept min/max prefixes.

Syntax

The -ms-high-contrast media feature is specified as one of the following values.

Values

active

Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.

black-on-white

Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white color variation.

white-on-black

Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a white-on-black color variation.

Example

The following declarations will match applications that are being displayed in high contrast mode with any color variation, a black-on-white color variation, and a white-on-black color variation, respectively.

@media screen and (-ms-high-contrast: active) {
  /* All high contrast styling rules */
}
@media screen and (-ms-high-contrast: black-on-white) {
  div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
  div { background-image: url('image-wb.png'); }
}

Specification

Not part of any specification.

Remarks

As of Microsoft Edge, -ms-high-contrast: none is no longer supported.

The -ms-high-contrast media feature works with the -ms-high-contrast-adjust property.

The -ms-high-contrast media feature was introduced in Windows 8.

Document Tags and Contributors

 Contributors to this page: jameshkramer
 Last updated by: jameshkramer,