Slider Track or Progress Bar With Too-Low Contrast

1.4.11 — Non-text Contrast

Scenario

An insurance company's claims form

Slider tracks/thumbs and progress bars <3:1.

.claim-progress { background: #eeeeee; }
.claim-progress .fill { background: #f2f2f2; } /* filled portion barely differs from the track */

A claimant checking how far along their multi-step claim is can't tell the filled progress from the empty track.

Measure slider tracks/thumbs and progress bar fills against their background: 3:1 minimum.

Give the filled portion of a progress indicator strong contrast against its track, not just a lighter shade of the same gray.

.claim-progress { background: #e0e0e0; }
.claim-progress .fill { background: #1565c0; }

A claimant glances at the progress bar and knows immediately they're on step 3 of 5.

Low-vision claimants lose the visual cue for how much of the claims process remains, causing confusion about next steps.