• Success Criterion 1.4.5
  • Conformance level AA

Text Drawn in a Canvas Element Instead of Real HTML Text

1.4.5 — Images of Text

Scenario

Setting

A recipe site's ingredient list

What’s wrong

Text in <canvas> when HTML text would suffice.

Example

<img src="sale-banner.png" alt="50% off everything">

Why it matters

Low-vision users who need scalable text, and people who customize fonts or colors.

How to test

Try to select text rendered inside a canvas element when the same content could be plain HTML text: canvas text isn't selectable, searchable, or resizable via text settings.

How to fix

Real text must be used instead of an image of text (except logos or where the exact rendering is essential).

<div class="banner"><p>50% off everything</p></div>

Real text can be resized, recolored, and read aloud accurately — an image of text can't.

Outcome

On a recipe site's ingredient list, this barrier is gone for low-vision users who need scalable text — they reach the same outcome without extra effort.

Who is affected

Low-vision users who need scalable text, and people who customize fonts or colors.

Learn more