The 2025 TestParty Guide to WCAG 1.4.5 – Images of Text (Level AA)

Why did the designer put text in an image? Because they wanted their accessibility score to be picture-perfect… but ended up with a thousand words of problems instead.

WCAG 1.4.5 requires that you use actual text—not images of text—whenever technology allows it. This Level AA criterion ensures people can resize, recolor, and access text content regardless of their visual needs or assistive technology.

Table of Contents

• What WCAG 1.4.5 Requires
• Why This Matters
• Quick Implementation Guide
• Common Mistakes to Avoid
• How to Test for WCAG 1.4.5
• How TestParty Helps
• FAQs

What WCAG 1.4.5 Requires

Use real HTML text styled with CSS instead of embedding text in images (JPG, PNG, SVG with rasterized text). Modern web technologies can achieve virtually any visual presentation without sacrificing accessibility.

Key exceptions:

• Customizable images of text: If users can adjust the visual presentation to their needs (rare in practice)
• Essential presentation: When a specific visual presentation is essential to the information—think certificates, historical document scans, or screenshots demonstrating UI
• Logotypes: Company logos and brand names are always exempt

What's covered:

• Headings, body text, navigation labels, buttons
• Decorative typography (fancy fonts rendered as images)
• Text overlays on photos that could be implemented with CSS
• Infographics where the text could be separated from imagery

What's exempt:

• Logos and trademarks
• Screenshots showing software interfaces
• Artistic works where the text is part of the art itself
• Historical documents presented as archival images

Why This Matters

When text is trapped in an image, screen readers can't parse it, browser zoom doesn't scale it properly, and users can't adjust colors for readability. Someone with low vision who needs 200% zoom or custom high-contrast colors is locked out.

Legal and compliance context:

WCAG 1.4.5 is required for Level AA conformance, which means it's mandatory under the ADA (per DOJ guidance), Section 508 (federal procurement), EN 301 549 (EU public sector), and the European Accessibility Act. Lawsuits frequently cite images of text in hero banners, navigation menus, and calls-to-action as accessibility barriers.

Business benefits:

Real text is SEO-friendly (search engines can't read text in images), loads faster, scales to any screen resolution, and costs less to translate or update. You're trading Photoshop round-trips for a single CSS change.

Quick Implementation Guide

Use semantic HTML and CSS for all text presentation:

• Headings: <h1>, <h2>, etc. styled with font-family, font-weight, color
• Body text: <p>, <span>, <div> with CSS typography
• Buttons and CTAs: <button> or <a> with CSS styling, not image buttons
• Decorative fonts: Web fonts (Google Fonts, Adobe Fonts) or @font-face

Good implementation example:

<!-- ✅ Compliant: Real text with CSS styling -->
<h1 class="hero-title">Welcome to Our Store</h1>

<style>
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  color: #1a1a1a;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  letter-spacing: -0.02em;
}
</style>

<!-- ❌ Non-compliant: Text embedded in image -->
<img src="welcome-hero-text.png" alt="Welcome to Our Store">

Key techniques:

• C22: Use CSS for all visual text presentation
• G140: Separate content (HTML) from presentation (CSS)
• C12/C13: Use relative font sizes (em, rem, %) so text scales with user preferences

When you must use an image:

If the presentation is truly essential (a certificate, a historical poster), provide equivalent text in the page or via a text alternative that conveys the same information.

Common Mistakes to Avoid

Image-based navigation menus: Using PNG sprites or image buttons for main navigation. Use <nav> with styled <a> tags instead.

Hero banner text in graphics: Designers often composite headline text into hero images in Photoshop. Extract the text to an HTML overlay with CSS positioning.

Fancy font workarounds: Embedding text as images because "the client wants this exact font." Use web fonts—thousands are available, and @font-face supports custom uploads.

Text in infographics: Infographics often bake all text into the image. Separate text layers into HTML with CSS positioning, or provide a full-text alternative below the graphic.

How to Test for WCAG 1.4.5

Automated checks:

• Scan for <img> tags and flag those with alt text that looks like substantial content (more than a few words)
• Detect common patterns: "banner.png", "heading.jpg", "cta-button.png"
• Check for CSS background-image with text-like filenames

Manual review (required):

1. Visual inspection: Right-click text on the page. If you can't select it with your cursor, it's likely an image.
2. Disable images: Turn off images in your browser. Does critical text disappear? That's a failure.
3. Zoom test: Use browser zoom (Ctrl/Cmd +). Does text scale cleanly, or does it pixelate? Pixelation = image.
4. Context check: Is the image of text essential (logo, certificate) or could it be real text? If the latter, it fails.

What automated tools catch:

Tools like axe, WAVE, and Lighthouse can flag suspicious images but can't definitively determine if an image of text is "essential." Human judgment is required.

What needs human review:

• Whether the visual presentation is truly essential
• Whether logos contain non-brand text that should be separate
• Whether decorative typography could be achieved with web fonts

How TestParty Helps

TestParty combines automated detection with AI-powered analysis to identify images of text violations and guide your team toward compliant implementations.

