- From: Lea Verou via GitHub <sysbot+gh@w3.org>
- Date: Mon, 15 Feb 2021 16:32:42 +0000
- To: public-css-archive@w3.org
> I don't know if this has been discussed previously, but what should happen if only one color was provided to `scrollbar-color`? What [we recommended](https://github.com/w3ctag/design-reviews/issues/563#issuecomment-767375070) was slightly different: that each of the two color values also accepts the value `auto`, which produces a color generated by the UA. Then a single `<color>` value can just be a shorter form of `<color> auto` or `auto <color>`, whichever is more useful. > 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. On a high level, yes. However, as with most things color, this is not as simple and straightforward as it sounds: - Using HSL lightness leads to unpredictable results, especially when the operation moves toward or crosses the 50% L boundary. E.g. increasing the lightness of `hsl(20, 100%, 30%)` (brown) by 50% produces `hsl(20, 100%, 45%)` (orange). Mixing with white or black, even if the interpolation is done in HSL, can produce better results (e.g. `hsl(20, 50%, 65%)`, a light brown). - Regardless of the lightening/darkening algorithm, if the interpolation is done in a non perceptually uniform space like sRGB and friends (HSL, HWB etc) then we cannot define it as a X% adjustment, as it will produce completely different levels of perceptual difference. For example, [here](https://dabblet.com/gist/fd1f9b27342c28d4dfcc20263bf4ee23) is the same lightness adjustment, on colors of the same HSL lightness (50% to 70%):  As you can see, the top pair is way more similar (ΔE2000 = 4.9), whereas the bottom pair is substantially different colors (ΔΕ2000 = 23.9). This can be solved by either interpolating in a perceptually uniform space (e.g. Lab or LCH), or by iterating and measuring the DeltaE between the foreground and background color, instead of having a naïve algorithm that performs the same percentage adjustment each time. - The high level algorithm itself would need to be different in light and dark mode: in light mode the track is lighter than the thumb, and in dark mode, the track is darker than the thumb. - What to do in edge cases? E.g. if the thumb is specified as white or black? I suppose it's better to darken instead of lighten and vice versa than to show an all-white or all-black unusable scrollbar. -- GitHub Notification of comment by LeaVerou Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5651#issuecomment-779332670 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 15 February 2021 16:32:44 UTC