[css-ui-4] Transparent accent colors

[frivoal]

What does it mean for an accent color to be wholly or partly transparent?

This example shows a series of ratio buttons with black, dark blue, light blue, white, fully transparent, highly transparent dark blue, and slighly transparent dark blue, over a light background, then a dark one.
http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=12308

Chrome:

Safari:

Firefox:

In all cases, the accent color is taken into account, and in all cases, reasonable contrast is ensured. So the spec is respected, and this may be all we need.

But I do notice that browsers process the transparency differently:
Chrome and Safari ignore the alpha channel entirely, while Firefox seems to precompose it over white, and use the resulting color as the accent. Note that none of them actually make the accented control transparent (which seems like a good idea in order to manage contrast).

This can result in an accent that is of a visually very different color:

• The 5th radio button (transparent) in Firefox is white (because transparent over white gives white), while it's black in Chrome and Safari (because the transparent keyword means transparent black and we're ignoring the alpha channel).
• The 6th button (highly transparent dark blue) in Firefox is light blue, while it's dark blue in Chrome and Safari.

Do we consider this level of variation appropriate to enable differentiation, or should we mandate a particular approach to handling transparency so that authors get more predictable colors?

[josepharhar]

I am supportive of changing chromium to match the firefox behavior, assuming that people like the firefox behavior.

Firefox is white (because transparent over white gives white)

I think you mentioned transposing over white or black based on the color-scheme offline, is that right? I made a quick example and I don't think that firefox is incorporating color-scheme: https://jsfiddle.net/jarhar/5gw86unr/33/

I don't have a preference either way, always transposing over white would make it easier to implement.

[josepharhar]

It looks like a chromium bug was already filed for this here. I also started but didn't finish a patch to do this a couple years ago 😅

[josepharhar]

Proposed resolution: Alpha/transparency in colors provided to the accent-color CSS property should be incorporated by transposing the color on top of white when the computed color-scheme for the element is light or black when color-scheme is dark.

[alisonmaher]

Given that we might have more color-schemes in the future, should we consider transposing on top of Canvas as opposed to white/black explicitly?

[tabatkins]

Yes, definitely composite over Canvas.

[josepharhar]

I am implementing transposing on Canvas here: https://chromium-review.googlesource.com/c/chromium/src/+/3851205