Don’t use images of text
Some of your users will visit your website using a text-only browser, or might have images turned off in a regular browser. Images of text cause problems, as they are harder for those users to understand.
Images of text also cause problems for your users if they like to resize websites to read them more clearly because images do not work well this way. They also add to the time it takes your website to load, another key reason users will leave your website.
What to do
- Do not use an image of text when you can use plain text.
- Display quotes as text rather than images.
- Use CSS to style headings.
- Use CSS to style navigation menus as text.
Images of text are subject to guidelines on colour contrast. See Guideline 1.4.3 and Guideline 1.4.6.
- Brand logos.
- 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 design the website. However, this exception is removed in Level AAA Guideline 1.4.9.
- Purely decorative text.
- 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)
Free Developer Resources
Join over 2,000 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.
Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.