CSS contrast-color() playground

Explore contrast-color() with a background color picker. The example applies the selected color to a button and lets CSS automatically resolve whether the text should be black or white, with generated code inspired by MDN.

Your browser does not support contrast-color() yet. A fallback is shown.

HTML

<button class="contrast-color-demo" type="button">
  contrast-color()
</button>

CSS

.contrast-color-demo {
  --button-color: #660066;

  padding: 0.75rem 1.25rem;
  border: 0;
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
}