- Success Criterion 1.4.11
- Conformance level AA
Slider Track or Progress Bar With Too-Low Contrast
1.4.11 — Non-text Contrast
Scenario
Setting
An insurance company's claims form
What’s wrong
Slider tracks/thumbs and progress bars <3:1.
Example
Watch an insurance company's claims form closely and you'll spot this: slider tracks/thumbs and progress bars <3:1.
Why it matters
Low-vision and color-blind people who need to perceive controls and meaningful graphics. On an insurance company's claims form, this barrier means they can't read the text against its background.
How to test
Measure slider tracks/thumbs and progress bar fills against their background: 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
Corrected, an insurance company's claims form now lets a visitor see the control's boundary and current state.
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