CSS Function

color-contrast()

The color-contrast() function selects the color with the highest contrast ratio against a base color from a list of candidates.

Syntax

color-contrast(base-color vs color1, color2, ... [to AA | AA-large | AAA | AAA-large])

Name	Type	Required	Description
base-color	color	Yes	The reference color to compare against
color-list	color[]	Yes	Comma-separated list of candidate colors
target	keyword	No	Optional WCAG target: AA (4.5:1), AA-large (3:1), AAA (7:1), AAA-large (4.5:1)

Picks black or white for best readability.

css

color: color-contrast(var(--bg) vs black, white);

Selects the first color meeting WCAG AA against blue-500.

css

color: color-contrast(#3b82f6 vs white, black to AA);

Chrome

Not supported

Firefox

Not supported

Safari

Not supported

Edge

Not supported

Opera

Not supported

You can achieve similar results in Tailwind CSS using the following utility classes:

No equivalent. Use Tailwind plugins or PostCSS for contrast-based color selection

Can I use color-contrast() today?▼

Not in production. As of 2026, it is only available behind a flag in Safari. Use JavaScript-based contrast checking as a fallback.

What contrast algorithm does it use?▼

It uses the WCAG 2.1 relative luminance contrast ratio algorithm by default.

Try our free tools to work with color-contrast() and other CSS color functions.