Mixing colors in Forced Colors Mode

While using the relatively new color-mix function, I noticed browser differences in Forced Colors Mode that I found worth exploring. Granted, it’s rather unusual that color-mix and Forced Colors Mode are part of the same sentence, let alone inspiration for a blog post.

Well, what would you expect to happen when the color palette is reduced to a bare minimum? There is not a lot to mix in the first place. And not a lot is what is happening in Chromium-based browsers, color-mix doesn’t really do anything: The colors you throw into the mix do not matter, if the function is applied to e.g. color or border-color, you end up with the text color. And if it is applied to background-color, you end up with whatever the background should be on a given element, most often Canvas.

This is where Firefox enters the picture. The moment all the colors are CSS system colors, Firefox actually performs the mix.

li:nth-child(2) {
	border-color: color-mix(in srgb, CanvasText, Canvas);
}

So if we mix CanvasText with Canvas 50:50, like shown in the example above, we do get the inbetween color in Firefox.

I didn’t stop there. I tried other combinations. If we mix a system color with transparent, we are back to CanvasText. Unless the mix happens for background-color, in that case we actually get a semi-transparent version of the system color. 😮

Compare this to Chromium-based browsers, where we end up with CanvasText even if we “mix” Mark with Mark.

In the early stage of discovering the issue, I found it cool what Firefox is doing. And I was tempted to say the other browsers should follow suit. But on second thought, Forced Colors Mode is about reducing the palette, hence the result of color-mix has little to no value here. And while I could even argue that mixing Canvas and CanvasText could be useful, the moment we start doing weird things like mixing CanvasText with LinkText we realize that this is actually nonsensical, right?

I’ll file a Firefox bug. Reluctantly?