My whole career, I've been a Mac-user. Ok, when I was learning to code, it was Windows and tinkering with Linux, but it was a long time ago. Studying for the Web Accessibility Specialist-certification exam has reminded me of the fact that Windows exists. It has also taught me about some things I never knew, and one of those is Windows High Contrast Mode.
In this blog post, I will take a look into what is Windows High Contrast Mode (later WHCM), who uses it, and what it actually does. A disclaimer: I have been learning about this topic only recently and am not an expert on the subject, so I rely heavily on other professionals on this matter. This blog post is not an extensive description of Windows High Contrast mode. However, I hope that after reading this post, you will have a little better understanding of how to develop sites and apps that work for the users of WHCM.
What Is Windows High Contrast Mode?
WHCM is a built-in accessibility feature available for Windows 7 and later. It changes the colors of certain UI elements on Windows to the selected theme's colors. It helps by increasing text legibility and decreasing cognitive load.
In WHCM, there are different themes; for example, black on white and white on black. These themes use limited color palettes, which makes the texts more readable. User can also pick their own colors if they like. It is different from the inverted colors - although in some cases, these two look similar. You can read more about the differences in inverted colors and WHCM from Adrian Roselli's article.
The support for browsers is different - Sarah Higley explains that Edge seems to be the best variant for testing, as it fully supports WHCM. Other browsers, such as Chrome and Firefox, support WHCM but not, for example, a -ms-high-contrast media query. A note here - Chrome needs to have the "Forced Colors: Enabled" flag turned on to adopt the colors from WHCM.
Who Uses it?
According to the WebAIM's Survey of Users with Low Vision in 2018, 51,4% of the respondents said that they use some sort of high contrast mode. The most common one was light text on a dark background. People with low vision are a big group of users, but they're not the only ones who benefit from the high contrast mode. Those who suffer from migraine or Irlen syndrome use high contrast modes in some conditions, and people with dyslexia, Martin Mengele explains.
As the name of the feature states, it can be used for increased contrast. However, as WHCM provides a possibility for a user to change the colors to whichever they want, it can actually be used for lowering the contrast as well.
As with all the accessibility features, it is not just people with disabilities who benefit from these features. High contrast mode can be useful, for example, when using a phone, tablet, or laptop in direct sunlight.
What it Does?
So, what does WHMC actually do, and why we, as developers, should be aware of its existence? It removes background colors and images and replaces them with the color depending on the selected theme. This can have a tremendous effect on how sites look, as an example of Dev.to with Windows High Contrast Mode enabled shows:
It also affects border and outline colors and ignores box-shadow. This means that if your focus indicator is styled (only) with box-shadow, it will disappear with WHCM. As Sarah Higley points out, there is a fix for that: You can use a transparent outline (instead of outline: none), and WHCM picks that up and uses it for the focus indicators. In the article linked, there are examples of the behavior.
The same trick works with borders. If some area (eg. a button) has a different background color from the site background, with WHCM turned on, both would be set to the themes background color. With a transparent border, WHMC would change the border's color to be the text color of the WHMC theme.
Then there are SVGs. Their fill and stroke won't change, as they are seen as images. Sarah Hingley gives a solution to this: Use CSS - currentColor-keyword. It represents the value of the element's color-attribute, so this way, the SVG's fill or stroke would inherit the high contrast theme's color palette. The actual color would depend on the element wrapping it - whether the color is text color, link color, or something else.
The Future (is Almost Here)
For changing the styles of the so called "forced colors" (colors from the OS or browser), there is a new, experimental feature in CSS: forced-colors-media feature. It is fully supported in the latest versions of Chrome, Edge, and Firefox versions. Note, however, that in Chrome and Firefox, that feature needs to be enabled by the user to work. If you want to read more about this feature, visit Windows Edge's blog for a longer explanation and how to use it.
Also note, that it is best to let the user have most of the control for the colors in the UI. With this feature, we as developers have the responsibility not to override too much so that we won't override the whole purpose of using the high contrast mode on our site. So, use it with caution.
Top comments (1)
Thanks for giving this thorough introduction to high contrast mode! I've been a Windows user (at home, for gaming reasons) for my whole life. Dual boot has worked for me when I've needed some tinkering with Gentoo or some other foolish things I thought I needed in my life. Anyway, I haven't known about the high contrast mode, and this is something I definitely need to experiment with. Thanks also for the linked further reading, I'll definitely check them out too!