- From: Felipe Erias via GitHub <sysbot+gh@w3.org>
- Date: Fri, 23 Oct 2020 03:00:41 +0000
- To: public-css-archive@w3.org
felipeerias has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-scrollbars][css-scrollbars-1] Using scrollbar-color to tint the scrollbar == The property [scrollbar-color from CSS Scrollbars](https://drafts.csswg.org/css-scrollbars/#scrollbar-color) allows the user to pass two colors, to be used by the thumb and the track of the scrollbar. So, `scrollbar-color: indigo lavender` with produce a scrollbar where the thumb is `#4B0082` and the track is`#E6E6FA`. The spec also advises authors to _"ensure the specified colors have enough contrast between them"_. I don't know if this has been discussed previously, but what should happen if only one color was provided to `scrollbar-color`? ``` scrollbar-color: orange; ``` ``` scrollbar-color: darkgreen; ``` My proposal is that when one color is provided to `scrollbar-color`, it would be used by the UA to automatically define the color scheme for the scrollbar (to "tint" it, so to speak). This would allow users to easily style the scrollbars on their pages while the UA ensures adequate accessibility by making sure that the specific colors have enough contrast between them. -- One starting point to approach this, just to get the ball rolling, could be to use the provided color for the thumb and calculate the track color by keeping the same hue and changing lightness/saturation automatically until the desired contrast is found. In the first example, the thumb would be `#FFA500` and the track would perhaps be `#362B17` (using this [contrast checker](https://colourcontrast.cc/362b17/ffa500) as reference). In the second, the thumb would be `#006400` and the track would perhaps be `#E5ffE5` ([reference](https://colourcontrast.cc/e5ffe5/006400)). This approach might not work in all cases, for instance with the `crimson` color `#DC143C`. For those cases, maybe the thumb color would need to be changed slightly to increase the contrast with the background. For example, `scrollbar-color: crimson;` might produce a `#9e0e2b`thumb and a `#fae9ed`track ([reference](https://colourcontrast.cc/fae9ed/9e0e2b)). Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5651 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 23 October 2020 03:00:43 UTC