FeaturesPricingAudit GuideFree StatementDashboard →

Avoid Images That Contain Text

Learn why images containing text are inaccessible and how to use real text instead. Includes code examples.

6 min read
serious severityWCAG Level AAWCAG 2.1 Success Criterion 1.4.5Auto-detectable

What Is It?

Images of text are images (JPG, PNG, SVG) that contain text content. Examples: logos with text, headers created as images, buttons with text in graphics, screenshots showing text.

Affected users: Screen reader users, low vision users, users who enlarge text, color-blind users, search engines

Why It Matters

Text in images cannot be read by screen readers, enlarged by users, extracted, translated, or indexed well by search engines. Users with low vision who need to magnify can't read image text.

Good news: Automated tools can detect images containing text, but replacing with real text requires design changes and content updates.

How to Detect This Issue

Scan pages for images containing text. Look for images with text content. Check if the same information exists as real text elsewhere. Test with screen reader.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<img src="header-with-text.jpg" alt="Welcome to Our Store">
After (accessible)
<h1>Welcome to Our Store</h1>

Instead of image with text, use real HTML heading. If visual design is critical, use SVG with real text instead of raster image.

React / Next.js

Before
<img src="button.png" alt="Sign Up" onClick={signup} />
After
<button onClick={signup}>Sign Up</button>

Use semantic HTML <button> instead of image. CSS can make it look however you want. Text is real and accessible.

WordPress

Before
Header image with "Special Offer 50% Off" text burned in
After
Background image, real text overlay: <h2 class="offer-text">Special Offer: 50% Off</h2>

WordPress: use background image with CSS, add real text on top. Or use image for visual effect, add text that overlays.

Shopify Liquid

Before
Product badge as image: "New Arrival" burned into small PNG
After
<div class="product-badge">New Arrival</div> <style> .product-badge { ... } </style>

Replace image badges with HTML and CSS. Text can be styled, resized, and is fully accessible.

Common Mistakes

✗

Logos that are images of text instead of SVGs or styled text

✗

Call-to-action buttons created as image files

✗

Infographics with all text in image (should provide data as text too)

✗

Screenshots of code or text used as documentation (should provide actual code)

✗

Quotes or testimonials as images instead of text

Frequently Asked Questions

What about logos with text?
Logos can be images, but use SVG (scalable) instead of raster. Better: SVG with real text content. Worst: PNG with text burned in.
What about infographics?
Infographics can be images, but provide a text description of all data. Better: create infographic as SVG with real text. Provide data in table format too.
Can I use images for design effects?
Yes, images are great for visual design. But put real text over them, not inside them. Background images + text overlay is accessible.
What about screenshots?
Screenshots are fine for showing UI, but provide the actual content as text. Don't use screenshot of table as the only way to access data.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides