Accessibility: Colors and Contrast
Click the back arrow or here to jump back to the Making Content Accessible at ARC page.
Why Color and Contrast Matter
Color is used in a variety of ways across our instructional content, usually to identify important details or information. However color is also used to be decorative and create visual interest for viewers. Color is typically a part of materials that we create (e.g. documents and presentations) but also in our online content (e.g. Canvas and web pages). When including content that we created or that others have created, we must take into consideration how color is used and evaluate if it is a barrier for our students’ success. Please watch this short video about why color matters, from a student perspective.
Quick Tips About Color and Contrast
Below are some quick tips to help ensure that the color and contrast on your content is accessible for all students:
- Use your visual sense; if it’s difficult for your eyes to perceive, you find them struggling to focus or understand the words, then it’s probably not accessible.
- If you cannot detect any issues with your own visual sense, use a free online tool to check; you may not be able to perceive any issues, but that doesn’t mean that they don’t exist.
- The more you actively engage in evaluating color and contrast, the more easily you will recognize it and build with it mind.
Simple Solutions
Below are a few quick solutions to resolve color contrast issues in your instructional content:
- Make font larger
- Change the font color (dark font on light background, or light font on dark background)
- Color contrasts to avoid, according to Learning & Teaching:
- Red and Green
- Green and Brown
- Blue and Purple
- Blue and Grey
- Blue and Yellow
- Green and Blue
- Green and Grey
- Green and Black
- Light Green and Yellow
- Use a color contrast checker
- The accessibility checker in Microsoft and Google apps will evaluate contrast.
- Install a free browser extension (see list at the bottom).
Explaining Contrast
When you include color on content you are creating, you must take into consideration how those colors interact with one another – this is called contrast. For many users, when the colors we use do not meet web accessibility standards, this creates barriers for our students from accessing instructional content, so it is essential that you understand how to use color effectively when creating content. Use the link and video below for a good overview of contrast issues and how to fix them.
Using Color to Convey Meaning
It is important to consider how you are using color and if it is intended to convey important information to your students. Do not use color alone to convey meaning; you should always use color plus another piece of information, such as:
- color + shape
- color + number
- color + pattern or line styles
- color + text
For some examples of how to use color to convey information, use the links below:
- Color as the only indicator of meaning (University of Michigan)
- Accessibility: Don’t use color alone to convey meaning (Missouri State)
If you’d like to understand colorblindness and how the colors you choose can create barriers for our students, watch the video below.
Additional Resources
- How to use Color Contrast Analyzer (ANDI) – video
- Contrast Checker Tool (WebAIM)
- Contrast and Color Accessibility Guidelines (WebAIM)
- Color Hunt – color palettes for designers and artists
- Accessible Color Combination Palette Builder – for users with HTML experience
- Accessible Color Palette Generator (Venngage) – for users with HTML experience
Click the back arrow or here to jump back to the Making Content Accessible at ARC page.