Skip to content

Commit

Permalink
[css-scrollbars] Ensure sufficient contrast
Browse files Browse the repository at this point in the history
UAs must ensure sufficient contrast themselves if they're not showing
the scrollbar track.

See #9855
  • Loading branch information
frivoal committed Sep 13, 2024
1 parent e43d626 commit 757cf6b
Showing 1 changed file with 33 additions and 0 deletions.
33 changes: 33 additions & 0 deletions css-scrollbars-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,39 @@ Value Definitions</h3>
Note: When a user interacts with a scrollbar (e.g. hovering or activating),
implementations may alter which scrollbar colors apply to which scrollbar parts.

If the user agent displays the scrollbar without the [=track=],
they must ensure reasonable contrast between the [=thumb=] and what is behind it.
However, if the author set the color of the [=track=] to be fully transparent,
the user agent may assume that the author has provided for sufficient contrast
even with an invisible track.

Note: This is typically relevant in the case of [=overlay scrollbars=],
either on platforms where the [=track=] is never displayed,
or on platforms where it is only displayed
when the scrollbar is being interacted with
but not when scrolling with the mouse wheel or the track-pad.
This does not apply in cases where the entire scrollbar is hidden
as is often the case with [=overlay scrollbars=]
while no scroll operation is ongoing
<em>and</em> when the scrollbar is not being interacted with either.

<div class=note>
Note: The user agent is free to achieve this by any of a variety of means,
depending on the platform,
on design choices,
or on what is practical to implement,
such as:

* Doing nothing if it can determine that contrast is already sufficient
* Doing nothing if the design and geometry of the thumb ensures that some part of it will always be visible regardless of what is behind it
* Adding an outline, shadow, or glow around the [=thumb=] to provide contrast (possibly using the [=track=] color as the contrasting color, or possibly using a different shade of the [=thumb=] color)
* Adding some texture or geometry to the [=thumb=] so that it's color isn't uniform
* Drawing the [=track=] anyway in cases where not doing so yields insufficient contrast
* Replacing the [=thumb=] color with the [=track=] color when that provides better contrast
* Altering the luminosity of the specified [=thumb=] color while preserving its hue
* Disregarding the specified [=thumb=] color altogether and use automatically determined alternative
</div>

<h3 id=color-compat>
Interaction with non-standard features</h3>

Expand Down

0 comments on commit 757cf6b

Please sign in to comment.