WCAG 1.4.5 Images of Text

What it asks

Text on a web page can be resized, set in a different font, given more spacing, changed to high contrast, copied, searched and read by a screen reader. A picture of the same words can do none of that. It goes blurry when enlarged and ignores every setting the reader has. This rule says that if the technology can show the words as text, it must.

There are two exceptions. Customizable: the image of text can be changed to suit the reader, for example a tool that re-renders the image in the font, size and colours they choose. Essential: the particular look of the text is part of the information, such as a sample of a typeface or a scan of a historic letter. The W3C adds that logotypes, text that is part of a logo or brand name, are considered essential.

A caption, title or accessible name does not rescue an image of text. It helps a screen reader user, under 1.1.1 Non-text Content, but it does nothing for a person with low vision who needs the words bigger or in different colours. The AAA version, 1.4.9 Images of Text (No Exception), removes the customizable exception and allows only decoration and essential presentation.

With web fonts, CSS and SVG text, almost any look a designer wants can be achieved with real text. The criterion is about choosing to do so.

Its official name is success criterion 1.4.5 Images of Text, at Level AA. It was added in WCAG 2.2, under guideline 1.4 Distinguishable and the principle Perceivable. The W3C’s normative text says, in part:

“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:”

From WCAG 2.2, W3C. Full explanation: Understanding 1.4.5 Images of Text.

Who it helps

People with low vision, who enlarge text, change its colours or switch to a font they can read. An image of text ignores all of that.

People with dyslexia and other reading difficulties, who may use a particular font and wider spacing, and anyone translating a page, searching it, or reading it on a screen where a small image is unreadable.

What passes and what fails

These pass

• A promotional banner whose headline is HTML text laid over a background image.
• A pricing table built from HTML, styled to match the design.
• A company logo containing the company name. Logotypes are essential.
• A chart with labels drawn as SVG text, which can be read and scaled.
• A specimen page showing what a typeface looks like.

These fail

• A hero banner with the headline and strapline baked into the image.
• A screenshot of a table used in place of a real table.
• Pricing tiers rendered as one image per tier.
• A quote set in a fancy font and saved as a PNG, with the words in the alt text.
• A button that is a picture of the word "Submit".
• Navigation items that are images of words.

How to test it by hand

1. Try to select the text on the page with the mouse. Words that will not select on their own are probably an image.
2. Zoom the page to 400 percent. Text that goes blurry or pixelated is an image.
3. In the browser’s developer tools, check images, background images and inline SVG for words that carry information.
4. For each image of text, ask whether it is a logo, whether its exact look is essential, and whether the reader can customise it. Only those three pass.
5. Check that any passing exception still meets contrast under 1.4.3, which applies to images of text too.
6. Note each image of text, where it is and what the words say.

What automated testing can decide

What a machine can decide

A tool can list the images and background images on a page and pick out the ones that appear to contain words, which gives a reviewer a short list to look at instead of every image on the site. Images that are clearly icons or logos can often be set aside by their size, position and accessible name.

What it cannot

Finding the words is the easy half. Whether the words carry information, whether they are a logo, and whether their particular look is essential are questions about meaning and intent. A photograph of a shop front with its name on the sign is not an image of text in the sense the rule means; a banner with the same name as a headline is. A person has to make that call.

How Dreven handles it

Dreven finds the images on your pages that may contain text and shows you each one, with its accessible name and a picture of it. A reviewer decides whether it is an image of text and whether an exception covers it.

A page with no candidate images is recorded as not applicable, with the list of images as the evidence.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 1.1.1 Non-text Content (Level A). Any image, including an image of text, needs a text alternative.
• 1.4.3 Contrast (Minimum) (Level AA). Images of text have to meet the same contrast ratio as text.
• 1.4.4 Resize Text (Level AA). Real text resizes cleanly. Images of text do not.
• 1.4.9 . The AAA version, with only decoration and essential presentation allowed.

Questions people ask

All WCAG 2.2 criteria, in plain words