Don’t use images of text.
Introduction
Users with visual or cognitive impairments may rely on changing font size, colour, alignment or spacing to enjoy your content.
Text allows for this kind of personalisation, but images of text almost always don’t.
How to Pass
- Don’t use an image of text when you can use plain text
- Display quotes as text rather than images
- Use CSS to style headings as text
- Use CSS to style navigation menus as text
Exceptions
- If using an image of text is essential because you can’t achieve the effect with text (for example, presenting a particular example of typography)
- If the presentation can’t be achieved with the technology used to build the website
- If the text is part of an image that contains other visual content, such as labels on a diagram
- Purely decorative text
- Brand logos
Tips
Images of text are subject to guidelines on colour contrast – see 1.4.3 – Contrast (Minimum) and 1.4.6 – Contrast (Enhanced).
The exception of the website being built in a technology that doesn’t allow the text to be presented as text is removed in the Guideline 1.4.9 – Images of Text (No Exception) at Level AAA.
See also
- Guideline 1.1.1 – Non-Text Content
- Guideline 1.4.3 – Contrast (Minimum)
- Guideline 1.4.6 – Contrast (Enhanced)
- Guideline 1.4.9 – Images of Text (No Exception)
- Understanding Success Criterion 1.4.5 (W3C)
Free Developer Resources
Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.