Supporting high contrast themes (Windows Store apps using JavaScript and HTML) (Windows)

Language: JavaScript and HTML | VB/C#/C++ and XAML

1 out of 2 rated this helpful - Rate this topic

The Windows Store app using JavaScript platform supports high-contrast themes by default for all apps. When a user switches to a high-contrast theme, the Windows Store app using JavaScript 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 Store app using JavaScript 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 Windows Store app using JavaScript platform also lets you use JavaScript to take specific action if a high contrast theme is on.

JavaScript


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

Supporting high contrast themes (Windows Store apps using JavaScript and HTML)

Related topics