• Success Criterion 1.4.11
  • Conformance level AA

Carousel Dots With Contrast Too Low to Distinguish

1.4.11 — Non-text Contrast

Scenario

Setting

A podcast app's episode list

What’s wrong

Carousel/pagination indicator dots below 3:1 — current vs — inactive states, or dots vs — background.

Example 

.carousel-dot { background: #eeeeee; }
.carousel-dot.active { background: #d4d4d4; } /* active dot barely differs from inactive ones */

Why it matters

A listener browsing the featured-shows carousel can't tell which slide is currently active from the pagination dots.

How to test

Measure carousel/pagination dots (current vs — inactive state, and against the background) with a contrast checker: 3:1 minimum.

How to fix

Make the active dot both a distinct color and, ideally, a different size from inactive dots for a stronger cue.

.carousel-dot { background: #bdbdbd; }
.carousel-dot.active { background: #1565c0; }

Outcome

A listener glances at the dots and knows exactly which featured show is on screen.

Who is affected

Low-vision users lose track of their position in a carousel when active and inactive dots are nearly identical.

Learn more

Related scenarios