Adapting CSS for Forced Colors Mode

WHAT THIS TESTS 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.

A GOOD ANSWER COVERS 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.

COMMON WRONG ANSWERS 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.

LIKELY FOLLOW-UPS Which system color keywords map to which UI parts. When is forced-color-adjust none justified. How do you keep focus visible.

ONE 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.