Images of text (WCAG 1.4.5): when text must be real text

An image of text is a picture of words: a headline exported as a PNG, a promo banner built in a design tool, a scanned page. The letters are pixels, so a visitor who needs larger type, different colors, wider line spacing or another font cannot change them. W3C's Understanding page for 1.4.5 names that barrier, and real text, styled with CSS, removes it.

This guide covers what counts as an image of text, the exceptions, how to replace one, and the alt text one needs if it stays. It sits beside our complete alt text guide, and our criteria reference lists 1.4.5 among the other WCAG 2.2 criteria.

What counts as an image of text

The WCAG glossary defines an image of text as text that has been rendered in a non-text form, such as an image, to achieve a particular visual effect. A note leaves out text that is part of a picture with significant other visual content, such as graphs, screenshots and diagrams. Those pictures still need a text alternative under 1.1.1 Non-text Content; they are only outside 1.4.5. See our guides to alt text for charts and alt text for screenshots.

The rows draw on W3C's Understanding page and its ACT rule "HTML images contain no text". Whether a picture has "significant other visual content" is a judgment call. Our rule of thumb: when the words are the message and the photo is only a backdrop, treat the words as an image of text.

Why real text matters

W3C's technique C22 lists what text inside an image cannot do: scale with browser settings, appear in the colors set by browser settings or a user's style sheet, or honor operating system settings such as high contrast. W3C's images of text tutorial adds that images are more likely to distort and pixelate when resized. The Understanding page names who gains from real text: people with low vision, people with visual tracking difficulties and people with cognitive disabilities that affect reading, all of whom can restyle text to suit themselves.

1.4.4 Resize Text excepts images of text from its 200 percent requirement, so an image of text can pass 1.4.4 and still fail 1.4.5. Our guide to zoom and reflow covers the resize criteria.

The rule in three questions

The success criterion says: if the technologies being used can achieve the visual presentation, use text rather than images of text. Three questions decide a case.

1. Can your technology produce this look with real text? If so, use real text. W3C's tutorial says that with current CSS in most browsers, styled real text is the good design practice.
2. Can the user customize the image of text? One W3C example is a site where users set font preferences and every image of text is generated from them. Technique C30 offers a text version and an image version with a switch, and says to make the text version the default where possible.
3. Is a particular presentation essential? The criterion states that logotypes, meaning text that is part of a logo or brand name, count as essential. W3C also gives a type sample, where swapping the font would defeat the point, and an original letter whose look carries information about its period.

There is a fourth route. Where an image of text is used in addition to real text and both are presented, the criterion is met. W3C's example is an event poster uploaded to a content management system that cannot rebuild it in HTML, CSS or SVG: the author posts the poster and types its words next to it. That route does not carry over to 1.4.9 Images of Text (No Exception), the Level AAA version, which applies to every image of text and allows only pure decoration or essential presentation.

