The new CSS `contrast-color()` function, landing in Chrome 147 and now available in all modern browsers, automatically returns either black or white as the text color that provides the highest contrast against any given background color. It meets the WCAG 2.1 AA minimum contrast ratio of 4.5:1. Practical use cases include dynamic button text, dark mode theming with `prefers-color-scheme`, and algorithmically generated color palettes using `color-mix()`. The function reduces code repetition by replacing manual light/dark text color management with a single declaration.
Table of contents
The syntax #Basic Demo: Dynamic buttons #Dark mode with prefers-color-scheme #Hover states and generated palettes #Wrap up #Sort: