Giving users the option of a light or dark mode has been a popular feature for apps and websites over the last few years. These settings help users manage the brightness and contrast of their screen based on lighting conditions, the time of the day, or coolness factor. Giving users this option gives them a bit of freedom while still allowing site owners and businesses to retain styling and brand control of the look and feel of their app.
This is a win for both users and site owners, but there are a set of users for whom increased contrast and color control is a necessity, not a nice to have. These users utilize their systems high-contrast modes to increase legibility and limit visual distractions. These settings are controlled by the user and these applied styles will over run an app or site’s developer defined color scheme. These settings are controlled by the user and the applied styles will overrun an app or site developer’s defined color scheme. It is on us as developers to make affordances for these styles.
Styling for high-contrast
Making allowances for users of high-contrast that work across browsers has required the use of browser prefixes, and css media queries. When it came to styling for everyone’s favorite browsers-Internet Explorer (and both versions of Microsoft’s Edge browser)-we had to fall back on the -ms prefix. I’ve never found browser prefixes to be ideal and making sure sites worked across all browsers required remembering the all the prefixes or, add a library to process our CSS. Developing for the web is hard as it is, but luckily there are changes coming that will allow us the included users of high-contrast without having to fall back on browser prefixes.
Concrete examples work best: here’s a one from Imagine Cup, a Microsoft property that we work on here at iSoftStone.
The Imagine Cup page features a purple banner near the bottom of the screen which holds all the social media icons for the Imagine Cup. The icons are white which shows on the purple banner, as well as in the white on black color scheme offered in Windows, so we only had to move the color we wanted for the fill to the global style sheet. We had already styled this footer to handle Windows high-contrast Mode using the -ms browser prefix and the media query:
@media screen and (-ms-high-contrast: black-on-white) {
.svg-contrast {
fill: #000;
}
}
Forced colors media query
This is how we’ve had to do things in the past. The upcoming changes will allow us to handle high-contrast styles with the new forced-colors and prefers-color-scheme media queries. To handle the new implementation we had to add the below CSS to our global stylesheet.
@media (forced-colors: active) and (prefers-color-scheme: dark) {
.svg-contrast {
fill:#000;
}
}
This dumps the browser prefix, and takes care of two browsers at once. For Firefox, you’ll have to switch over to the prefers-contrast media query, and if you’re still supporting IE and legacy versions of Edge, you’ll have to keep the browser prefix. Luckily, you can stack them like so:
@media (-ms-high-contrast), (forced-colors: active) {
/* your styles here */
}
These changes aren’t live yet, but you can code and test for them now in Chrome by enabling the force-colors flag in Google’s Chrome browser and Microsoft’s new chromium based version of Edge. If you’d like to learn more about how high-contrast styles work the Edge team has a great write up here and if you’d like to read about how these changes can be implemented in Firefox you can find their documentation here.
Want more information?
If you would like to learn more information, please contact us today.
