Accessi-Bites: Using Alt Text and Contrast Effectively

Alternative text

Always add alternative text, or “alt text,” to every meaningful image in your content.

Alt text is a brief text description of an image that can be read by assistive technologies, or shown if the image is unable to load. Alt text should generally consist of a few words to a sentence or two for more complex graphics.

Aim to answer the question: “What is the content conveyed by the image in this particular context?” You can find examples of alt text and how to use it based on the context of an image at WebAIM.org. You can also view instructions for adding alt text in Google Suite or Microsoft Word.

Further reading on alt text is available from the Office for Digital Accessibility.

Contrast

Make sure foreground and background colors strongly contrast so the text is easily readable. You can check for contrast on an online tool like WebAIM’s Color Contrast Checker. In addition to black text on a white background, consider using:

• White text on a black background
• White text on a maroon background
• Gold text on a maroon background
• Black text on a light gold background

In addition, color should never be the sole means of conveying information. Instead, use another element in addition to color to emphasize a point or visually distinguish differences. For example, in addition to color, try varying text size, bolding, highlighting, or adding patterns or shapes. Avoid using color plus an underline or italics to show emphasis as these can be confused with links.

Further reading on contrast is available from the Office for Digital Accessibility.