Creating Accessible Images
Text Within Graphics

Pixelation of Enlarged Images

Often graphics contain text as part of the image. For example, the graphic below contains the word "University". 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 pixelated and difficult to read. Let's look at an example.

The graphic was enlarged to 500% its normal size. You can see that the text is difficult to read. If real text had been used, it would have been much easier to read, as in the example below:

University

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 graphics. The practical answer is that you should try to limit the amount of text in graphics. One of the places where text inside of graphics can be justified is in logos and trademarked images. The Internet does not offer a way to convey the unique text of this type of image without employing a plug-in such as Flash or SVG. Still, if there is a way to use real text, you should do so.

Pixelated text can be especially difficult to read when there are other visual elements in the background, as in this enlarged image of a book cover.

Although the white text contrasts quite well with the dark blue background, the designs of the background obscure the text somewhat, despite the fact that these designs are subtle.

Guidelines

If you must use graphical text, here are 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 (as well as color-blindness compatibility) can be found at www.vischeck.com - external link.