Perceivable Guideline 1.4 Distinguishable

1.4.5 Images of Text

Use real text, not pictures of text

Level AA Needs a person to check

What it asks for, in plain English

If something can be shown as real text, show it as real text rather than as an image of text. Pictures of words cannot be zoomed without blurring, cannot be re-coloured for high contrast, cannot be re-spaced, translated, searched or selected, and every change means a new image.

Logos and brand marks are exempt, and so is text where the exact visual presentation is essential, such as a reproduction of a historic letter. An image of text is also fine if the person can change its appearance to suit them.

Banners, promotional tiles, quotes set in a fancy font, and screenshots used instead of writing the steps out are the usual offenders.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.4.5 page has the full intent, techniques and definitions.

Who it affects

Someone with low vision who uses browser zoom zooms to 300 percent and gets a blurry block instead of crisp letters.

A person who sets their own colours or uses a high contrast mode finds the image keeps its original dark blue on black.

Someone reading in translation gets the whole page in their language except the one image that holds the offer.

Example

Broken

A picture of words. Try to select the text or zoom in; it blurs, cannot be re-coloured and will not translate.

Fixed

Same look, real text. It stays sharp at any zoom, follows the reader's font and colour settings, and can be edited in a second.

Show the markup behind both examples
Broken
<style>body{margin:0;padding:16px;font-family:system-ui}</style>
<img width="380" height="56" alt="Opening hours: Mon to Sat, 9am to 6pm" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='56'%3E%3Crect width='380' height='56' rx='8' fill='%23134e4a'/%3E%3Ctext x='18' y='35' font-family='Georgia' font-size='18' fill='white'%3EOpening hours: Mon to Sat, 9am to 6pm%3C/text%3E%3C/svg%3E">
Fixed
<style>body{margin:0;padding:16px;font-family:system-ui}.hours{display:inline-block;background:#134e4a;color:#fff;font-family:Georgia,serif;font-size:18px;padding:15px 18px;border-radius:8px;margin:0}</style>
<p class="hours">Opening hours: Mon to Sat, 9am to 6pm</p>

How to check it

  1. Try to select the text in banners, headings, buttons and promotional tiles with the mouse. If you cannot, it is probably an image.
  2. Zoom the page to 300 percent. Images of text go soft; real text stays sharp.
  3. Open the browser inspector on any suspect element and look for an <img>, an SVG or a background-image.
  4. For each one found, ask whether a logo exception applies or whether it could be CSS-styled text.

What Websight checks for 1.4.5

Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.

Only a person can check this. A scanner can see that an image exists, but not that there are words in it.

Practical tips

  • Web fonts and CSS can reproduce almost any banner. Ask the designer for the font and colours, not a PNG.
  • If an image of text is unavoidable, the alt text must contain the same words, and the contrast rules still apply to it.
  • Screenshots in help articles are fine as illustration, but write the steps out in text as well.

Scan your page and see where 1.4.5 stands

Websight gives a score out of 100, explains each automated finding in plain English, and lists the checks a person still needs to do.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.