W3cubDocs

/CSS

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

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

Values

Functional notation: color-contrast( <color> vs <color>#{2,} )

<color> is any valid color.

<color>#{2,} is a comma-separated list of color values to compare with the first value.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
color-contrast No No No No No 15 No No No No 15 No

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast