Designing Player Controls for Low Vision: Contrast, Target Size, and the Overlay Problem
WCAG contrast and sizing rules applied to video UI — why translucent controls fail, how big a touch target actually needs to be, and the scrubber design that works for everyone.
Video players are hostile territory for low-vision users: translucent controls over busy moving imagery, icons without labels, thin scrub bars, and focus indicators that vanish against a bright scene. The fixes are well-specified — most players just never apply them.
The Numbers That Actually Matter
| UI Element | WCAG Requirement | Common Failure |
|---|---|---|
| Control icons vs. background | 3:1 (non-text) | Translucent bar over bright video → ~1.2:1 |
| Caption text | 4.5:1 | White text, no background, over bright scenes |
| Touch/click targets | 24×24 CSS px (AA) / 44px (best practice) | 12px scrubber thumb, 8px hitbox icons |
| Focus indicator | Visible + ≥3:1 contrast | Thin white outline on white video |
The Translucent Overlay Problem
A control bar with background: rgba(0,0,0,0.4) inherits whatever the video shows beneath it. Bright scene → white-on-white icons. The fixes, in order of robustness:
- Solid or near-solid scrim under controls (
rgba(0,0,0,0.85+)). Loses some cinematic flair, gains guaranteed contrast on every frame. - Dual-layer gradient scrim — a bottom gradient from 90% black to transparent gives readability without a hard rectangle.
- Never ship raw icons directly over unfiltered video pixels.
The same logic applies to captions: white text with no background is illegible over snow, sky, or a white shirt. Give captions a background box or a solid text-shadow stroke — and let users configure it.
The Scrubber Thumb Problem
The most-used control in any player is also the smallest. A 10px circular thumb on a thin track is a precision task for users with tremors or low vision — the hit target should be at least 24×24px, which almost always means expanding the hitbox beyond the visual thumb:
.scrubber-thumb::after {
content: "";
position: absolute;
inset: -10px; /* expand hitbox to 30px+ without changing visuals */
}
Reduced-Motion & Flash Safety
prefers-reduced-motion: kill animated preview popups and hover-scrub animations; instant states instead.- Never exceed 3 flashes per second in autoplaying previews — it’s both a WCAG threshold and a genuine seizure risk.
“Every control that ‘looks clean’ because it’s translucent is clean for exactly one kind of viewer. Accessibility isn’t a filter you add — it’s the contrast budget you spend correctly.”
Our full component-level checklist — scrubbers, volume sliders, menus, and the contrast math for each — lives in the low-vision player UI design guidelines.