CSS scrollbar-color: keep the scroll affordance visible

When to use it

An audit side panel has a long record list and already uses overflow auto. A local scrollbar tint can align with the panel while still showing where more content exists. Choose a thumb that is visibly different from the track and test it in both the light and dark page themes. Keep scrollbar-width auto unless a narrower control has been justified separately. The sample returns control to the system under forced colors, although user agents may do this automatically. Test classic and overlay scrollbar platforms, high zoom, pointer dragging, keyboard scrolling, and a short list that does not overflow. Do not rely on the scrollbar's color as the only signal that a panel scrolls; a clipped row and surrounding layout can still be confusing. Avoid applying a global scrollbar theme to every nested scroller without reviewing each background.

.audit-side-panel { max-block-size: 32rem; overflow-y: auto; scrollbar-color: #4d6577 #e6edf1; }
@media (forced-colors: active) { .audit-side-panel { scrollbar-color: auto; } }

Cost and verification

The color rule is cheap. The cost is cross-platform testing because overlay scrollbars may appear only during interaction and may not look like the classic control used in a desktop mockup. Check contrast of the actual thumb and track rather than treating the chosen hex values as proof. A very dark track can make the panel feel disabled; a faint thumb can conceal the scroll affordance. Keep the native input path and avoid hiding the scrollbar merely to gain a few pixels. The browser may override authored colors for accessibility, and that override should be welcomed rather than counteracted with platform-specific pseudo-elements.

Common Mistakes

• Do not use an indistinct thumb and track pair.
• Do not assume authored colors override system accessibility settings.
• Do not hide a second scroll region's affordance for visual tidiness.

Connected lessons

• CSS Property Decisions
• CSS scrollbar-width: keep scrolling discoverable
• CSS overflow: contain long data without losing controls
• CSS dark mode and forced colors: honor distinct user settings