1.4.5 Images of Text

1. What is the goal of this criterion?

A sleek logo with flowing lettering, a stylish heading in the corporate typeface or a quote in elaborate calligraphy – images of text are everywhere. But what happens when someone needs to enlarge the text, change the colors or use a different font? With images of text, they can’t.

So the goal of Success Criterion 1.4.5 is clear: use real text instead of images of text whenever the desired presentation can be achieved technically. Only real text can be adapted – and that’s exactly what many people need to be able to read content at all.

2. What exactly does it require?

Put simply, text should be presented as actual text, not as an image. That means:

Use HTML text styled with CSS instead of graphics with built-in lettering whenever the desired presentation can be achieved with the technologies you’re using.

There are only two exceptions:

• Customizable: the image of text can be visually adapted to users’ needs (for example font size, colors or font through settings on the website)
• Essential: a particular presentation of the text is essential to the information being conveyed

Examples of “essential” include logos with lettering (the standard says so explicitly), font specimens showing off a typeface, or historical documents where the original appearance matters.

One important point: text that is part of a picture containing significant other visual content – such as a street sign in a photo or labels in a screenshot – doesn’t count as an image of text under this criterion. Adding an image of text next to real text, on the other hand, is no shortcut: if the content can be presented as real text, it should be.

3. Why does it matter for accessibility?

Imagine you have low vision and need to enlarge text to 200% to read it. Or you need specific colors for text and background. With an image of text? The text gets pixelated, and the colors stay as they are.

Real text instead of images of text makes content accessible because it:

• Lets people with low vision adjust font size, contrast and colors to their needs
• Helps people with dyslexia choose readable fonts and spacing
• Makes things easier for screen reader users – images of text always need an appropriate text alternative
• Supports people with cognitive disabilities through adaptable presentation
• Helps everyone in different situations – from sun glare on a phone screen to tired eyes in the evening

And real text is universal. It works with every assistive technology and can be reshaped into whatever form someone needs.

4. How to meet the criterion

The good news: with modern web technologies, almost any typographic design can be achieved with real text. Here are some proven tips:

Use CSS instead of graphics:

• Use web fonts for special typefaces instead of embedding them as images
• Use CSS for shadows, gradients, outlines and other effects
• Use SVG with a real <text> element for more elaborate lettering

If you really need images of text:

• Check whether an exception actually applies (logo, essential presentation)
• Give the image a text alternative containing the same text (see Non-text Content)
• Use high-resolution images that stay legible when enlarged
• Ensure sufficient contrast within the image of text (see Contrast (Minimum))

Technical implementation:

• Use @font-face for custom fonts
• Use CSS Grid and Flexbox for complex text layouts
• Use CSS animations instead of animated text GIFs
• Use SVG for scalable text graphics

When images of text are fine:

• Logos and trademarks (with a text alternative)
• Screenshots where the text is part of a larger illustration (with a description)
• Historical documents (with a transcript)
• Artworks where the presentation itself is the message

5. Why this criterion matters for businesses

Accessible text presentation isn’t just the right thing to do – it brings tangible benefits for your business.

1. Reach a wider audience Real text instead of images of text makes your content usable for more people – including people with low vision, dyslexia or temporary impairments. You don’t exclude anyone and you reach more potential customers.

2. Improve findability Real text can be reliably searched, copied and translated – by people, by the browser’s find function and by search engines. Accessibility isn’t a direct ranking factor, but content in real text is easier for search engines to interpret than lettering inside images.

3. Reduce maintenance and costs Changing text in HTML and CSS takes seconds – creating and embedding new graphics takes much longer. Real text is cheaper to translate, update and maintain.

Last but not least: legal requirements. The European Accessibility Act (Directive (EU) 2019/882) has applied since 28 June 2025 to many consumer products and services, such as online shops; in Germany it is implemented by the Barrierefreiheitsstärkungsgesetz (BFSG). The technical benchmark is the harmonised standard EN 301 549, which references WCAG 2.1 Level AA for web content – and 1.4.5 is part of that. Public sector bodies are covered by the Web Accessibility Directive (EU) 2016/2102. This section is general information, not legal advice.

6. The success criterion in the W3C’s words

Success Criterion 1.4.5 Images of Text (Level AA)

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:

• Customizable: The image of text can be visually customized to the user's requirements;
• Essential: A particular presentation of text is essential to the information being conveyed.

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

In short: if the desired presentation can be achieved with real text, use real text – images of text are only allowed if they can be customized or the presentation is essential, as with logos.