1.4.5 Images of Text

Level AA · added in WCAG 2.0

If you can show text with HTML and CSS, don't put it in an image. The exceptions are images of text that people can customize, and cases where the exact look is essential, such as logos.

Who it helps

People with low vision often change font size, spacing, colors or contrast, and images of text blur and don't adapt. People with dyslexia who switch fonts, and anyone using translation or reader mode, also need real text.

How to meet it

Put headings, buttons, quotes and promo copy in HTML, and use web fonts and CSS for the look.
Build banners as an image or gradient background with real text on top.
Use CSS for shadows, outlines, rotation and gradient text instead of baking them into images.
Know the exceptions: logos and brand names, and cases where the presentation is essential, such as a font sample.
Text in a picture with other significant content, such as a chart, screenshot or diagram, isn't an image of text under this criterion.
Images of text still need alt text, but alt text doesn't make an avoidable image of text pass.

Examples

Fails:A promo banner where the headline is part of the image

<a href="/sale">
  <img src="/img/fall-sale-banner.png"
       alt="Fall sale: 30% off all boards. Shop now">
</a>

Fails:A button label drawn as a background image

.btn-signup {
  background: url("/img/sign-up-text.png") no-repeat center;
  width: 120px;
  height: 40px;
}

Passes:The banner rebuilt with real text over a background image

<a class="banner" href="/sale"
   style="background: #0b3d2e url('/img/boards.jpg') center / cover;">
  <span class="banner-title">Fall sale: 30% off all boards</span>
  <span class="banner-cta">Shop now</span>
</a>

Passes:A real text label styled with CSS: #fff on #1a5fb4 is 6.29:1

.btn-signup {
  font: 600 1rem/1 "Inter", sans-serif;
  padding: 0.75rem 1.25rem;
  background: #1a5fb4;
  color: #fff;
}

Can a scanner detect this?

No axe-core rule finds images of text, because a script can't reliably tell whether an image contains words. Look through images, banners and CSS background images for text that could be real HTML.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Exporting headings or promo banners from a design tool as a single image.
Using screenshots of code, tables or quotes instead of real text.
Treating good alt text as the fix; it's required, but it doesn't replace real text.
Assuming a custom font needs an image, when a web font can do the job.

Official W3C explanation of 1.4.5

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026