Pillar: Color and Flashing
Pillar: Color and Flashing
What and Why
Color contrast refers to the difference in brightness between readable elements and background color. Proper color contrast helps users with visual impairments read and understand content more easily. It also benefits users in bright environments or on screens with glare. Additionally, avoiding the use of content that flashes or blinks more than three times per second makes it usable for individuals who experience certain seizures.
Using Color Best Practices
- Avoid using color alone to communicate information. Pair it with text or symbols that convey the intended meaning.
- Use high-contrast color combinations. WebAIM offers a free online contrast accessibility checker for any color combinations.
- Avoid blinking or flashing content whenever possible. If it must be included in a video or animation, provide a timestamp so students can skip that portion.
Using Color Examples
Ineffective Use of Using Color to Communicate Meaning
Ineffective Example:
Roster (Students with extended time on assessments in red):
- Sarah
- Alexander
- Raquel
- Paul
- Ayanna
Why it's ineffective: Color is used alone to convey meaning. The only way to know that Alexander and Ayanna have extended time is to be able to see that the text is written in red.
Effective Use of Color and Text to Communicate Meaning
Effective Example:
Roster (Students with extended time on assessments as noted):
Sarah
Alexander (Extended time)
Raquel
Paul
Ayanna (Extended time)
Why it's effective: In this example, color is still used but a note following each name explains the meaning of the color.
Ineffective Use of Color Contrast
- Color contrast is too low and hard to see against the white background (light orange wedge).
- Relies on color alone to convey meaning rather than labeling each section (e.g., “4th Qtr").
Effective Use of Color Contrast
- Uses high color contrast and/or patterns to distinguish content.
- Provides labels to supplement colors and patterns.
How to Check for Color Contrast and Flashing/Blinking
- In Microsoft Word
- Use Microsoft’s built-in Accessibility Checker to identify insufficient color contrast. This tool checks text color against page color, table cell backgrounds, highlight, paragraph shading, headers and footers, and links.
- Avoid using textbox fill, shape, and SmartArt fills
- In Microsoft PowerPoint:
- Use Microsoft’s in-app Accessibility Checker to identify insufficient color contrast.
- Avoid using the “Blink,” “Pulse,” and “Color Pulse” emphasis animations in PowerPoint.
- In UVA Canvas:
- WebAIM offers a free online contrast accessibility checker for any color combinations.
- To check Flashing/Blinking: The Photosensitive Epilepsy Analysis Tool (PEAT) is a free, downloadable tool developed by the University of Maryland to analyze and evaluate video content for flashing/blinking.
Specialized How-To's
- Coming soon
Remember: Check the Accessibility of Course Content
Where can I get support or further training?
Coming soon, Summer 2025: “Faculty Pathways for DA Support”
For faculty developing and managing website content, refer to Web Accessibility Tutorials