contrast-color()

Baseline 2026 Reference ↗

contrast-color() asks the browser for a contrasting color against a solid background. It is handy when badge or CMS colors are data-driven.

.tag {
  --tag-bg: oklch(72% 0.19 142);

  background: var(--tag-bg);
  color: contrast-color(var(--tag-bg));
}

This became Baseline in 2026, so older browsers still need a fallback. Automated contrast is useful, but it does not replace testing real font sizes, weights, and states.