Ion Prodan, 16+ yrs of frontend dev, mostly in Angular.
Published at

CSS contrast-color()

Pass a color, get black or white — whichever contrasts more.

Unsupported Browser Your browser does not support contrast-color(). Use Chrome 147+, Firefox 146+, or Safari 26+.

CSS snippet showing color: contrast-color(var(--brand)) on a card with a brand background

What does it do?

contrast-color() takes a color and returns white or black, whichever contrasts more. Tie goes to white. The snippet above is the whole API — made in Snipsco.

No luminance helper, no hardcoded text pair. When —brand changes, the foreground follows. Baseline since April 2026 (Chrome 147, Firefox 146, Safari 26). Spec: CSS Color Module Level 5. Docs: MDN.

Fallback

Gate the declaration with @supports (color: contrast-color(red)), and keep a hardcoded color first so older engines still paint text.

The mid-tone trap

Only black or white, targeting WCAG 2 AA (~4.5:1). Mid-tones lose: #2277d3 picks black, and small text still fails. Keep palettes at the light or dark ends.

Pick a brand color

interactive
#660066

Save changes

#660066

.card {
--brand: #660066;
background: var(--brand);
color: contrast-color(var(--brand));
}

Further reading