WCAG 1.4.5: Images of Text
A picture of a paragraph looks identical to a paragraph — until a user tries to enlarge it, recolor it, translate it, or listen to it. This criterion draws a clear line: if the technology can render it as real text, it must be real text. Images of text are allowed only when the user can customize them or when that exact visual presentation is essential — which includes logos.
The success criterion, in full
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.
The criterion carries a normative note: logotypes (text that is part of a logo or brand name) are considered essential. And the opening condition matters — on the modern web, with web fonts, CSS transforms, gradients, and shadows, the technology can achieve almost any visual presentation, so the exceptions are narrow.
Who this helps
Real text is infinitely adaptable; a bitmap is frozen. The people who depend on that adaptability include:
People with low vision
They enlarge text, and real text stays crisp at any size. An image of text turns into a blur of pixels at 200% zoom — precisely when the user needs it most.
People who need specific colors or contrast
High-contrast modes, dark themes, and user stylesheets can recolor real text on the fly. Text inside an image keeps whatever colors the designer exported, however unreadable.
People with dyslexia and reading disabilities
Many readers swap in a preferred font, widen letter spacing, or increase line height to keep their place. None of those adjustments can reach text trapped in an image.
Screen reader and translation users
Real text is directly readable, searchable, translatable, and copyable. An image of text depends entirely on someone remembering to write complete alt text — and even perfect alt text cannot be translated word for word or selected.
The requirement and its exceptions
An image of text is text rendered in a non-text format — a PNG, JPEG, SVG raster, or canvas drawing — to achieve a particular look. The default rule is simple: when your technology stack can produce the desired presentation with real text (and HTML plus CSS almost always can), you must use real text. Only two exceptions exist:
- Customizable. The image of text can be visually customized to the user’s requirements — font, size, color, and background adjust to the user’s settings. Genuinely rare in practice; a static export never qualifies.
- Essential. A particular presentation of the text is essential to the information being conveyed. This covers logotypes (explicitly, per the criterion’s note), plus cases like screenshots of interfaces, specimens of a typeface, and scanned historical documents where the rendering itself is the point.
Two boundaries worth knowing. First, this criterion is about text used to convey information — purely decorative text (say, faint words in a background texture) is instead handled by 1.1.1 as decoration. Second, even when an image of text is legitimately essential, it still needs a text alternative under 1.1.1 Non-text Content and sufficient contrast under 1.4.3, which applies to images of text too.
Pass and fail examples
- Pass — Styled heading with a web font. A marketing hero uses a brand typeface loaded with @font-face, a gradient background, and a text-shadow — all applied to a real <h1>. The distinctive look is achieved without a single pixel of rasterized text.
- Pass — Company logo as an image. The site header shows the company's wordmark as an SVG image with alt text. Logotypes are explicitly considered essential, so this passes 1.4.5.
- Pass — Screenshot in documentation. A help article includes a screenshot of a settings dialog to show users exactly what they will see. The particular presentation is essential to the instruction, and the surrounding steps repeat the important text as real text.
- Fail — Promotional banner with baked-in text. The homepage hero is a JPEG containing the headline 'Summer sale — 50% off everything' in a stylized font. The same look was achievable with web fonts and CSS, so an image of text is not permitted.
- Fail — Opening hours as a picture. A restaurant uploads its menu and opening hours as photos of a designed flyer. Users cannot enlarge, search, translate, or copy the text, and the styling could have been recreated with real text.
Code examples
Replace the text-in-a-banner image with styled real text
The classic failure is a designed headline exported as an image. The same visual can nearly always be built with markup and CSS.
<!-- ✗ Failing: the headline is pixels, not text -->
<img src="/img/summer-sale-hero.jpg"
alt="Summer sale — 50% off everything. Ends Sunday." />
<!-- ✓ Passing: real text, styled to match the design -->
<section class="hero">
<h1 class="hero-title">Summer sale — 50% off everything</h1>
<p class="hero-sub">Ends Sunday</p>
</section>Web fonts and CSS reproduce the “designed” look
Teams usually reach for images because they want a brand typeface and decorative effects. @font-face plus modern CSS delivers both while the text stays selectable, scalable, and restylable.
@font-face {
font-family: "Brand Display";
src: url("/fonts/brand-display.woff2") format("woff2");
font-display: swap;
}
.hero-title {
font-family: "Brand Display", Georgia, serif;
font-size: clamp(2rem, 1rem + 4vw, 4rem);
background: linear-gradient(90deg, #7c3aed, #2563eb);
background-clip: text;
-webkit-background-clip: text;
color: transparent; /* gradient-filled text, still real text */
text-shadow: none;
}The logotype exception — and its limits
A logo may be an image, but do not smuggle content into it. Keep the wordmark as the image and everything around it as text.
<!-- ✓ Passing: logotype is essential; tagline is real text -->
<a href="/" class="brand">
<img src="/img/acme-logo.svg" alt="Acme Corporation" />
</a>
<p class="tagline">Accessible tools for every team</p>
<!-- ✗ Failing: tagline and phone number baked into the logo image -->
<img src="/img/acme-logo-with-tagline-and-phone.png"
alt="Acme Corporation — Accessible tools for every team — Call 555-0100" />Common failures
- Hero banners, promos, and CTAs exported from design tools with the headline text baked into the image.
- Menus, price lists, and opening hours uploaded as photos or PDFs-rendered-as-images of a printed flyer.
- Quotes, testimonials, or social media posts embedded as screenshots when the text could simply be quoted in HTML.
- Email-campaign images reused on the web page, carrying entire paragraphs of pixel text.
- Stylized section headings rendered as images because the brand font 'wasn't available' — @font-face has made this unnecessary for well over a decade.
- Buttons built as images with the label inside the bitmap, instead of a real <button> with styled text.
- Extending the logo exception too far: navigation, taglines, or addresses baked into the 'logo' image.
- Relying on alt text as the fix — alt text helps screen reader users but does nothing for the low-vision user staring at pixelated text.
How to test for 1.4.5
- 1
Try to select the text with your cursor
The fastest manual check: drag-select across every piece of visible text. Real text highlights; an image of text selects as a single block or not at all. Do this on heroes, banners, badges, and buttons — the usual hiding places.
- 2
Zoom to 200–400% and look for pixelation
Enlarge the page. Real text stays razor sharp; images of text go soft and blocky. Anything that blurs is a candidate failure — then ask whether it is a logotype or genuinely essential.
- 3
Audit the page's images
In DevTools or a crawler, list every <img>, background-image, and <canvas>. For each one containing readable words, apply the test: could this presentation be achieved with real text and CSS? If yes, it fails unless customizable or essential.
- 4
Check each exception claim
For every image of text that remains, name its exception explicitly: logotype, screenshot where the exact rendering matters, font specimen, scanned document. 'The designer preferred it' and 'we didn't have the font' are not exceptions.
- 5
Verify the fallbacks on legitimate images of text
Where an image of text passes (a logo, a screenshot), confirm it still has an accurate text alternative (1.1.1) and, if the pictured text is informative, sufficient contrast (1.4.3 applies to images of text as well).
Automated scanners cannot reliably tell an image of text from a photo, so this is a manual review. Fold it into your image audit alongside alt-text checks, and work through the full WCAG 2.2 checklist.
Frequently asked questions
What does WCAG 1.4.5 Images of Text require?
It requires that if the technologies you are using can achieve the visual presentation, you use real text to convey information rather than images of text. There are two exceptions in the normative text: Customizable (the image of text can be visually customized to the user's requirements) and Essential (a particular presentation of text is essential to the information being conveyed). A note in the criterion adds that logotypes — text that is part of a logo or brand name — are considered essential. It is a Level AA criterion in WCAG 2.0, 2.1, and 2.2.
Why are images of text an accessibility problem?
Because the user loses all control over the text. Real text can be enlarged without pixelating, re-colored for contrast, restyled with a preferred font, given wider letter and line spacing, reflowed at high zoom, read by screen readers, translated, and selected or copied. Text baked into a bitmap can do none of that: it blurs when enlarged, ignores high-contrast modes and user stylesheets, and is invisible to translation tools. Alt text mitigates the screen reader problem but does nothing for a low-vision user looking at the pixelated image itself.
Is a logo an automatic pass under 1.4.5?
Yes. The criterion explicitly notes that logotypes — text that is part of a logo or brand name — are considered essential, so an image logo passes 1.4.5. Be careful about scope, though: the exception covers the logo itself, not adjacent content. A tagline, address, or navigation baked into the same image as the logo is not part of the logotype and still needs to be real text. And the logo image still needs an appropriate text alternative under 1.1.1.
What does the 'customizable' exception actually mean?
It means the image of text can be visually customized to the user's requirements — the user can adjust things like font family, size, color, and background to suit their needs, and the image re-renders accordingly. In practice this describes systems that generate the 'image' from text on demand with user-controlled settings. It is rarely met by ordinary websites; a static PNG export from a design tool is never customizable. If you find yourself reaching for this exception, the honest answer is almost always to use real text instead.
Do screenshots, charts, and diagrams fail 1.4.5?
Generally no. A screenshot whose point is to show exactly how a particular interface looks is a case where the specific presentation is essential — you cannot demonstrate a UI without picturing it. Charts, graphs, and diagrams are treated primarily as non-text content: their labels are part of a larger visual, and they are covered by 1.1.1's requirement for text alternatives. What fails 1.4.5 is using an image where the text itself is the content — a paragraph, a promotion, a menu, a quote — and the pictured styling could have been achieved with CSS and web fonts.
How does 1.4.5 relate to 1.4.9 Images of Text (No Exception)?
1.4.9 is the Level AAA version of the same idea. At AA, 1.4.5 lets you use images of text when the presentation is essential or customizable (with logotypes explicitly essential). At AAA, 1.4.9 removes the general 'essential presentation' latitude: images of text may be used only for pure decoration or where the particular presentation of text is essential to the information conveyed — which the criterion again notes includes logotypes. For most teams, conforming to 1.4.5 by simply not shipping text as images gets you nearly all the way to 1.4.9 too.
Related Success Criteria
Color is not used as the only visual means of conveying information.
Audio that plays automatically can be paused, stopped, or controlled.
Text has a contrast ratio of at least 4.5:1 (3:1 for large text).
Text can be resized up to 200% without loss of content or functionality.
Text has a contrast ratio of at least 7:1 (4.5:1 for large text).