CSS forced-color-adjust: preserve a color only for a narrow reason

When to use it

A status legend has a small color swatch followed by a text label. In forced colors, keep the label and control surfaces under the system palette. If the exact swatch hue is useful for a secondary comparison, an opt-out may be appropriate only on that tiny swatch, with a visible border and text that still names the status. The sample scopes none to the decorative square. Test every forced-color theme available to the team; the chosen hue may have poor contrast against a system background. Never opt the whole card or form out just to protect brand colors. Forced colors are an access setting, not a theme defect to override.

@media (forced-colors: active) { .status-key__swatch { forced-color-adjust: none; border: 2px solid CanvasText; } }

Cost and verification

A narrow opt-out has negligible rendering cost, but it creates a manual contrast responsibility. The browser will not repair a preserved swatch that disappears into its surroundings. Keep the status name in adjacent text and avoid relying on hue alone. Test focus rings, links, error states, and disabled controls with the default auto behavior. If the color comparison has no essential value, remove the opt-out and let the system palette handle the entire component. Do not assume one high-contrast screenshot covers all user palettes.

Common Mistakes

• Do not set forced-color-adjust none on whole forms or dialogs.
• Do not convey status solely through a preserved swatch.
• Do not skip contrast review in multiple system palettes.

Connected lessons

• CSS Property Decisions
• CSS dark mode and forced colors: honor distinct user settings
• CSS color and contrast: pair text with its real surface
• CSS form states: make errors and disabled fields explicit