Recently, some users of our application started complaining that it was not rendering properly. They sent in videos showing that all the colors were off and that video in the app was being hidden. After a great deal of troubleshooting the issue, we finally figured out that these users had put their machines into high-contrast display mode, and our application is not equipped to handle it. That said, writing a completely new theme to handle high contrast mode is out of the question. It is just too major a refactor to accomplish in short order.
I have done some research and figured out that there is a way we can at least detect when high contrast mode is applied. Our app is a JavaScript UWP, and so using WinRT we can check if the mode is on like so:
const highContrastOn = Windows.UI.ViewManagement.AccessibilitySettings().highContrast;
We can also check the theme in use and set up an event to act on changes.
Documentation on the AccessibilitySettings class is located here:
However, what I am unable to figure out is whether or not we can disable this kind of rendering for our app. We never imagined having to build in support for it, and it would be a major undertaking now if we decided to. Is there any way to use WinRT or some browser method to inform the system that we do not support high contrast?
Advertisement
Answer
We found a solution and it only took a small amount of CSS.
body {
-ms-high-contrast-adjust: none;
}