• Success Criterion 1.2.4
  • Conformance level AA

Live Captions Unreadable Due to Overlap or Low Contrast

1.2.4 — Captions (Live)

Scenario

Setting

A survey tool's question builder

What’s wrong

Live captions visually unreadable: overlapping slides, low contrast, too fast to render.

Example 

<div class="question-builder-live-training">
  <h3>Live Training: Using Answer Piping in Survey Questions</h3>
  <video src="live://webinar-feed" autoplay controls>
    <track kind="captions" src="live://webinar-captions" srclang="en" label="Live captions">
  </video>
</div>
<!-- Captions render as thin gray text over a white slide showing the
     piping-setup diagram, replaced every 1.5 seconds regardless of
     line length -->

Why it matters

A deaf survey designer attending this in-app live training on answer piping can't read the fast-scrolling gray-on-white captions over the piping-setup diagram, and loses whole sentences before finishing the previous one.

How to test

Check caption legibility during the live event: overlapping slide content, low contrast, or text scrolling too fast to read all fail.

How to fix

Live captions need their own high-contrast background and a display duration a viewer can actually finish reading.

<div class="question-builder-live-training">
  <h3>Live Training: Using Answer Piping in Survey Questions</h3>
  <video src="live://webinar-feed" autoplay controls>
    <track kind="captions" src="live://webinar-captions" srclang="en" label="Live captions">
  </video>
</div>
<!-- Captions now render in a dedicated dark caption bar below the
     slide, bold white text, staying on screen at least 3-4 seconds
     per line -->

Outcome

A deaf survey designer reads each line comfortably in the dedicated caption bar and finishes setting up working answer piping by the end of the session.

Who is affected

Deaf and hard-of-hearing survey designers attending live in-app training, along with low-vision viewers, can't read captions that lack contrast and disappear faster than an average reading pace.

Learn more

Related scenarios