What TestParty detects:

TestParty's DOM and source code scanner identifies images likely to contain text by analyzing:

• <img> tags with alt attributes containing substantial text (more than 5-7 words)
• CSS background-image properties on elements that also contain text content or ARIA labels
• Common filename patterns (heading.png, title.jpg, button-text.png)
• Image dimensions and aspect ratios typical of text banners or buttons
• OCR analysis on flagged images to confirm text presence and compare against alt text

When TestParty detects a potential violation, it flags the element with a severity rating and context about why it's problematic.

How TestParty suggests fixes:

For each flagged image of text, TestParty provides:

• Extracted text content: AI-powered OCR pulls the text from the image so developers know exactly what to convert
• CSS implementation suggestions: Recommended web fonts, font sizes, weights, and CSS properties to replicate the visual design
• Code diffs: For common patterns (hero banners, CTA buttons), TestParty generates before/after code snippets showing how to replace the image with semantic HTML and CSS
• Exception guidance: If the image might qualify as essential (e.g., a logo with tagline, a certificate), TestParty notes this and suggests how to document the exception

All AI-generated fixes are reviewed by developers or TestParty accessibility specialists before merging. The platform doesn't auto-commit changes—it surfaces issues and proposes solutions that humans validate.

Developer workflow integration:

TestParty integrates into your CI/CD pipeline and pull request workflow:

• Pre-commit hooks: Warn developers when they add new images with text-heavy alt attributes
• PR annotations: Line-level comments on image tags flagged as potential violations, with suggested HTML/CSS alternatives
• CI/CD gates: Block merges if critical images of text are introduced (configurable severity thresholds)
• IDE plugins: Real-time feedback in VS Code, WebStorm, or other editors when editing templates or components

This "shift-left" approach catches violations before they reach production. If a designer uploads a new hero banner with embedded text, the developer sees the issue immediately and can request a layered PSD or use CSS overlay techniques.

Ongoing monitoring:

TestParty continuously scans your site (daily, weekly, or on-demand) and tracks images of text over time:

• Regression detection: Alerts when new images of text appear after a deploy or content update
• Trend dashboards: Visualize reduction in violations as your team remediates issues
• Audit reports: Generate compliance documentation showing how images of text have been addressed, with before/after screenshots and code diffs

For ecommerce platforms (Shopify, WordPress, headless storefronts), TestParty works at the theme and template level. Fix an image-based button in a product card component once, and the improvement cascades across thousands of product pages.

Embedded guidance:

Each flagged violation includes:

• Plain-language explanation of why images of text fail WCAG 1.4.5
• Links to relevant WCAG techniques (C22, G140)
• Examples of compliant alternatives
• Notes on when exceptions apply (logos, essential presentation)

This helps developers understand the "why" behind the rule, building long-term accessibility knowledge across your team.

FAQs About WCAG 1.4.5

What is WCAG 1.4.5 in plain language?

Use real text styled with CSS instead of putting text in images. This lets people resize, recolor, and access text with assistive technology. Logos and truly essential visual presentations are exempt.

Is WCAG 1.4.5 required for ADA compliance?

Yes. WCAG 1.4.5 is part of Level AA conformance, which the DOJ references as the standard for ADA Title III compliance. Federal agencies must meet it under Section 508, and EU entities must comply under EN 301 549 and the European Accessibility Act.

Are logos considered images of text?

Logotypes (text that's part of a logo or brand name) are explicitly exempt from WCAG 1.4.5. However, if your logo includes a tagline or descriptive text that's not part of the brand identity, that text should ideally be real HTML.

Can I use images of text if I provide alt text?

No. Alt text makes the image accessible to screen readers, but it doesn't solve the problem for sighted users who need to zoom, change colors, or select text. You need real HTML text styled with CSS.

What about SVG text—does that count as real text?

It depends. If the SVG uses <text> elements (actual vector text), that's generally acceptable because it scales and can be selected. If the SVG contains rasterized text (converted to paths or embedded as a bitmap), it's treated as an image of text and fails 1.4.5.

How do I handle decorative fonts that aren't available as web fonts?

Use @font-face to upload custom fonts, or work with your designer to choose a similar web-available font. Services like Google Fonts, Adobe Fonts, and Font Squirrel offer thousands of options. If the exact font is truly essential to brand identity, document it as an exception—but this is rare.

What if my CMS or page builder makes it hard to avoid images of text?

Many page builders (Elementor, Divi, Wix) encourage image-based design. You can still use real text by leveraging text overlay features, custom CSS, or HTML blocks. If your CMS is a barrier, consider migrating to a more accessible platform or using a headless CMS with a modern frontend framework.

Some TestParty features described in this article are currently under development. Visit TestParty.ai to learn more about our current capabilities and roadmap, or book a demo at TestParty.ai/book-a-demo to see TestParty in action.

Disclaimer: Some of this article was generated with Large Language Models (LLMs) and Artificial Intelligence (AI). There may be some errors and we advise you to consult with human professionals for detailed questions.