Forced colors mode

Forced colors mode is the browser handing the palette over to the operating system. It grew out of Windows High Contrast Mode, now shipped as contrast themes, where a person picks a small set of colours (a background, a text colour, a link colour, a button pair, a selection pair) and every application is expected to render in those and nothing else. In a browser that means author colours are substituted wholesale: backgrounds become Canvas, text becomes CanvasText, buttons take ButtonFace and ButtonText, links take LinkText, and box shadows and most background images are simply dropped. CSS exposes the state through the forced-colors: active media query and the system colour keywords, plus forced-color-adjust for the rare element (a colour picker’s swatches, a chart’s key) whose colours are the content and must survive.

It is not dark mode, and treating it as one is the usual mistake. Dark mode is a preference the author designs for and controls, with a full palette of the author’s own choosing; forced colors is an override the author does not get to design, in a palette that may be black on white, white on black, or beige with brown, and that carries only about seven usable values. A page can be in a light theme and a high contrast theme at once. The companion query prefers-contrast asks the softer question of whether more contrast is wanted, and answers it with the author’s own colours; forced colors has already taken those colours away.

What this exposes is how much interface leans on fill. Anything distinguished only by background colour collapses when every background becomes the same value: a primary button next to a secondary one, a selected row, a card against the page, a disabled control, an icon drawn as a coloured shape. Borders survive, so borders end up doing the work of signifying, which is why the practical advice is to give meaningful boundaries a real border (even a transparent one, since transparent resolves to a visible colour in this mode) and to draw icons as strokes that inherit currentColor. Selection and focus keep their own pair, Highlight and HighlightText, so the current thing stays legible.

Testing it is cheap and nothing else substitutes: turn on a contrast theme in Windows settings and open the page, or emulate the media feature in a browser’s rendering panel. The failures are loud and specific once seen. An invisible icon, two buttons that became identical, a state that vanished, a hairline that became the same colour as the text beside it.