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