Glossary · Accessibility term
Forced colors
Also called: forced-colors media query, forced-color-adjust
Forced colors is what the web platform calls it when somebody's operating system throws your palette away and repaints the page in colors they chose. It is the CSS side of high contrast mode, and it is the side you can write for, through a media feature named forced-colors and a set of system color keywords that carry the reader's own palette into your stylesheet. While it is on, the browser overrides your color on a named list of properties and does three more things nobody expects. Box shadows and text shadows compute to none. A background image computes to none unless it points at a real file, so gradients go and photographs stay. And the browser paints a solid plate behind text, which is what keeps the words on those photographs readable. The opt-out is a property called forced-color-adjust, and the specification is blunt about when to reach for it. Use it where you are adjusting the colors yourself to serve the same need, never because the mode made your brand look wrong.
In practice
Style for it with the system color keywords rather than with colors of your own, because those keywords are the channel the reader's chosen palette arrives through. Canvas is their background, CanvasText their text, LinkText their links and ButtonText their button text. Ask for those inside a forced-colors block and your design stays coherent inside a palette you did not pick. Then switch a contrast theme on and look at what disappeared, rather than at what changed color.
Do not assume the palette is black on white. The specification says in terms that people build their own themes, and it names low contrast and hue contrast as things they build them for. Somebody with a migraine disorder may be running dark grey on a slightly lighter grey on purpose. That is the point of the feature, and it is why hard-coding a replacement palette inside your forced-colors block is the same mistake in a new place.
The three overrides that catch teams are worth memorising, because each one deletes something a design was relying on. Shadows compute to none, so a focus ring built from a box shadow stops existing for the readers most likely to be running the mode. CSS-generated backgrounds compute to none unless there is a real file behind them, so a gradient that was carrying meaning goes and a photograph stays. And a card whose edges came from a background color instead of a border loses its edges entirely, because the background is repainted and there was never a border to survive.
Why it matters
Forced colors is the clearest proof available that the palette you shipped is not the one everybody sees, and the discipline it forces catches problems that show up elsewhere too. Anything communicating through color alone, anything existing only as a shadow, and anything whose boundary is a background rather than a border will fail somewhere else as well. There is one piece of good news in it. Where the browser can tell the reader's canvas is clearly dark or clearly light, it also reports that through prefers-color-scheme, so a site with a working dark mode is already part of the way there.
Testing your own opt-out
A color picker is the honest case for forced-color-adjust, because the swatches are the content and repainting them destroys the control. A chart key is the same argument. A hero banner is not. If the reason for reaching for the property is that the mode made your brand look wrong, you are about to take a feature away from the person who turned it on, and you will also remove the plate the browser was drawing behind your text.
Where this shows up on the site
Related terms
- High contrast modeHigh contrast mode is an operating-system setting that throws away most of a site's colours and paints the page in a palette the user chose.
- Focus indicatorA focus indicator is whatever pixels change to show that a control is focused.
- Dark modeDark mode is a second colour scheme with a dark background.
- Contrast ratioA contrast ratio is a number from 1:1 to 21:1 measuring how far apart two colors are in brightness, computed from a formula rather than judged by eye.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.