The Understanding page lists a font that is not widely deployed, or one the author has no right to redistribute, among the reasons for using an image of text. A web font handles the first case, because CSS downloads the font file with the page (see MDN's web fonts guide). For the second, check the font's license first: MDN notes that fonts generally come with license conditions.

Is 1.4.5 a legal requirement?

Yes, wherever a law or standard requires WCAG at Level AA. 1.4.5 is a Level AA criterion, and W3C's ACT rule maps it as required for conformance to WCAG 2.0 and later at AA. Rules that cite WCAG at that level include it: the ADA Title II web rule for state and local governments (WCAG 2.1 AA), Section 508 for federal agencies (WCAG 2.0 A and AA) and EN 301 549 v3.2.1 (based on WCAG 2.1 Level AA), which the European Commission's AccessibleEU center gives as the current reference for the European Accessibility Act and the Web Accessibility Directive. See US accessibility law, Section 508, EN 301 549 and WCAG conformance levels. This is not legal advice; whether a law applies depends on facts about your organization, and our tool for finding which accessibility laws apply to you is a place to start.

How to replace an image of text with real text

1. Type the words into the right element. A headline goes in a heading element, an offer in a paragraph, a call to action in a link or button. Real text in a heading element also keeps your heading structure intact, which a bare image does not.
2. Style it with CSS. W3C's tutorial recreates a decorative slogan with an embedded web font, a color, tightened letter spacing, a background color, a box shadow and a small rotation. Technique C22 adds that you should choose fonts likely to be on the user's system and define fallbacks.
3. Size text in relative units. W3C lists percent, named sizes and em units (C12, C13, C14) as advisory techniques.
4. Check contrast on the real text. If the words sit on a photo or gradient, measure the worst spot behind them (see below).

A banner before and after, with an example class name:

<!-- Before: the words are pixels -->
<img src="returns-banner.png" alt="Free returns on all orders">

<!-- After: the words are text -->
<p class="promo">Free returns on all orders</p>

And the matching CSS:

.promo {
  font-family: "Brand Sans", Arial, sans-serif;
  font-size: 1.5em;
  color: #ffffff;
  background-color: #1f3a5f;
}

If CSS cannot give you the look, try SVG that keeps the words as text elements inside the page; W3C's event poster example names HTML, CSS and SVG as ways to rebuild a poster as text. An SVG loaded through an img element counts as an image, and so does one with its letters converted to outlines, because WCAG defines text as characters that can be programmatically determined. See SVG accessibility.

Alt text for an image of text you keep

W3C's tutorial puts the rule in one sentence: "the text alternative must contain the same text presented in the image." Describe the words, not the styling: in W3C's slogan example the alt text is the slogan, and the shadow and lettering are left out as not relevant.

Three mistakes to avoid: a shortened version, such as "Sale" for a banner that says more; a label such as "banner" or "image of text"; and paragraphs of alt text, a sign the words should be real text. See how long alt text should be and our alt text examples.

W3C says images of math expressions belong only in exceptional circumstances, and substantial math content should use MathML. On social graphics and newsletter headers, type the words into the post or email where you can, and repeat them in the alt text where you cannot. See alt text on social media and accessible email newsletters.

Contrast for images of text

An image of text does not escape the contrast rules. 1.4.3 Contrast (Minimum) applies to text and images of text, asking for at least 4.5:1, or 3:1 for large-scale text (WCAG 2.2 text). Logos and brand names have no contrast requirement, and neither do pure decoration and incidental text in a picture with significant other visual content.

The hard case is a banner where letters sit over a photo, because the background has no single color. Our image contrast checker measures contrast at the worst spot behind the text, and text over images and contrast explains the result. It measures contrast only, so it cannot say whether the text should be an image. See also our color contrast guide.

Scanned documents and PDFs

A scanned PDF is an image of text at document length. W3C's technique PDF7 says it is inherently inaccessible: assistive technology cannot read or extract the words, and people cannot select, resize or reflow the text or change its colors. The fix is to create the PDF from the source file. When the source is gone, PDF7 describes OCR (optical character recognition), which turns pictured letters into real text, and then correcting the words the software marks as uncertain. OCR output still needs tags, a document language and a proofread; our accessible PDF guide covers the full job, and the PDF checker below flags a PDF with no extractable text.

How to find images of text on your site

1. Try to select the words. Drag across a headline, banner or button label, then search the page (Ctrl+F, or Cmd+F on a Mac) for one of its words. If you cannot select or find it, it is probably a picture.
2. Review the usual places. Hero banners, promo tiles, section headings, buttons, menu items and badges are where words get exported as images. Tell editors who upload banners to type the words into a text field instead.
3. Read the alt text. Alt text that reads like a headline or slogan can be a sign of an image of text. The accessibility bookmarklet checks alt text on the page as your browser renders it, including pages behind a login.
4. Zoom in. Text in a bitmap image turns blurry or blocky when you enlarge it, while real text stays sharp.

Our WCAG 2.2 checklist lists 1.4.5 as a manual check.

Spotting words in a picture means opening the picture, which a scanner that reads only HTML cannot do. GotAlt's free scan reads the HTML a server sends (see what we check), so it can flag an image with no alt attribute but cannot see the words inside one. The alt text checker below does open the image, though our accuracy write-up notes that the images used to measure it did not include images of text, so read a verdict on one as a prompt to look, not a ruling.

Check it yourself

• Image contrast checker: draw a box around text in an image you cannot replace and see the contrast at its worst spot.
• Alt text checker: judges whether alt text is true of the picture, for up to six described images on a page. For an image of text, confirm it carries every word.
• Alt text generator: writes alt text for an image you upload. Compare the draft with the words on the image.
• PDF accessibility checker: flags a PDF with no extractable text as probably scanned.

To see what the rule-based checks find across your pages, Scan my site for free.