Colour

contrast-color()

Newly availablesince Apr 2026

Replaces: Computing in JavaScript whether text on a dynamic background should be black or white. The browser picks the readable one.

See it working

#0a0a0f#ffd166#4f46e5#e8f5ee

The syntax

.tag { background: var(--tag-colour);
       color: contrast-color(var(--tag-colour)); }

The demo’s full CSS

.dm-cc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dm-cc span { display: grid; place-items: center; height: 64px; border-radius: 10px;
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  background: var(--c); color: #0a0a0f; }
/* Fallbacks by hand for the two dark swatches, then the browser takes over where it can. */
.dm-cc span:nth-child(1), .dm-cc span:nth-child(3) { color: #fff; }
@supports (color: contrast-color(red)) { .dm-cc span { color: contrast-color(var(--c)); } }

For browsers without it

Set a readable text colour by hand first and let contrast-color() replace it inside @supports, exactly as the demo does. Never rely on it alone for a colour the user can change.