Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes.

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

Two CSS techniques extend contrast-color() beyond its black-or-white limitation. Method 1 uses color-mix() to blend a brand color into the contrast-color() result, creating tinted variants while maintaining accessibility (10–25% for light, 30–40% for dark backgrounds). Method 2 uses registered custom properties combined with CSS if() or @container style() queries to map the light/dark detection result to fully custom color palettes, giving complete control over foreground colors per background context. Both approaches treat contrast-color() as a light/dark detector and require manual accessibility validation.

contrast-color() beyond black & white

Method 2: Custom color palettes w/style queries #