Windows users are offered a number of high contrast themes at the operating system level — some light-on-dark like our inverted theme. In addition to supplying our theme switcher feature, it’s important to make sure WHCM is supported as well as possible. Here are some tips:
- Do not use background images as content. Not only will this invert the images in our inverted dark theme, but they’ll be eliminated entirely in most Windows high contrast themes. Provide salient, non-decorative images in
<img/>tags with descriptivealttext values- For inline SVG icons, use the
currentColorvalue for fill and stroke. This way, the icon color will change along with the surrounding text color when the high contrast theme is activated.- If you need to detect WHCM to make special amendments, you can use the following media query:
Code language: CSS
@media (-ms-high-contrast: active) {
/* WHCM-specific code here */
}