Hi, I'm Kilian the creator of PolyPane, the browser for developers.
I've been writing about and giving talks about as media queries for a long time.
All the way since they were just getting support in Safari and Opera.
I'm excited to talk about forced colors because it's a media query and feature that is extremely useful for the people using it.
And making sure your site works well with it, it's honestly not a lot of work.
You get very far with a little bit of effort and on the web, that's a pretty good deal.
So where does forced colors come from?
Starting in Windows 7 and supported since IE 10 users can find high contrast modes in their settings.
So this is very much a Windows only feature at this.
With high contrast modes, users can pick from one of four high contrast themes or choose their own theme.
When they do their entire OS is rendered in that theme.
Now, the name is high contrast and the offered themes all have contrast in their title as well.
But here's an important bit of information.
High contrast mode is not about contrast.
Well, it kind of is, but it also isn't.
Let me explain.
What high contrast mode does is severely limits the palletes of available colors, and let's users pick which colors those are for the things that make up a UI-text, backgrounds, links, and buttons.
Usually users will pick highly contrasting colors.
But they don't have to, they can also choose to avoid colors that don't work well for them.
They can create a sepia theme or specifically configure the theme to avoid certain contrast.
The main feature then is that it limits and controls the range of colors, making it easier for users to emphasize content and UI in a way that works for them.
In other words, they force colors.
In the rest of this talk, I will try to be intentional when I use "forced colors", and when I use "high contrast", but in most situations you can use them interchangeably.
So who uses this feature?
High contrast mode is useful for many different people, but includes people with low vision, colorblindness, people prone to migraines or light sensitivity, and people prone to overstimulation.
But also people who know of the feature and use it to keep their screen readable in bright sunlight or dim their entire UI in dark environments.
High contrast mode is one of the only features that will force all colors to change and guarantees that across the operating system and browser.
In terms of numbers, Microsoft states that 4% of Windows users use high contrast mode.
In the WebAIM low vision survey, 50% of low vision users indicate they use the mode.
But of course, that is likely a very self-selecting group of savvy users.
However, you can still assume that one in 25 of your visitors will have it enabled.
So how do you enable high contrast mode?
When you open the system settings on Windows 10, there's an option called "ease of access".
Where you confined various accessibility options.
If you use Windows and haven't looked around there yet, go and see all the other neat features that are available.
I, for example, have set a different zoom level here to keep things readable on my relatively small screen.
To the left you see a couple of different categories-vision, hearing, and interaction.
Under vision is where you'll find high contrast.
Here you can toggle it on and off and then choose the theme you want.
There's also a shortcut to toggle it on and off.
Left Alt + Left Shift + print screen.
This will use your last selected theme.
And there's four themes available called "high contrast one", "high contrast two", "high contrast black" and "high contrast white".
The first three are all light-on-dark themes and mostly differ in their accenting color.
Green for number one, blue for number two and teal for black.
High contrast white is the only dark-on-light theme.
Okay.
So all of those are pretty high contrast.
Why did I mention that it wasn't really about contrast earlier?
Well, that's because from here you can also configure your own color theme, choose colors for texts, links, buttons, and backgrounds.
And when you apply it, you get to save it as your own theme.
Notice by the way that this also shows the currently selected color name.
I thought that was neat.
Interestingly though, there's no way to edit a previously created theme, export it or import it.
That seems like an oversight.
So that's how to turn it on and how to configure it.
But what about testing with it when you don't want to turn it on for yourself or when you don't have a Windows device?
Well, here I have to let you down.
While browsers can emulate things like preferred color scheme, they do not support emulating forced colors yet.
Microsoft have indicated they're working on tools in Edge for this, but the latest updates that I could find on that was a quick mention in a blog post from a year ago.
So for now, you'll have to accept that to test it, you need a Windows installation.
Now Windows makes virtual machines available, but unfortunately those are only for legacy browsers, like Internet Explorer and the Edge HTML version of Edge, not the current is chromium implementation.
You can get those at aka dot ms.
slash web dash vms [aka.ms/web-vms], but their implementation is suntly different from what you can find in current browsers.
So getting a Windows license for a VM, or getting a cheap windows device is something I recommend, not just for forced colors, but for general cross-platform testing.
I have a Surface Go tablet, which was relatively cheap, but there are other low-end laptops available as well.
If anyone at Microsoft is listening, firstly, you're welcome for the free advertisements, but please give developers a free way to test high contrast mode without needing a Windows device.
Okay, moving on.
Edge, Firefox, Chrome and Chromium derivatives all support the forced colors media query for Windows high contrast modes.
So that's great news.
Support is really good.
IE and old Edge also support Windows high contrast modes, but they use an outdated non-standard syntax that we won't be looking at today.
I'll share resources at the end of this presentation that go into the differences between the standards way and the Internet Explorer way of dealing with forced colors.
Okay.
So now we know what's high contrast mode is, how to activate it and what browser supports it.
But how does it work?
When forced color is active in a browser, these styles will get reverted to their initial value and overwritten with user theme colors.
Anything that lets you specify your color, but also things that contain color, like shadows, get reset.
Backgrounds are preserved, except on links and form elements, buttons excluded.
Furthermore text that's on top of images gets a solid background-color, called a backplate to force the current contrast.
Forced colors does keep your images and SVG icons intact including their colors.
For a quick idea, here's a comparison with an existing web site.
Notice how backgrounds and colors have changed or disappeared, but images still look the same.
So there's two browser features that can do similar things.
First there's reader modes.
Reader modes will extract and reformat the contents of a page in a user chosen theme and discard all the layout of it.
Forced colors maintains the layout, while changing just the color.
The other feature is the prefers-contrast media query.
This is an upcoming media query that at the time of filming only has supports in the Safari technology preview.
And only partially at that.
prefers-contrast is a way for users to ask for more or less contrast.
For example, with Mac OS's increased contrast accessibility option.
Though prefers-contrast and forced scores are both about forcing a certain contrast, the difference is pretty big.
Forced colors changes all your site's colors.
While with with prefers-contrast, it's your job to do that.
With, forced colors, you're styling gets overwritten and with prefers-contrast, the visitor is probably okay with your styling.
They just want more or less contrast.
There's one part where they overlap though.
And that is that both most benefit from reducing visual complexity.
Because of this, the specification for prefers-contrast also has a potential custom value that will match when forced colors is active.
I personally think this is a bad idea and campaigned against it when it was called prefers-contrast-forced since it's conflating multiple concepts into an already complex and overloaded set of media features, many of which haven't even been implemented yet, let alone adopted well by developers.
But this talk isn't about that.
So we're just going to move on back to forced colors.
How do you know your is being rendered in forced colors and what should you do with it?
First, the media query forced-colors will be active when it's on and none when it's off.
Additionally browsers will look at the backgrounds-color of the high contrast theme to determine if this is a dark mode or a light mode theme, and use that to also set the prefers-colors theme value to dark or light.
So what do you do with forced colors?
Well, you turn it on and then you go and test your sites.
In the examples here we'll use Chrome.
There are small differences in how Firefox, Chrome and Edge dealwith forced colors, particularly around images, but they mostly behave the same.
As we get started, let me get that shortcut back on screen left alt left shift and print screen.
With this, you can quickly toggle back and to high contrast mode to ease your testing.
So you'll have high contrast modes on and your site open.
Now it's time to go through it.
One thing you might not have realized though, is that dev tools is now also in high contrast mode.
And that might take some time to get used to.
The changes we're going to make are not about making your site look good again, they are to respect the visitors wishes and nudge your site closer to those.
We're going for clarity and readability.
Firstly, just get a general view of your page without your own colors and backgrounds.
Things might look a little empty.
Forced colors resets your background-colors, and resets all background-colors to the same color.
Areas that were differentiated by different background-colors will now all look the same.
And that can hinder understanding.
What we're going to do is add either borders or outlines to elements that need it.
Whether you want to use a border or outline is more or less up to you, depending on what you can do with your layout.
Keep in mind though, that you will want to use your outline for focus styling as well.
So we can use the platform to keep things simple and add border one pixel solid or outline one pixel solid, leaving out the color.
The browser will then match the text color for us.
Adding these borders will also reduce the visual complexity of your page by adding clear delineations.
Like I've done here for the buttons and the header.
Next, scan your page for missing content in particular SVG icons, as they are left alone by forced colors, and even when they inherit their color through the current-color CSS keyword that won't always use the forced colors, but the old inherited color.
So you need to help the browser along.
But how do you do that, if you don't know what colors a user has picked?
A long time ago, CSS came with something called system colors that let you use the exciting array of greys that operating systems came in in 1998.
However, browsers have not supported them for a long time, because it turns out that when you gave web developers, the exact styling use to create the operating system, they can abuse that to show fake popups and get users to do things they shouldn't do.
So they don't work any more.
Luckily CSS 4 comes with an updated set of system colors, specifically designed to work with forced colors.
While they also work without forced colors, they will map perfectly to the theme chosen by your visitor in forced color mode.
For text there's canvasText, for links, there's linkText, and for buttons there's buttonText.
The background is called canvas and there's styling for selected text as well.
When you're updating SVGs, check where you use them and pick the one that matches your SVG's use case.
You can probably fix a lot of these with some generic CSS already, though check whether your SVG's style the fill, or the stroke.
Here we give all regular SVGs the text color, all linked SVGs, the link color, and all SVGs in buttons, the button color.
Of course, make sure you check if this catches all your inline SVGs.
And if you need to tweak some of them individually.
When you've replaced all the colors on your page, you also lose the meaning of anything that's only conveyed through color.
Now that's a WCAG violation, so you shouldn't do that anyway, but it's still something you have to check.
Are there any elements that use only color to convey meaning?
Those need to be updated.
Common ones are showing a red or green border on form fields.
Make sure to add a shape, like a check mark or better, clear error or success text.
This also makes your site better for the 96% of people not using force colors.
So everyone wins.
Another one I have to mention is, check if your page does not have any text in images, they won't convert to your user's theme.
The solution for this is very straightforward-don't have text in images.
That's not the only type of images you have to check, though.
You might also be using semi-transparent PNGs or external SVGs that you expect to be shown on a certain color backgrounds.
For these consider adding a dark and light mode alternative to the image and swapping between them when forced colors and prefers color scheme matches.
For SVGs that you use in image elements, you can also add an inline style element for force colors in the SVG itself.
And the browser will pick that up.
Pretty neat.
Lastly, it's time to step through the page and make sure that focus is still clearly indicated.
If you have disabled the outline in favor of your own nicer looking focused styles, for example, with box-shadows, to get those nice rounded corners, remember that focus mode, that forced colors removes all box shadows.
Lastly, it's time to step through the page and make sure that focus is still clearly indicated.
If you have disabled the outline in favor of your own nicer looking focus styles, for example, with box shadows, to get those nice rounded corners, remember that forced color removes or box shadows.
A good way to deal with this is to replace your outline: none.
wIth outline-color: transparent.
Without forced colors, the outline will still not be visible, but with forced colors that outline color will be overwritten with the current text color, making it nicely visible again, without needing any special adaption or restyling for force color mode.
So to summarize when adapting to, forced colors, you want to make sure you've replaced areas delineated by backgrounds with borders or outlines.
You want to make sure all your icons are visible and that they follow the user's theme.
You need to take care that there's no meaning conveyed by color alone, as that color will be gone in forced color mode.
You need to replace or provide alternatives for images that don't work well, such as ones with text or ones with transparency.
And you need to make sure a focus indicator is still visible for all focusable elements.
But what if you need to disable forced colors?
There are situations where the colors you picked are absolutely important, such as when showing a color selector in our webshop.
For those situations, and those situations only you have permissions to use force-colors-adjust: none.
With that you can turn off forced color for that element and its child elements.
There are a few legitimate places where this makes sense, but please make sure to use it sparingly and to respect your visitor's wishes as much as possible.
And with that we've explained forced colors.
We now know what the forced colors are, how to configure them, why they're used, which browser support them, how to test them, how to make sure our sites look good in them, and lastly, how to disable them only when that's absolutely needed.
If you want to read more in particular on the differences with Internet Explorer, then these four links should give you plenty of information.
Please check out PolyPane at PolyPane.com.
It comes with a huge list of features to help you build accessible websites from text contrast checking to readability scoring, and from focus order realization to broken link checking.
If you have any questions, I've probably already answered them in the chat, but if not, feel free to reach out on Twitter @.KilianValkhof.
Bye
