[csswg-drafts] [css-ui-4] Transparent accent colors (#9852)

frivoal has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-ui-4] Transparent accent colors ==
What does it mean for an [accent color](https://drafts.csswg.org/css-ui-4/#widget-accent) 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 light one.
http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=12308

Chrome:
<img width="186" alt="Screenshot 2024-01-25 at 13 42 57" src="https://github.com/w3c/csswg-drafts/assets/113268/7a8d1611-cb18-494d-b5ae-dea0ebbb1b3e">

Safari:
<img width="157" alt="Screenshot 2024-01-25 at 13 43 30" src="https://github.com/w3c/csswg-drafts/assets/113268/95708f0e-5b16-464f-8381-f1fa15044009">

Firefox:
<img width="198" alt="Screenshot 2024-01-25 at 13 44 13" src="https://github.com/w3c/csswg-drafts/assets/113268/f439b4ac-566a-4279-82a4-59b6eba3329b">

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 they 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 differenciation, or should we mandate a particular approach to handling transparency so that authors get more predictable colors?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9852 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 25 January 2024 04:56:09 UTC