One predictable pain point with contrast-color() is that it only returns black and white named colors. From a design systems perspective, that’s not ideal because you want your colors. You want your harmonious brand and the colors you and your team spent thousands of man hours in meetings deciding on. Those colors.

Dave Rupert

The CSS contrast-color() function only returns black or white, which is limiting for design systems that need brand-specific colors. Using Lea Verou's --contrast-color() workaround alongside the upcoming CSS if() function, you can map contrast results to your own design tokens. The technique requires registering a custom property with @property to enable color-type comparisons in style queries, then using an if() statement to select the appropriate design system token based on whether the contrast result is light or dark.

Using your design system colors with contrast-color()