"The simplest approach is to mix your desired color with the contrast-color() result. Since contrast-color() gives you either black or white, you can use that as the mixing target, blending in your brand color to create a tinted variant. The higher the mix percentage, the more of your brand color you'll get, and the less "safe" the result will be."
"Somewhere between 10-25% for light colors, and 30-40% for dark colors usually keeps things accessible while adding some color, but you should validate specific combinations with either the WCAG contrast checker or APCA contrast checker."
contrast-color() is a new CSS feature landing in Chrome 147 that automatically returns either black or white based on which provides the highest contrast against an input color. The original specification allowed testing against multiple color options, but this was removed from the v1 spec. Two practical workarounds exist: first, mixing the contrast-color() result with your brand color using color-mix() to create tinted variants while maintaining contrast; second, using style queries and custom properties to build custom color palettes. Both methods require testing for WCAG or APCA contrast compliance, with typical safe ranges between 10-25% for light colors and 30-40% for dark colors.
Read at Una
Unable to calculate read time
Collection
[
|
...
]