contrast-color()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thecontrast-color()CSSfunction takes acolor value and returns a contrasting color. The function commonly ensuresthe WCAG AA minimum contrast. The browsers may use different and better algorithms.
Thecontrast-color() function enables specifying a text color and automatically generating a contrasting background color, or vice versa. It avoids the need to maintain background-text color pairs.
Syntax
contrast-color(red)contrast-color(var(--backgroundColor))Parameters
Return value
A<named-color> of eitherwhite orblack.
Description
Thecontrast-color() function returns a value ofwhite orblack, depending on which value has the greatest contrast with the input color. If bothwhite andblack have the same contrast with the input color,white is returned.
Warning:WCAG AA (4.5:1) contrast is not capable of producing clearly readable text in all cases. Mid-tone background colors generally don't provide enough contrast with either black or white foreground. For example,contrast-color() on a royal bluish (#2277d3) background produces black text, which is not readable for small text. It is recommended, therefore, to use light or dark colors with thecontrast-color() function.
Examples
Contrasting text for a button
In the following example, the browser automatically applies the selected color to the background of the "Button"<button>, and the contrasting color (black or white) to its text.
<label> Select background color of the button: <input type="color" value="#660066" /></label><br /><button>Button</button>:root { --button-color: lightblue;}button { background-color: var(--button-color); /* Set contrasting text color automatically */ color: contrast-color(var(--button-color));}body { padding: 1rem;}button { margin: 3rem; padding: 1rem; width: 150px; font-size: 2rem; border-radius: 1rem;}@supports not (color: contrast-color(red)) { body::before { content: "Your browser doesn't support the contrast-color() function."; background-color: wheat; display: block; width: 100%; text-align: center; } body > * { display: none; }}const colorPicker = document.getElementById("colorPicker");const root = document.documentElement;function updateColor(color) { root.style.setProperty("--button-color", colorPicker.value);}colorPicker.addEventListener("input", updateColor);updateColor();Light and dark mode usage
In the following example, theprefers-color-schememedia query is used to set a background color based on operating system or browser color scheme settings. Thecontrast-color() function is used to set the text color automatically.
Try changing the browser or OS dark mode setting to see the effect.
<pre> Q: How does CSS transform light into energy? Ans: Using <a href="/en-US/docs/Web/CSS/Reference/Properties/font-synthesis">font-synthesis</a>.</pre>:root { --background-color: navy;}@media (prefers-color-scheme: light) { :root { --background-color: wheat; }}body,a { background-color: var(--background-color); color: contrast-color(var(--background-color));}body { padding: 2rem; font-size: 1.2rem;}pre { margin-top: 3rem;}@supports not (color: contrast-color(red)) { body::before { content: "Your browser doesn't support the contrast-color() function."; background-color: wheat; display: block; width: 100%; text-align: center; } body { background-color: white; } body > * { display: none; }}Specifications
| Specification |
|---|
| CSS Color Module Level 5 # contrast-color |
Browser compatibility
See also
contrast()- CSS colors module
- CSS custom properties and
var() prefers-contrastandprefers-color-scheme@mediafeatures- WCAG: color contrast
- How to have the browser pick a contrasting color in CSS on webkit.org (2025)
- WebAIM Contrast Checker on webaim.org (2025)