Firefox 146 added support for contrast-color() joining Safari 26 in the First Implementor’s Club. For those unfamiliar, contrast-color(<color>) is a new CSS function that will take a <color> as input and returns either white or black depending on which has the most contrast.

Dave Rupert

Firefox 146 added support for the CSS `contrast-color()` function, joining Safari 26. The function takes a color input and returns either white or black based on maximum contrast. Beyond foreground text color, it can be used to algorithmically determine hover/focus state background colors — mixing in white or black depending on the button's current background. Combined with `color-mix()` and a polyfill using CSS `@function` for Chromium 139+, this enables fully algorithmic, accessible button states without extra tokens or theme-specific overrides. The technique is especially valuable for design systems where button background colors are user-controlled.

Algorithmic hover states with contrast-color()