contrast-color() Demo

Auto black/white text contrast on any colored surface. Browsers without support fall back gracefully.

Badges with Auto Contrast

Each badge picks black or white text automatically based on its background lightness.

Primary Success Warning Error Info Brand Secondary Accent

Buttons

Buttons auto-contrast regardless of --btn-color.

Filled Status Messages

SuccessAuto contrast on green background. WarningText switches to black on yellow. ErrorAuto contrast on red background. InfoAuto contrast on blue background.

Color Swatches

Each swatch uses contrast-color() via the -auto tokens.

Primary
Secondary
Accent
Success
Warning
Error
Info
Interactive

Interactive: Pick a Color

Change the color and watch text contrast update live.

Sample Text