WCAG 1.4.5 Images of Text

Success criterion 1.4.5 makes sure text can be adapted by the people who read it. Real text can be enlarged without blurring, recoloured with high-contrast settings, spaced out, read aloud and translated. Text baked into a picture cannot. It is level AA and part of EN 301 549 (clause 9.1.4.5).

What the criterion requires

If the technologies you use can achieve the visual presentation, text must be used to convey information rather than images of text.

Exceptions:

• Customizable: the image of text can be visually customized to the user's requirements (font, size, colour, background);
• Essential: a particular presentation of text is essential to the information — for example a font sample or a historical document.

Logotypes (text that is part of a logo or brand name) are considered essential.

With modern web fonts and CSS, almost any typographic look can be made with real text, so the exceptions are narrow.

Typical failures on an online shop

• hero and promo banners with the offer, dates and conditions as part of a JPG;
• category tiles where the category name is in the image;
• size charts, ingredient lists or care instructions uploaded as images;
• "Free shipping over €50" or trust messages as image strips;
• buttons made from images that contain the label.

How to check it

Automated: no automated rule in our checker maps to this criterion. A tool cannot reliably tell whether a picture contains text. This needs a manual check. Our checker does report images without alt text under 1.1.1, which often finds the same banners.

By hand: zoom the page to 200–400 %: text in images becomes blurry. Try selecting the text with the mouse: if you cannot, it is probably an image. Go through home, category and product pages, and through newsletter landing pages, and list every image that contains words. For each, decide whether real text could produce the same look.

How to fix it

• Build banners as an image background with an HTML text layer on top; most shop themes have a "slideshow" or "image with text" section for this.
• Publish size charts and ingredients as HTML tables or lists.
• Use web fonts for special typography instead of images.
• Keep text in images only for logos and truly essential cases, and give them alt text.

Related criteria

• 1.1.1 Non-text Content — alt text for images.
• 1.4.3 Contrast (Minimum) — also applies to images of text.
• 1.4.4 Resize Text — text must be resizable to 200 %.

Frequently asked questions

Are logos with text allowed?

Yes. Logotypes — text that is part of a logo or brand name — are considered essential and are exempt. They still need alt text under 1.1.1.

Is alt text enough for a banner with text?

Alt text meets 1.1.1, but not 1.4.5. If the same look can be achieved with HTML text and CSS, the text should be real text, so users can resize, recolour and translate it.

Are product photos with printed text a problem?

No. WCAG does not count text that is part of a picture with other significant visual content, such as the label on a product photo, as an image of text. Important details should still be in the product description.