High-contrast colors and text help all your attendees see and understand what you’re presenting on-screen. And it ensures you’re including those with low vision and color blindness.
Will you be presenting something or sharing your screen for attendees to follow along? Are there moments where you might ask participants to interact with one another via a collaborative document such as Google Docs or Jamboards? Are participants asked to read or watch a piece of media as a part of the main activities?
Tips for Increasing Visual Accessibility
- Choose a color scheme that creates high contrast between the text and the background. For example, if you have a dark background, the text should be light, and vice versa. (Black and white provide maximum contrast.)
- Avoid these color combinations:
- Green and red (or related colors)
- Blue and yellow (or related colors)
- Use larger text and simple (not ornate) fonts. Sans serif fonts are preferable
- Use a contrast checking tool
- If you are building a webpage, check it with a color blindness simulation tool
- Don’t rely on color as the sole means of conveying information. For example, don’t use color as your only method of indicating information hierarchy or heading levels
- Text can be difficult to read when set on top of photos or gradient backgrounds. Set text against a solid background when possible
Examples of Color Contrast
Image description: Eight examples of text on colored backgrounds, in grayscale and color, ranging from high to low contrast
The chart (above) illustrates a range of text/ background combinations in grayscale and color for color contrast.
Some are high contrast, i.e., easy to read.
Some are low contrast, i.e., difficult to read.
Complementary colors can sometimes be difficult to read for legibility of colored text on colored backgrounds.
In the chart (above), red text on a light blue background is almost illegible.
But the dark blue text on a yellow background (also complementary colors) produces a level of color contrast that is easy for most people to read. Note: a rare form of blue-yellow color blindness can make this combination problematic.
Image Descriptions
An image description is a written caption describing an image's essential information.
Image descriptions can define photos, graphics, gifs, and video containing visual information.
Providing descriptions for imagery and video is required as part of WCAG 2.1 (for digital ADA compliance).
Source: “How to Write an Image Description” by Alex Chen
TIPS
- While “alt text” and image descriptions are sometimes used synonymously, they’re not the same. Alt text refers to the text added explicitly to the alt attribute and is often short and brief.
- Image descriptions are often more detailed in the alt text, caption, or body of the webpage.
- Object-action-context format
- The object is the main focus.
- The action describes what’s happening, i.e., what the object does.
- The context describes the surrounding environment.
- It should be objective so that people using the description can form their own opinions about what the image means.
- It should be concise so that it doesn’t take too long for people to absorb all the content, especially if there are multiple images.
- It should be descriptive enough to describe all the image's essential aspects.
EXAMPLES OF IMAGE DESCRIPTIONS
Source: “How to Write an Image Description” by Alex Chen
More Resources for Visual Access & Image Descriptions
Visual accessibility
https://accessibility.colostate.edu/color-contrast/
https://rockcontent.com/blog/how-to-design-for-color-blindness/
https://www.komododigital.co.uk/insights/inclusive-design-colour-accessibility
Image Descriptions
https://ncdae.org/resources/factsheets/principles.php
https://www.w3.org/WAI/fundamentals/accessibility-principles/