Let the browser pick the most readable text color for any background with this new CSS function.

Una provides insights into web accessibility, inclusive design, and user experience best practices. Developers can explore Una's  articles, guides, and resources to gain a deeper understanding of accessibility standards, design principles, and usability considerations. By embracing Una's teachings, developers can ensure that their digital products are accessible to all users, regardless of their abilities or impairments, and create more inclusive and user-friendly experiences for everyone.

Una Kravets

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.

Automated Accessible Text with contrast-color()