Adapting CSS for Forced Colors Mode
supporting forced-colors accessibility.
use semantic HTML and system color keywords, the forced-colors media query, forced-color-adjust sparingly.
ignoring it, or assuming background images and box-shadows still convey state.
What's really being asked
This evaluates whether you know how Forced Colors Mode works, that it strips author colors for a user-chosen palette, and which common techniques silently fail under it.
The full answer
Understand the mechanism. Forced Colors Mode, exposed via the forced-colors media query and historically Windows High Contrast, replaces most author-specified colors with a limited set the user chose, to maximize readability. Techniques that break: background-color and background-image as the sole way to show state or content disappear or are overridden, so a button styled only with a background looks like everything else; box-shadow and outline-less focus rings vanish; color alone to indicate selected, error, or disabled state is lost. Architect defensively. Lean on semantic HTML so the browser maps elements to system colors automatically. Where you must theme, use system color keywords like CanvasText, Canvas, ButtonText, ButtonFace, and Highlight inside a forced-colors media query so your component honors the user palette. Guarantee a real border or outline for boundaries and a visible focus indicator, since shadows will not render. Use forced-color-adjust none only sparingly, for example to preserve a meaningful brand swatch or a chart legend, never to fight the user's choice wholesale. Test by enabling the mode.
The mistakes people make
Assuming dark mode handling covers it. Relying on box-shadow for focus or elevation. Using background images for icons or state. Conveying state by color only. Slapping forced-color-adjust none everywhere to keep your design, defeating the accessibility intent.
What usually comes next
Which system color keywords map to which UI parts. When is forced-color-adjust none justified. How do you keep focus visible.
A concrete example
A card uses box-shadow for its border and a colored background for its primary button; in Forced Colors Mode both vanish, so you add a real border and, under a forced-colors media query, set the button border and text to ButtonText with a Highlight focus outline so it stays distinguishable in the user's palette.
Interview question
Which common styling technique is most likely to fail at conveying meaning when a user enables Forced Colors Mode?
- a.Indicating state or boundaries with box-shadow or background color aloneCorrect
- b.Providing a focus outline using the outline property
- c.Using semantic HTML elements like button and nav
- d.Setting a visible border on interactive elements
Why? this is the answer
Forced Colors Mode overrides backgrounds and removes box-shadows, so anything relying on them alone loses meaning. Semantic HTML, real borders, and outlines survive because the mode maps them to system colors.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #accessibility
- #forced-colors
- #high-contrast
- #css
- #design-systems
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on accessibility — each one lists the topics its interview covers.
See open roles