WCAG 2.2 - Success Criterion
1.4.5 Images of Text
Description
If the same visual presentation can be achieved using text, images of text must not be used to convey information. Text rendered as an image cannot be resized cleanly by the browser, cannot be styled by user stylesheets, cannot be translated by browser translation tools, and is often not accessible to screen readers unless a text alternative is provided. Actual text is always preferable because it is flexible, scalable, and adaptable to user needs.
How To Test
- Identify all images on the page using browser developer tools or an accessibility inspector.
- For each image, check whether it contains text.
- For images containing text, assess whether that text could reasonably have been rendered as HTML text styled with CSS.
- If the image text could be replaced with real text, this constitutes a failure.
- Check whether the image has an appropriate
altattribute providing the same text as a fallback - this mitigates screen reader impact but does not make the implementation pass this criterion. - Review banner images, promotional images, and decorative headers as common areas of failure.
Testing Tools
- Color Contrast Analyser (CCA) — Free desktop app. Download from GitHub, install, use the eyedropper tool to measure contrast ratios on the demo. Read the ratio value and compare to AA (4.5:1) or AAA (7:1) standards.
- Lighthouse — Built into Chrome DevTools. Open DevTools (F12), go to Lighthouse tab, select "Accessibility", and run the audit. Review contrast violations and pass criteria in the results.
- axe DevTools — Browser extension for Chrome/Firefox. Install from official page, open DevTools, go to axe tab, run scan, and see detailed contrast violations with remediation advice.
Demo 1: Text as SVG graphic
The heading below is an SVG graphic. Increasing browser font size or applying a custom stylesheet will not affect it. Users cannot select or copy the text.
Try selecting the text with your mouse - you cannot.
The same heading is real HTML text. It scales with browser zoom, can be restyled by the user, and is fully selectable.
Contact us today
Try selecting the text - you can copy and resize it freely.
Code
Demo 2: Stylized text as PNG image vs CSS-styled web font
The heading below is a PNG image with stylized typography. Increasing browser font size has no effect - the image remains locked at its original size. Users cannot select or copy the text.
This is an image pretending to be text. Screen readers see only the alt text. Users cannot resize or customize it.
The same heading uses a web-safe font with CSS styling. It responds to browser zoom, can be styled by user preferences, and is fully selectable.
Welcome!
Real text with CSS styling. Scales with browser zoom. Can be selected, copied, translated, and restyled by users.
Code
Demo 3: Button with stylized text
This CTA button has custom gradient text created as a PNG image. Users who increase their browser font size or enable Windows High Contrast mode cannot see or interact with the button properly.
' rx='4'/%3E%3Ctext x='100' y='32' text-anchor='middle' font-family='Arial,sans-serif' font-size='18' font-weight='bold' fill='%23ffffff'%3EGet Started%3C/text%3E%3C/svg%3E)
Try increasing your browser font size (Ctrl +) - the button text remains locked at its original size and cannot be resized or customized.
The same button uses real HTML with CSS styling for the gradient effect. Users can resize the text, use High Contrast mode, and interact with the button normally.
Try increasing your browser font size (Ctrl +) - the button text scales smoothly. The button remains fully accessible and functional in all user preferences.
Code
Fail Explanation
A failure occurs when text content is embedded in an image file (such as a JPEG, PNG, or GIF) when that same text could have been rendered as HTML text with CSS styling. Common examples include marketing banners with stylized text, infographic headings, navigational links rendered as image files, and promotional section headers saved as images for a particular font or effect. Because the text is rasterized into the image, it becomes pixelated when zoomed and cannot adapt to user preferences for font size, color, or contrast.
Pass Explanation
A passing implementation renders all informational text using HTML text elements styled with CSS. Web fonts such as those available through Google Fonts or self-hosted font files can achieve virtually any typographic style without requiring text to be saved as an image. If an image of text is used for a logo or brand mark, it is considered essential and is exempt from this requirement. Text that is part of an image where the specific visual appearance is essential to the content - such as a historical document photograph - is also exempt.
Notes
This criterion does not apply to logos, wordmarks, or situations where a particular visual presentation of the text is essential. The advancement of web fonts and CSS text effects has significantly reduced the need to use images of text; most typographic effects achievable in Photoshop can now be reproduced using CSS.
Techniques
WCAG techniques used in this demo: H37, C22, C23, G94
Suggested Solutions & References
Curated from 11 real-world audit findings and official WCAG guidance.