• Success Criterion 1.4.3
  • Conformance level AA

Custom Video Player Captions With Too-Low Contrast

1.4.3 — Contrast (Minimum)

Scenario

Setting

A project-management tool's task board

What’s wrong

Caption/subtitle text rendered by custom players below ratio.

Example 

.caption-text { color: #cbd5e1; background: transparent; }
<!-- custom video player renders captions with no backing, dropping to roughly 2:1 over light footage -->

Why it matters

A new hire watching an onboarding tutorial with the sound off relies on captions that vanish during bright scenes.

How to test

Play a video with custom captions/subtitles rendered by the player: measure the caption text against the video frame behind it.

How to fix

Give custom player captions a solid dark background band so contrast (roughly 16:1 here) never depends on the video frame underneath.

.caption-text { color: #ffffff; background: rgba(0,0,0,0.8); padding: 2px 8px; }

Outcome

The new hire reads every caption line of the tutorial and finishes onboarding without missing a step.

Who is affected

Deaf and hard-of-hearing users, plus low-vision users, both of whom depend on captions being consistently legible.

Learn more

Related scenarios