Perhaps 3:1 between the track and the page and 4.5:1 between the scrubber and the track. It may be worth defining a minimum baseline contrast for you own styles. There is a text contrast SC at Level AAA, or the strictest level designed to support the broadest range of users, that defines a minimum 7:1 contrast ratio. The corresponding AA SC for text contrast sets a minimum of 4.5:1. The WCAG SC above is Level AA, which is the baseline for most laws that incorporate WCAG. We should consider taking this further given the importance of this control. That essentially means they should each have at least a 3:1 contrast ratio with each other.

In this case, I take adjacent to mean the scrubber ( scrollbar-thumb), the scroll track ( scrollbar-track) and the page. It defines a minimum contrast ratio of 3:1 with adjacent colors. User interface components, including browser controls modified by the author, fall under this. WCAG 2.1 Success Criterion (SC) 1.4.11 Non-text Contrast provides some guidance here. But once you start changing the browser defaults your page falls under WCAG and you are on the hook for making it comply. Just like the browser’s default focus ring does not meet WCAG contrast requirements, the browser’s default scrollbar has its own issues.

If you leave native features alone then you can usually get a pass in an accessibility audit. What follows are also informed by my experience and opinions.īear in mind this frustrating part. The Web Content Accessibility Guidelines (WCAG) version 2.1 can help us. I do not want my terrible design skills to prejudice your approach. I am intentionally excluding visuals in this post.

For a touch-only context where the page can be scrolled by a flick anywhere on the screen some of the sizing suggestions need not apply, though visibility suggestions should. Generally the feedback I offer applies to desktop browsing. After all, in the words of someone else, accessibility is really usability under a microscope. Conveniently, we can look to inclusive design and accessibility guidelines. Having hard rules for usability can be tricky.

Now that one of the most popular CSS resource sites on the innertubes has implemented styled scrollbars in the browser I think the time is right (or too late?) for me to try to capture a starting point for ensuring they are usable.

CSS Scrollbar Module (added 10 December 2021).

Updated June 9, 2022, originally posted Janu3 Comments

Jscrollbar disappears on resize