• Success Criterion 1.4.3
  • Conformance level AA

Text Baked Into an Image Falling Below Contrast Minimum

1.4.3 — Contrast (Minimum)

Scenario

Setting

A telehealth app's video-visit waiting room

What’s wrong

Images of text below ratio (banners, buttons exported as PNGs).

Example 

<img src="waiting-room-banner.png" alt="Your doctor will join shortly">
<!-- the reassurance text is baked into the image pixels in light gray on pale blue, well under 4.5:1 -->

Why it matters

A patient waiting for a telehealth visit with low vision can't read the banner explaining what to expect next.

How to test

Measure an image-of-text banner or button (e.g., an exported PNG) using a color picker + contrast checker on the pixel colors: it must still meet 4.5:1/3:1.

How to fix

Replace the image with real text, rendering status text as live HTML instead of baking it into a PNG, so contrast (about 8.8:1 here) can be verified and adjusted.

<p style="color:#1e3a5f; background:#eef4fb">Your doctor will join shortly.</p>

Outcome

The patient reads the waiting-room message clearly instead of squinting at a faint graphic.

Who is affected

Low-vision users, since browser text-resize and contrast overrides can't touch text that's part of a flattened image.

Learn more

Related scenarios