Limited supportUseful when contrast-color() adds a clear capability without requiring fragile workarounds.
Color Limited support

contrast-color()

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

Color

Overview

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

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.contrast-color
146
26
26
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.dynamic-badge {
  background: var(--badge-color);
  color: contrast-color(var(--badge-color));
}

Live demo

brightbackground

CSS brightbackground demo.

PreviewFullscreen

darkbackground

CSS darkbackground demo.

PreviewFullscreen

col-badge

CSS col-badge demo.

PreviewFullscreen

Use cases

  • Browser-native behavior

    Use contrast-color() to rely on the platform for behavior that would otherwise require extra code or CSS complexity.

  • Progressive enhancement

    Enhance the experience where support exists while keeping a solid baseline elsewhere.

Cautions

  • Check browser support and actual product need before adding a new platform feature widely.
  • Keep feature usage understandable so future contributors know why it was chosen.

Accessibility

  • New platform features should still preserve readable defaults and robust interaction patterns.
  • Verify that enhancement paths do not leave unsupported environments with a broken experience.

Related links

Powered by web-features