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.
This is an experimental technology. The syntax and behavior are still subject to change.
Syntax
/* Usage 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
Limited availability
Since
2020 0% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
Learn more