Your daily frequent11y newsletter, brought to you by @ChrisBAshton:
In this Smashing Magazine article, Cristian Díaz covers everything you need to know about this accessibility setting, which we’ll abbreviate as WHCM below. This is a Windows feature that users can enable to replace the colours on websites and applications, in order to increase readability and reduce noise.
WHCM is used by around 30% of Windows users with low vision, and around 4% of all active Windows devices. WHCM is misleadingly named, as many of its users actually opt for a colour palette that has a lower contrast than the default.
Cristian points out that semantics are incredibly important in WHCM. Take this example of three different elements with the same class:
<div role="button" class="button" tabindex=0>
Not a button
</div>
<button class="button">
Definitely a button
</button>
<a href="#" class="button">
This is a link
</a>
They’re given the same styling, so would usually look the same. But in WHCM, they all appear different, as WHCM only looks at which underlying HTML element is being used.
Another area to pay close attention to is the use of background styling. A common pattern is to give ‘primary’ and ‘secondary’ buttons different background colours, but in WHCM, the background colours are removed, and it can be hard to distinguish between the button types (or even to know that it is a button at all, if you’ve set a border/outline of zero!). A workaround is to set a transparent border instead, which will still hide the border visually in normal mode, but ensure that there is a button-identifying border in WHCM mode. As a rule of thumb, Cristian says:
outline remains as the only reliable way to apply a focus state on an element in WHCM.
If you’re going to use something different to highlight a focus state in an element, add the property outline-color: transparent as a fallback [for WHCM].
WHCM will remove gradients applied using background-image, but will respect background images that use the url() value (something that I think has changed since my frontend developer days at the BBC!). The exception is background image in the body element, in Firefox, which apparently won’t render.
Cristian only briefly touches on currentColor, which can be used to set things like SVG colours to the same colour as whatever WHCM is using for link text. He caveats this though, saying it won’t work in Chromium based browsers, due to the default colour value of SVGs being none. Luckily there is a new forced-color-adjust property which can be set to get WHCM to obey it.
There’s also a forced-colors media query, so that you can target your WHCM overrides only for when WHCM is enabled. Within the media query, we can access system colors and can use them to ensure we style a consistent UI, whatever our markup. For example:
@media screen and (forced-colors: active) {
.link {
background-color: LinkText;
}
.link:visited {
background-color: VisitedText;
}
.link:focus span {
outline-color: Highlight;
}
}
There is a useful set of resources to read at the end of the article.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.