Skip to Main Content

Accessibility Best Practices

Images of Text

Images of Text

The intent of this guideline is to encourage web designers to use text that can be adjustable by users (font size and color, background and foreground color, and line spacing and alignment can be adjusted). Placing text in an image significantly decreases the user's ability to adjust these settings. as such, whenever possible, designers should present the information as text rather than as an image.

Tip:

"This [guideline] does not include text that is part of a picture that contains significant other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually convey important information through more than just text." [1]

Additionally, this guideline does not include logotypes (text that is part of a logo or brand name) that are considered essential.

Examples:

Logo

University of Tennessee, Knoxville logo.

The University of Tennessee logo includes text in the image. "The university logo combines two elements: the icon block and the wordmark. Together, these elements uniquely communicate both our tradition of excellence and our position as a dynamic public research university." [2] The text included in the image is considered part of the logo and should NOT be replaced by text.

Image of Text vs Text Styled with CSS

Example of text used in an image.

The graphic above, which contains the text "Image of Text" was created using Photoshop.

 

Text Styled with CSS

The graphic above, which contains the text "Text Styled with CSS" is being formatted using CSS (Cascading Style Sheets - alters the presentation of a website using markup language like HTML).

 

These "images" look very similar; however, the CSS styled version can be read by screen-reader and altered by the user. The Photoshop image will distort if altered too much, and the only way that it can be read properly by a screen-reader is by adding the text to an Alt Tag (see the tab Text Alternatives).

 

Tip:
You can also easily add additional stylings using CSS. Such as shadowing and letter spacing.

Text Styled with CSS

The W3Schools website provides great examples of CSS Text styling options (as well as other CSS properties).
If you have an image that contains text and want to use CSS instead, but don't know the exact color used, you can upload the image to the Adobe Color page. There, you can select the Extract Theme tab to upload an image. The site will then break down the colors used.

You can also use the Color Wheel tab to find colors that are related to shades you like.