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 almost always don’t.

How to Pass ‘Images of Text’

  • Don’t use an image 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 is essential because you can’t achieve the effect with text (for example, presenting a particular example of typography).

  • If the text is part of an image that contains other visual content, such as labels on a diagram.

  • Purely decorative text.

  • Brand logos.

‘Images of Text’ Tips

You may already comply with this guideline, depending on how you addressed Images of Text.

Images are subject to guidelines on colour contrast – see Contrast (Minimum) and Contrast (Enhanced).

See Also

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.

Powered by ConvertKit

Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.

Learn more >

About Author

I'm Luke, I started Wuhcag in 2012 to help people like you get to grips with web accessibility. Check out my book, 'How to Meet the WCAG 2.0'.

Leave Comment