v147 · css · covered on mdn
CSS contrast-color()
A CSS color function that returns black or white — whichever provides greater contrast — against a given color. Useful for ensuring text remains readable regardless of a dynamic background color, without needing JavaScript or precomputed fallbacks.
this feature is documented on MDN
MDN: contrast-color()
MDN has a full reference page for contrast-color() including syntax, examples, browser compatibility, and the contrast algorithm used. gendn doesn't duplicate that here.
quick reference
| Syntax | contrast-color(<color>) |
|---|---|
| Returns | black or white — whichever has higher WCAG contrast ratio against the argument |
| Where usable | Anywhere a <color> value is accepted |
| Example | color: contrast-color(var(--bg)); |
| Shipped in | Chrome 147 (desktop + Android) |
| ChromeStatus | 4841046007742464 — CSS contrast-color() |
| Spec | CSS Color Level 6 — contrast-color() |