CSS contrast-color() for Readable Text
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.
/* Hardcode a text color per background */.badge-blue { background: #1e40af; color: white;}.badge-yellow { background: #fde047; color: black;}/* Repeat for every color variant */.badge { background: var(--bg); color: contrast-color(var(--bg));}contrast color Browser Support
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.
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. It became Baseline Newly available in 2026 (Chrome 147, Firefox 146, Safari 26, Edge 147).