color-contrast()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.

Syntax

css
color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)

Values

Functional notation: color-contrast(color vs color-list)

color

Any valid <color>.

vs

A literal token as a component of the syntax.

color-list

A comma-separated list of at least two color values to compare with the first value.

Specifications

Specification
CSS Color Module Level 6
# colorcontrast

Browser compatibility

BCD tables only load in the browser

See also