v147 · CSS · Accessibility · Color · demo

Tag Cloud

A tag cloud where each tag background is a random color — and the text is always readable, auto-selected by contrast-color(). Shuffle the palette or add custom tags with user-picked colors. No JavaScript luminance calculation, just color: contrast-color(var(--tag-bg)).

Chrome 147+ — contrast-color(). In older browsers the text defaults to --text-black, which will fail on dark backgrounds. The contrast-color() column in the accessibility grid shows what Chrome picks automatically.

Click "Shuffle" to randomize colors · "Add tag" to pick your own · click any tag to see its contrast info

Click a tag to see its contrast details

Contrast samples — auto text color

/* contrast-color() picks the highest-contrast option automatically */

.tag {
  background: var(--tag-bg);          /* user / CMS supplied color */
  color: contrast-color(var(--tag-bg)); /* ← always black or white, best contrast */
}

/* No JS needed:
   Old approach:
   const lum = 0.2126*R + 0.7152*G + 0.0722*B;
   tag.style.color = lum > 0.179 ? '#000' : '#fff'; */

implementation reference

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

see also

implementation reference