WCAG 1.4.5 says that if you can create the look you want with real text and CSS, you must use real text rather than a picture of the words. Logos are allowed, and so are images of text that the user can restyle or where that exact look is essential. It is a level AA rule from WCAG 2.0.
An image of text is any picture whose main job is to show words: a banner saved as a JPG with the sale message in it, a heading exported from a design tool as a PNG, a quote turned into a graphic.
Quick facts
Level
AAAdded in
WCAG 2.0Rule
Use live text when CSS can produce the same lookAllowed
Logos, text that users can customise, and cases where the look is essentialQuick test
Try to select the words with the mouse; if you cannot, look closerAAA version
1.4.9 removes the customisable exception
WCAG 1.4.5 in one paragraph
Web fonts, colors, gradients, shadows and background images can now style text in almost any way a designer wants. Because of that, WCAG expects words on a page to be real text in the HTML. A picture of words is only acceptable when the words are part of a logo or brand name, when the person can change how the image text looks to suit their needs, or when one fixed visual form is truly essential, such as a sample of a historic typeface in a lesson about type.
Why a picture of words causes trouble
- It blurs when enlarged. People who zoom get fuzzy, pixelated letters. Real text stays sharp at any size.
- It cannot be restyled. Users who need a different font, more spacing, a high contrast theme or dark mode cannot change a picture.
- It does not reflow. On a narrow phone screen the image shrinks, and the words become tiny.
- It cannot be translated or searched. Page translation tools and the browser's find feature skip it.
- It depends on alt text. Screen reader users hear only what the alt attribute says, which is often missing or shorter than the image.
People with low vision, dyslexia and color sensitivity feel this most, along with anyone reading on a small screen.
Allowed exceptions: logos, customisable and essential text
Logos. Text that is part of a logo or brand mark can stay as an image. That covers the logo itself, not the slogan or the menu next to it.
Customisable. If the person can change the font, size, color and background of the image text to suit them, it may pass. This is rare on the web.
Essential. The particular look of the words is the information. Examples are a scan of a handwritten letter in a museum archive, a screenshot that shows what an error dialog looks like, or a font specimen.
"Our designer made it in an image editor" and "the brand font would not load" are not exceptions. Web fonts can load almost any typeface.
Spotting images of text
- Try to select the words with the mouse. Real text highlights; an image does not.
- Zoom to 400 percent. Pixelated or blurred edges give images away.
- Inspect the element in the browser developer tools. Look for
img,svgor a CSSbackground-imagewhere you expected text. - Check PDFs and slides linked from the page. A scanned document is one large image of text and needs real, tagged text.
- For each image of text, record whether it is a logo, essential, or something to rebuild.
Automated checkers cannot reliably tell whether an image contains words, so this check is mostly manual. Our page on accessibility testing explains how to fit manual checks into a review.
Typical cases and the text based fix
| Found | Exception? | Fix |
|---|---|---|
| Hero banner with the sale message baked into the photo | No | Put the photo in CSS and write the message as HTML on top |
| Headings exported as PNG to keep a brand font | No | Load the font as a web font |
| Quote cards and testimonial graphics | No | Use a styled blockquote |
| Image buttons such as Buy now | No | Use a real button with CSS styling |
| Company logo in the header | Yes, logo | Keep it, with alt text naming the company |
| Screenshot of an app screen in a help article | Often essential | Keep it, and describe the steps in text too |
Swap a banner image for live text
Fails: the offer is part of the picture.
<img src="spring-sale.jpg" alt="Spring sale, 30 percent off all shoes">Passes: the photo is decoration and the words are text.
<section class="banner">
<h2>Spring sale</h2>
<p>30 percent off all shoes</p>
</section>
.banner { background: #1a1a1a url(shoes.jpg) center / cover; color: #ffffff; }Once the words are text, they need enough contrast against the photo behind them. Test the lightest area of the image with the color contrast checker and add a dark overlay if needed.
Questions people ask
What are images of text in WCAG?
Pictures whose purpose is to show words, such as a banner JPG with a message in it or a heading saved as a PNG. Criterion 1.4.5 asks you to use real text instead whenever CSS can produce the same look.
Is a logo an image of text failure?
No. Logos are an exception, and so is a brand name drawn as part of one. The logo still needs alt text that names the brand.
Does good alt text make an image of text pass?
No. Alt text helps screen reader users, but people who zoom, restyle text or read on a phone still get a picture. Alt text is needed, and real text is still the fix.
Are text heavy infographics allowed?
The safer path is to keep the words as real text, either inside the graphic built with HTML and CSS or in a complete written version placed beside it. A chart image also needs a text alternative under 1.1.1.
Which level is 1.4.5 WCAG?
AA. The stricter 1.4.9 at AAA allows images of text only for decoration or when the look is essential, logos included.