WCAG 1.4.5 — Images of Text

Who Is Affected

Screen reader users (who cannot access text in images), users who need to enlarge text beyond 200%, users with dyslexia who benefit from custom fonts, and users with low vision who need to adjust text spacing or colors.

What This Means

When text appears as an image file (JPG, PNG, GIF) instead of actual HTML text, assistive technology cannot interact with it. Screen readers cannot read it aloud, browser zoom functions don't work properly, and users cannot apply their preferred fonts or text spacing.

Common examples include navigation buttons with text baked into images, decorative headings saved as graphics, and contact information displayed as photos. While these may look appealing visually, they create significant barriers for users with disabilities.

The only exceptions are when the image is essential to the information (like showing an example of a font) or when the text is part of a logo or brand name.

Fix: Content Editor

Step 1: Identify text images

1. Review your page content for any images that contain readable text
2. Look for navigation buttons, headings, contact information, or announcements saved as image files
3. Check if the same information could be displayed as regular HTML text

Step 2: Replace with HTML text

1. Delete the text image from your content
2. Type the same text directly into your content editor
3. Use your CMS's built-in heading styles (H1, H2, etc.) instead of heading images
4. Apply CSS styling to match your visual design needs

Step 3: Handle special fonts If you were using images because you needed a specific decorative font:

1. Check if the font is available as a web font through Google Fonts or your theme
2. If not, ask your web developer to install the font file on your server
3. Use CSS to apply the font to your text instead of creating images

Step 4: Navigation and buttons For navigation menus or buttons that were images:

1. Replace with HTML text links or buttons
2. Use CSS to style the appearance (colors, borders, backgrounds)
3. Ensure the new text buttons meet color contrast requirements

Fix: CMS / Theme

Joomla:

1. Go to Extensions → Modules to review any custom HTML or image modules
2. Check your template's logo area — ensure logos contain actual text elements, not just images
3. Review menu configurations in Menus → Your Menu → Module Assignment

WordPress:

1. Go to Appearance → Menus and replace any image-based navigation items with text links
2. Check Appearance → Widgets for any image widgets containing text
3. Review your theme's header/footer areas for hardcoded text images

Standard Reference

WCAG 2.1 Success Criterion 1.4.5 — Images of Text, Level AA

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except when the image of text is essential to the information being conveyed or can be visually customized to the user's requirements.

• W3C Understanding SC 1.4.5
• WCAG Technique C22 — Using CSS to control visual presentation
• WCAG Technique C30 — Using CSS to replace text with images
• WCAG Technique G140 — Separating information and structure from presentation
• WCAG Failure F3 — Using CSS to include images that convey important information