How to Create Accessible Graphics

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

Text in graphics

Often graphics contain text as part of the image.  For example, the University of the Antarctic logo contains the words "University of the Antarctic".  As was describe previously, this text is not readable to screen readers or other text browsers. However, including an alt attribute solves that problem nicely.  There is something else to consider when using text in a graphic.  Some users with low vision use programs that enlarge the elements on their screen so that they can more easily see them.  Unfortunately, when the text in an image is enlarged it often becomes pixilated and difficult to read.  Let's look at an example. 

The University of the Antarctic logo was enlarged to 500% its normal size.  You can see that the text is difficult to read.

The second image shows actual text that was enlarged to 500%.  As you can see, it is much easier to read.

So does this mean you shouldn't use text in your graphics?  In a perfect world maybe, but the current technology makes it difficult to achieve certain designs without using text in a graphic.  So the real answer is that you should try to limit the amount of text in graphics.  If there is a way to use real text, you should do so.  If you must use graphical text, here some guidelines to follow:

• make your font sizes as large as possible
• use simple block fonts when possible
• use good color contrast between the text and background. 

A good tool for checking color contrast can be found at http://www.vischeck.com/.

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

Top of Page || Return to Tutorials List