April 2026 - Baseline newly available
contrast-color() was listed in the April 2026 Baseline digest
contrast-color() asks the browser to choose a readable contrasting color against a supplied background. It is promising for token systems and generated palettes, but production design systems should keep explicit fallback tokens for now.
Last checked . This staged row is
verified:false and remains noindex until exact public effective dates are rechecked.Browser support note
| Browser | Public note |
|---|---|
| Chrome | April 2026 Baseline digest source |
| Edge | April 2026 Baseline digest source |
| Firefox | April 2026 Baseline digest source |
| Safari | April 2026 Baseline digest source |
Copyable CSS snippet
.chip { --chip-bg: oklch(72% 0.16 180); background: var(--chip-bg); color: contrast-color(var(--chip-bg)); }Fallback: Pair each generated background token with an explicit text token, then override inside @supports (color: contrast-color(white)).
Replaces: Some manual light/dark text token branching for generated color swatches.
Official sources
- Primary: web.dev: Baseline monthly digest, April 2026
- Secondary: MDN: contrast-color()