coderef

contrast-color()Baseline · Newly available

The contrast-color() CSS function picks a color that has guaranteed contrast against a specified foreground or background color.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Apr 10, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–146Not supported
147+Supportedsince Apr 7, 2026
Current: 155
Edge
12–146Not supported
147+Supportedsince Apr 10, 2026
Current: 154
Firefox
1–145Not supported
146+Supportedsince Dec 9, 2025
Current: 157
Safari
1–18.6Not supported
26+Supportedsince Sep 15, 2025
Current: 27
MobileChrome Android
18–146Not supported
147+Supportedsince Apr 7, 2026
Current: 155
Firefox Android
4–145Not supported
146+Supportedsince Dec 9, 2025
Current: 157
Safari iOS
1–18.6Not supported
26+Supportedsince Sep 15, 2025
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Apr 10, 2026. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: contrast-color.

Feature detection

CSS · check before using
@supports (color: contrast-color(red)) {
  /* styles that use contrast-color */
}

/* or in JavaScript */
if (CSS.supports("color", "contrast-color(red)")) {
  // use it
}

Documentation (MDN)

Specification