• Success Criterion 1.4.11
  • Conformance level AA

Custom Scrollbar With Contrast Too Low to Locate

1.4.11 — Non-text Contrast

Scenario

Setting

A music streaming app's playlist screen

What’s wrong

Custom scrollbars users must locate <3:1.

Example 

::-webkit-scrollbar-thumb { background: #f0f0f0; }
.playlist-panel { background: #ffffff; }

Why it matters

A listener scrolling a long playlist can't locate the scrollbar thumb to drag it, since it nearly matches the panel background.

How to test

Measure a custom-styled scrollbar against the page background: users need to be able to visually locate it at 3:1.

How to fix

Style custom scrollbar thumbs to clear 3:1 against the track, the same as any other required UI component.

::-webkit-scrollbar-thumb { background: #8a8a8a; }
.playlist-panel { background: #ffffff; }

Outcome

A listener finds the scrollbar thumb immediately and drags straight to the end of a 200-song playlist.

Who is affected

Low-vision users who navigate long lists by dragging the scrollbar can't find it against this near-white background.

Learn more

Related scenarios