CSS color-contrast()

Automatic accessible color contrast with CSS. The future of color accessibility.

Experimental - Limited Browser Support

What is color-contrast()?

The color-contrast() CSS function automatically selects the most accessible color from a list based on WCAG contrast requirements. It ensures your text is always readable.

Basic Syntax

color: color-contrast(white vs black, blue, red);

With Target Contrast Ratio

color: color-contrast(white vs black, blue to AA);

Real-World Example

.button {
  background: var(--brand-color);
  color: color-contrast(
    var(--brand-color)
    vs white, black
    to AA-large
  );
}
        

Browser Support

As of 2026, color-contrast() has limited support. Check caniuse.com for current compatibility. For production, use JavaScript fallbacks.