In the spirit of “everything old is new again,” browsers are once again supporting the ability to style the scrollbar. Much like custom CSS mouse cursors, I feel this is also a mistake.
When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this:
The scope of concern for the browser is this:
The browser’s UI is informed by the operating system it is installed on. This is important to note.
Browser UI is used to help create consistency across the entire experience of using a device. When you deviate from these standards, you introduce ambiguity.
Ambiguity means less certainty about what the piece of UI is, how you interact with it, and what effects taking action on it will cause. The more you deviate, the more confusing things get.
This phenomenon is why checkboxes use squares and radio buttons use circles—even with flat design removing depth and texture from everything.
We may be long-separated from car dashboards using physical press knobs, swapped out in favor of dangerous, inefficient touchscreens. However, the metaphors drawn from these physical equivalents still persist.
Scope of concern
Scrollbars are part of the area of the browser that is outside your scope of concern.
Some may argue with this and claim that being allowed to style them with CSS means that it is fair game. However, I think there are some accessibility considerations that were not taken into account before this capability was given to us by the platform.
Following are a list of questions you should ask yourself if you’re considering modifying your scrollbar’s visuals.
The control
For reference, this CodePen is what I used to perform my testing:
Can your branding succeed without scrollbars being customized?
Custom scrollbars, like custom mouse cursors, can styled to help reinforce the branding of a website or web app. Just because you can, however, does not mean you should.
Ask any successful marketing agency—branding is so much more than how something looks. You probably need to find a new brand strategy if your entire outreach efforts depend on a scrollbar’s appearance.
Spoilers: you don’t. Scrollbars work without CSS.
You might be scoffing at the kilobytes this removal represents, but when it comes to web performance, every little bit counts. Through the ruthless lens of performance optimization, this is unnecessary data to force someone to download.
Network throttling, metered data plans, dead zones, and many other factors beyond your control are all forces you need to contend with. Better to prioritize sending styling information for your website or web app’s actual surface area.
Will your custom scrollbar colors pass color contrast?
If someone can’t see something, they won’t know it is there. If they don’t know it is there, they won’t take action on it. It’s as simple as that.
A history lesson
Apple learned the lesson about visible scrollbars the hard way when it introduced its ultra-minimal, disappearing scrollbar indicators:
There’s no visual indication that there’s more content present in this window—the only way to discover it is to scroll downwards. However, without an affordance to indicate the presence of additional offscreen content, the chances are low that someone will bother to check.
Video description
The same list of files in a Finder window as the previous image. This time there is a slow downward scrolling action and a scrollbar reactively appears. Files 15 through 42 are then revealed from the bottom of the Finder window’s viewport, continuing the grid. Once the scrollbar reaches the bottom of the available content area there is a slight bouncing effect to comminicate the end of the content. After reaching the bottom there is another, faster scrolling action to return back to the top, with the same subtle bouncing effect at the top of the available content area. After reaching the top the scrollbar fades back to being invisible.
This is why Apple introduced a preference to always show scroll bars. Think of this preference a lot like their introduction of the reduced motion accessibility toggle, where a setting had to be introduced after the general public revealed that their novel idea actually made things worse for a lot of people.
Windows followed this path blazed by Apple, and also had to set up their own preference to deal with this issue:
If you modify the Operating System scrollbar’s appearance, it is now on you to ensure that it meets Web Content Accessibility Guidelines criteria. This criteria includes minimum viable color contrast.
Specifically, the immediate concern is Success Criterion 1.4.11: Non-text Contrast. This criterion is level AA, which is the typical level most websites and web apps target, and is not a specialized concern.
I’m not going to get into the particulars of how to meet this success criterion this since I don’t think you should be modifying the scroll bar’s appearance in the first place. That said, you’re now aware it’s an issue so you can’t claim ignorance.
Will your custom scrollbar colors defer to a user-set theme?
Windows 11’s shiny new UI is another coat of paint slathered over previous editions. As you peel back these layers, you find the UI and functionality of versions of Windows past.
One of these older features with a new coat of paint is the ability to theme Windows. Themes allow you to specify the wallpaper, sounds, accent color, mouse cursor, and other qualities and quickly swap them into pace.
Themes are also portable, and are shared as .theme or .themepack formats. Windows offers its own official themes. There are also websites that aggregate, categorize, and share themes people have made.
Some Windows Themes adjust the scrollbar’s colors. From my testing, custom CSS scrollbar styling overrides this:
If I could wager a guess, it’s likely that theme colors tie into Forced Color mode concerns behind the scenes (more on this in a bit).
The mechanism that orchestrates a Windows theme is immaterial to the overall point: Your decision to adjust the scrollbar is overriding someone else’s explicit preference.
We also don’t know why someone is changing their theme. For some, it could be aesthetic sensibilities. For others, it could be adjusting things to lessen/increase contrast, or create more uniformity. It might even be a combination of the previous.
While this sort of OS customization used to be more popular, it is still supported by Windows and likely has tens or hundreds of thousands of people using the feature. When it comes to accessibility, it’s also a terrible idea to make deciding who and what to support a popularity contest.
Customizations like this are deeply personal. They might b
