contrast-color() 🍹 HTMLcat

contrast-color() asks the browser to choose readable text against a solid background color. Handy for badges, tags, and CMS-driven colors. Still draft territory, so treat it as progressive enhancement.

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

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

More info in the CSS Color Level 5 draft.