contrast-color()

See it working

The syntax

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

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable .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)); } }

ResetCopy

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.

Before you ship it