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 Source: University of Colorado: Accessibility by Design 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.
Image description : Two examples of colored text on a colored backgrounds, in red and blue (low contrast) and blue and yellow (high contrast).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
Image Description: A dog sitting in a field of autumn leaves with its tongue hanging out
Image Description: A tattooed person holding a sign that says, “Teach your children well,” in a crowd of people. In the middle of the sign, there’s an illustration of the earth with 2 raised fists on either side that have a rainbow pride square background, a trans pride circle background, and brown skin tone stripes on the fists.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/
