[csswg-drafts] [css-scrollbars] What do (semi) transparent colors mean for scrollbar-color (#9853)

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

== [css-scrollbars] What do (semi) transparent colors mean for scrollbar-color ==
What should the use of fully or partly transparent colors mean for the [`scrollbar-color` property](https://drafts.csswg.org/css-scrollbars/#scrollbar-color) ?

Potential answers could be:
1. ignore the alpha channel, and treat it as an opaque color
2. precompose the (semi-)transparent color against white, and use that as the actual color
3. precompose the (semi-)transparent color against white or black depending on light vs dark mode, and use that as the actual color
4. don't precompose the track's color, and let the background of the element become visible through a (semi) transparent track
5. don't precompose the thumbs's color, and let the track become visible through a (semi) transparent thumb
6. Some combination of the above, doing different things for the thumb and track
7. Don't define, and let it up to the UA.

Because we put the responsibility of ensuring good contrast on the author, I think leaving it up to the UA is not appropirate.

This is related to, but possibly different from the similar question about accent colors discussed in https://github.com/w3c/csswg-drafts/issues/9852: the difference arises because in the accent-color's case, it is the browser's job to ensure good contrast somehow, while in the scrollbar's case, the author provides both colors and is responsible for the contrast. This could potentially result in different conclusions in either case.

As far as I can tell, both Chrome and Firefox currently do something of 4+5, though the way Firefox handles the transparency of the track is a little strange, as you get the same color as Chrome where the horizontal and vertical tracks intersect, but some darker/less transparent shade in each track separately.

http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=12309
Chrome:
<img width="102" alt="chrome" src="https://github.com/w3c/csswg-drafts/assets/113268/cd503542-6cf8-45f2-9167-5641ecbb235c">


Firefox:
<img width="102" alt="ff" src="https://github.com/w3c/csswg-drafts/assets/113268/8560d8aa-82f6-4468-86d9-cd95fa3d9e67">


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9853 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 05:30:27 UTC