1.4.5 Images of Text

What does it mean?

Text in images cannot be enlarged cleanly, recoloured, re-spaced or translated, and it often becomes blurry when zoomed. If you can show the same thing with real text and CSS, you must do so.

Exceptions: images of text the user can customise to their needs, and cases where the particular presentation is essential. Logos and brand names count as essential. Text in a photo, such as a sign in a street scene, is also acceptable when the text is not the point of the image.

Who does it help?

• People with low vision who zoom or change fonts
• People with dyslexia who use their own colours or spacing
• People using translation tools

Common failures

• Headings or banners created as images with text inside
• Price lists, opening hours or menus uploaded as JPG
• Buttons made from images of text

How we test it

• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Is text shown as an image where real text would work (logos excepted)?

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<img src="opening-hours.png" alt="Mon–Fri 9–18, Sat 10–14">

<h2>Opening hours</h2>
<dl>
  <dt>Monday to Friday</dt><dd>9:00–18:00</dd>
  <dt>Saturday</dt><dd>10:00–14:00</dd>
</dl>

Real text can be zoomed, restyled and translated, and is easier to update.

Practical tips

• Web fonts and CSS can create almost any typographic effect without images.

Guides and patterns on this

• The right alt text in five questionsGood alt text replaces what an image does on the page, not just what it shows. Five questions lead you to the right answer for every image.
• Contrast that everyone can readPale grey text may look refined, but many people struggle to read it, and on a phone in bright sunlight everybody does. Here are the ratios WCAG 2.2 sets and how to lock them into your design.

Official source

Understanding WCAG 2.2 at the W3C: 1.4.5 Images of Text