contrast-color()
A function that automatically selects a text color with the best contrast against a given background color. It's a game-changer for dynamic themes, ensuring text remains readable regardless of the background.
Quick example
.dynamic-badge {
background-color: var(--bg-variable);
/* Color is automatically chosen for best contrast */
color: contrast-color(var(--bg-variable));
}contrast-color() Browser Support
Newly availableSince 202680% global usage
Since 2026 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
147+
146+
26+
147+