- 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
During an audit of a podcast app's episode list: carousel/pagination indicator dots below 3:1 — current vs — inactive states, or dots vs — background.
Why it matters
Low-vision and color-blind people who need to perceive controls and meaningful graphics. On a podcast app's episode list, that means they can't perceive the control's boundary or state.
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
The visual element (border, icon, indicator, state marker) must have at least 3:1 contrast against adjacent colors in every state.
Outcome
With the fix in place on a podcast app's episode list, they tell the information apart without relying on color, specifically for the “Carousel Dots With Contrast Too Low to Distinguish” issue on a podcast app's episode list.
Who is affected
Low-vision and color-blind people who need to perceive controls and meaningful graphics.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Focus Outline Removed With No Replacement Indicator
- Input Field Border With Contrast Too Low to See
- Checkbox or Radio Outline Too Faint When Unchecked
- Toggle Switch States Too Similar in Color to Tell Apart
- Focus Indicator Present but Below the Contrast Minimum
- Icon-Only Button Glyph With Contrast Too Low to See