The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Supporting high contrast themes (HTML)

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Looking for the C#/VB/C++/XAML version of this topic? See Supporting high-contrast themes (XAML).

The Windows Runtime supports high-contrast themes by default for all apps. When a user switches to a high-contrast theme, the framework automatically replaces all the colors and Cascading Style Sheets (CSS) settings with the high-contrast look. You don't need to do any additional work in your app to support high contrast.

In some cases, you might need more control over the high-contrast look for your app. For example, if you set a button’s image as a CSS background, the button is invisible in high contrast because the Windows Runtime platform removes all CSS background images. To override the default high-contrast behavior for a specific element, use ms-high-contrast-adjust: none on the parent element. You can also use CSS media queries to customize for high contrast.

JavaScript


/* Back button style setting. */
.backButton {
    ...
}

@media screen and (-ms-high-contrast)
{
    .backButton {
        -ms-high-contrast-adjust: none;
        ...
    }
}

/* Back button additional customization for white high-contrast theme. */
@media screen and (-ms-high-contrast:black-on-white)
{
    .backButton {
       ...
    }
}

You also need to consider how your images look in high contrast. If image colors don't look good in high-contrast themes, provide high-contrast versions of your images, and follow the recommended file naming conventions. For example, the back.png image file would have a version named back.contrast-high.png for use with any high-contrast theme, back.contrast-black.png for use with black high-contrast themes, or back.contrast-white.png for use with white high-contrast themes.

The framework also lets you use JavaScript to take specific action if a high contrast theme is currently used.

JavaScript


// Take a specific action if the user has chosen a high-contrast theme.
if (matchMedia("screen and (-ms-high-contrast)").matches) {
  // A high-contrast theme is active. 
}

Supporting high contrast themes (HTML)

Related topics