Accessibility – Colors and Contrast

Students Working with Technology

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.

Students Explain Digital Accessibility: Using Color | UTS Learner Experience Lab

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 perceive the words, then it’s probably not accessible. But, even though you may not be able to perceive any issues, that doesn’t mean that they don’t exist.
  • Use available tools. If you cannot detect any issues with your own visual sense, there are many tools you can use to evaluate color contrast in your content:
    • PopeTech Accessibility Guide (in Canvas)- before “saving” your content, click on the Pope Tech tool next to the save button. This tool will identify contrast issues and provide a guide to fix them.
    • Free color analyzer Tools – install one of the free color analyzer tools WebAim Contrast Checker or TGPI Color Analyzer. This is a great option for creating content outside of Canvas for accessibility (e.g. presentations, images, documents).
    • The accessibility checkers in Microsoft and Google apps will also evaluate color contrast.

The more you actively engage in evaluating color and contrast, the more easily you will recognize it and the more accessible your content will be for your students.

Simple Solutions

Below are a few quick solutions to resolve color contrast issues in your instructional content:

  1. Make font larger or bold. This can positively impact color contrast.
  2. Change the font color (dark font on light background, or light font on dark background)
  3. 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

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:

If you’d like to understand colorblindness and how the colors you choose can create barriers for our students, watch the video below.

Understanding the role of color in accessibility |

Additional Resources

Click the back arrow or here to jump back to the Making Content Accessible at ARC page.