v147 · CSS · contrast-color()

Hue Explorer

Drag the sliders — text flips between black and white automatically. Zero JavaScript logic. The browser's color engine does all the work via color: contrast-color(var(--chosen)).

Live preview

new · chrome 147

Automatic contrast text

This text color is determined entirely by CSS — no JS computes the luminance. As the background shifts across the perceptual midpoint, the browser flips between black and white.

background hsl(210 80% 50%)
contrast-color() —
contrast ratio —

Controls

210°
80%
50%

Presets

CSS driving the demo

.preview-card {
  --chosen: hsl(210 80% 50%); /* updated by JS on slider change */
  background: var(--chosen);
}

/* contrast-color() picks black or white — no JS needed */
.preview-heading,
.preview-body,
.preview-badge {
  color: contrast-color(var(--chosen));
}

.preview-badge {
  border-color: contrast-color(var(--chosen));
}

How it works

contrast-color(C) computes the relative luminance of C and returns white if it produces a higher WCAG contrast ratio, otherwise black. The threshold is roughly lightness 50% in sRGB, but the exact boundary depends on saturation and hue because luminance is perceptual, not linear. Drag the Lightness slider slowly through 50% to see the exact flip point — it shifts depending on hue and saturation.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