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