[css-scrollbars] What do (semi) transparent colors mean for scrollbar-color
@frivoal is already working on this.
Since Jun 19, 2026.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 24
Description
What should the use of fully or partly transparent colors mean for the scrollbar-color property ?
Potential answers could be:
- ignore the alpha channel, and treat it as an opaque color
- precompose the (semi-)transparent color against white, and use that as the actual color
- precompose the (semi-)transparent color against white or black depending on light vs dark mode, and use that as the actual color
- don't precompose the track's color, and let the background of the element become visible through a (semi) transparent track
- don't precompose the thumbs's color, and let the track become visible through a (semi) transparent thumb
- Some combination of the above, doing different things for the thumb and track
- 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:
Firefox:
(Note: these results are with classic / non-overlay scrollbars. See also https://github.com/w3c/csswg-drafts/issues/9855 for additional considerations in the case of overlay scrollbars)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.