Readable text without manual contrast checks
Picking readable text used to mean hardcoding color: white or color: black for each background. contrast-color() does the math automatically, returning whichever meets WCAG AA contrast against the given color.
2 background: var(--bg);
3 color: contrast-color(var(--bg));
4}
2.badge-blue {
3 background: #1e40af;
4 color: white;
5}
6.badge-yellow {
7 background: #fde047;
8 color: black;
9}
10/* Repeat for every color variant */
Browser Support for
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Zero guesswork
The browser calculates contrast automatically. No WCAG math, no hardcoded overrides for each background.
Themeable by default
Change --bg to any color and the text color adjusts. Works with dynamic colors and user preferences.
Accessible by design
contrast-color() targets WCAG AA contrast. Readable text is the default, not an afterthought.
How it works
contrast-color(bg) takes a background color and returns either black or white — whichever meets WCAG AA contrast requirements against that background. No JavaScript, no preprocessor, no lookup table.
The old approach meant manually choosing color: white or color: black for each background, and repeating that decision every time a new color was added. With user-generated colors or dynamic themes, this quickly becomes unmanageable in plain CSS.
Combine it with custom properties for maximum flexibility: color: contrast-color(var(--bg)) means you only define --bg and the browser handles the rest. Support is still early-stage but it is an Interop 2026 focus, so all major browsers are actively implementing it.