contrast-color()

The CSS function that automatically picks black or white for maximum contrast against any background. Baseline 2026

Inspired by the following two terrific articles by Una Kravets, who proposed contrast color in 2019. Start with Automated accessible text with contrast-color() and then dive deeper with contrast-color() beyond black & white.

Live Color Picker

Choose any background color and see contrast-color() in action.

The quick brown fox jumps over the lazy dog

Input #6633cc Returns white 
background: #6633cc;
color: contrast-color(#6633cc);

Palette Generator

Pick a base color and watch an entire palette build itself using contrast-color() and relative color syntax. Every swatch is pure CSS — click the copy button to grab the code.

    Icons for Free

    When you embed SVGs directly in your HTML and use fill="currentColor", icons automatically inherit contrast-color() — no extra work needed. Change the background and every icon stays readable. 

    .toolbar {
  background: var(--bg);
  color: contrast-color(var(--bg));
}

/* SVGs using fill="currentColor" inherit
   the contrast color automatically */

    Icons from Google Fonts Icons

    Advanced Techniques

    Go beyond black and white with color-mix() tinting and style query detection.

    Tinting with color-mix()

    Blend the background color into the contrast result to create branded text instead of pure black or white.

    A word of caution: contrast-color() picks the most contrasting color for you, but color-mix() blends it back toward the background — at higher percentages this can undo that benefit. Always verify your final result with a contrast checker.

    Pure contrast-color()

    Sample text

    Tinted with color-mix()

    Sample text

    color: color-mix(in oklch, #6c1afb 15%, contrast-color(#6c1afb));

    Light/Dark Detection with Style Queries

    Use contrast-color() as an intelligent light/dark detector. Register it as a custom property, then use style queries to switch entire palettes.

    Dynamic Card

    This card detects whether its background is light or dark, then applies an entirely different color palette — not just black or white.

    Auto-themed 
    @property --contrast {
  syntax: "<color>";
  initial-value: white;
  inherits: true;
}

.container {
  --bg: var(--brand-color);
  --contrast: contrast-color(var(--bg));
  background: var(--bg);
}

@container style(--contrast: white) {
  .card-title { color: antiquewhite; }
  .badge { background: oklch(0.85 0.05 80); }
}

@container style(--contrast: black) {
  .card-title { color: midnightblue; }
  .badge { background: oklch(0.3 0.1 260); }
}

    Card Builder

    Build a real-world card component with automatic contrast. Pick a background and watch everything adapt.

    Event Announcement

    Join us for an evening of creative coding and web platform exploration. Light refreshments provided. 

    .card {
  --card-bg: #1a5c2e;
  background: var(--card-bg);
  color: contrast-color(var(--card-bg));
}

.card-button {
  background: contrast-color(var(--card-bg));
  color: var(--card-bg);
}

    Feature Detection

    Ship contrast-color() today with progressive enhancement.

    CSS — @supports

    @supports (color: contrast-color(red)) {
  .element {
    color: contrast-color(var(--bg));
  }
}

    JavaScript

    if (CSS.supports("color", "contrast-color(red)")) {
  // contrast-color() is available
}