w3c / w3c/csswg-drafts

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

Open
#9,853 6 comments 0 reactions 1 assignee View on GitHub

@frivoal is already working on this.

Since Jun 19, 2026.

Closed Accepted by CSSWG Resolution css-scrollbars-1 Needs Edits spec-test-mismatch
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:

  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:
chrome

Firefox:
ff

(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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.