CSS color recipe

Forced colors Keep meaning when a contrast theme takes over

In a Windows contrast theme the browser replaces your colors with a few system colors chosen by the reader. Backgrounds vanish and borders take the text color, so anything that was drawn only with color needs a shape that survives.

See it run
Baseline
Widely available
First versions
Chrome 89 · Firefox 89 · Safari 16
Tested
3 of 3 engines

Live example

The recipe, running

The CSS below, as your browser runs it.

Turn on JavaScript to see whether your browser supports it; the examples work either way.

As written, in your browser

The CSS

Copy it as it is

This is the exact CSS the example runs. Fallbacks come first; the modern values follow, so each browser keeps the last line it understands.

forced-colors.css

/* A transparent border costs nothing until forced colors draw it. */
.badge { display: inline-flex; gap: 8px; align-items: center; padding: 4px 12px; border: 1px solid transparent; border-radius: 999px; background: #E8F5EE; color: #136B39; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.swatch { width: 44px; height: 44px; border-radius: 8px; background: #D3AF37; }
.focus { padding: 8px 14px; border: 1px solid #7A7263; border-radius: 8px; background: #FCF9F2; font: inherit; }
.focus:focus-visible { outline: 3px solid #765A0B; outline-offset: 2px; }

@media (forced-colors: active) {
  /* A color sample must keep its color. */
  .swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
  /* System colors follow the reader's theme. */
  .focus:focus-visible { outline-color: Highlight; }
}

How it works

What each part does

  1. A transparent border is free until it is needed. Normally invisible, it is drawn in the text color in forced colors, so the badge keeps its outline.

  2. forced-color-adjust: none for real samples. A swatch that shows a color must keep it; use it only there, never for whole components.

  3. System colors follow the reader. Highlight, CanvasText and ButtonText are the reader’s own choices, so a focus ring in Highlight stays visible in every theme.

  4. Try it. On Windows, open Settings, then Accessibility, then Contrast themes. In Chrome or Edge DevTools, open Rendering and emulate forced-colors: active.

Browser support

Where it runs

First version of each browser with the feature, from the web-features project and MDN’s browser-compat-data. “No” means not supported yet.

  • forced-colorsWidely availableBaseline widely available since 12 March 2025.
First supporting version by browser
Browserforced-colors
Chrome89
Chrome for Android89
Edge79
Firefox89
Firefox for Android89
Safari16
Safari on iOS16

Safari does not support forced-color-adjust, according to browser-compat-data; it has no contrast theme that forces colors, so the property has nothing to undo there.

Support reviewed on against web-features 98723fd and browser-compat-data 3b28abe.

Tested

Tested in three engines

Engines this recipe was run in
EngineVersionSupportedAs writtenFallback
Chromium147.0.7727.15YesPassNot applicable
Firefox148.0.2YesPassNot applicable
WebKit26.4YesPassNot applicable

With forced colors emulated, the swatch kept its color and the badge gained a visible border.

WebKit matched (forced-colors: active) under emulation but forced no colors, so only the color sample was checked there.

Run on in Chromium 147.0.7727.15, Firefox 148.0.2 and WebKit 26.4, with Playwright.

Accessibility

Measured, not assumed

Outside forced colors the badge text measures 5.87:1 on its tint. WebKit answers the media query but Safari has no contrast theme to force colors with, so the recipe changes nothing there.

  • 5.87:1AA#136B39 / #E8F5EE

Keep going

Read more

Tools

Other recipes

References

Go to the source