Skip to main content

Avoid Images of Text

Disabilities Affected: Cognitive, Visual
Success Criterion: 1.4.9
Level: AAA
Images of text should only be used for pure decoration or where a particular presentation of text is essential to the information being conveyed (e.g., logotypes). All other text should be actual text.

Why It Matters

This is the strictest version of the image-of-text rule (compare to 1.4.5 at AA). Real text can be resized without pixelation, customized (colors, fonts, spacing) by user stylesheets or browser settings, and easily read by screen readers. Images of text lack this flexibility, making them inaccessible for users who need text customization or rely on text-to-speech. Level AAA essentially prohibits using images of text unless absolutely unavoidable (logos).

Fixing the Issue

Use actual HTML text styled with CSS for all content whenever possible. Avoid creating banners, buttons, or informational graphics where the primary content is text embedded within an image file. If text must be part of an image (like a logo), ensure it meets the limited exceptions and has appropriate alt text. Use CSS for visual effects like gradients, shadows, and specific font rendering instead of resorting to images of text.


Good Code Example

Using HTML text and CSS for a stylized heading:

  • <h1 class="stylized-heading">Welcome to Our Site</h1>
    
    <style>
      .stylized-heading {
        font-family: 'Georgia', serif;
        font-size: 3rem;
        color: #2a5db0;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        border-bottom: 3px solid #2a5db0;
        padding-bottom: 5px;
        display:inline-block;
      }
      /* This text is customizable and accessible */
    </style>
  • Welcome to Our Site

Bad Code Example

Using an image file for a main page heading:

  • <img src="/wp-content/uploads/welcome_to_our_site.png" alt="Welcome to Our Site">
  • Welcome to Our Site
Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.