Contrast and Color Accessibility

This article introduces staff, students, and faculty to the core accessibility concept of color and contrast. Attention to color and contrast in our digital content is especially important for people with low vision or those with color blindness.  

How Does Color and Contrast Relate to Accessibility?  

It is important to consider your color choices as well as the amount of contrast between two or more colors. Contrast refers to the difference in brightness and hue between the foreground and background colors on a page. Color choice can have a significant impact on those with color blindness.

As you consider color and contrast, also think about the size of the font used. Using a larger font size will make text easier to read and may help offset any contrast issues.  

Why This Matters

Color and contrast are important because they affect how easily people can perceive and understand your content. Effective use of color and contrast is essential for people with low vision, color blindness, or age-related eye conditions and will increase the readability of content for all users. If printed text, graphics, and images do not have enough contrast, it can be difficult to read and may cause eye strain or fatigue.

Basic How To's

The following overall concepts can help you effectively use color and contrast to create accessible digital content in various formats such as web pages, slides, emails, and handouts.  

• Use high contrast - a dark-colored font on a light-colored background, or white font on a dark-colored background. 
• Avoid red-green or yellow-blue combinations as contrasting colors.
• If using color to convey meaning, also pair with an additional visual indicator such as shape, font style, icons or symbols.
  • For example, the Ally Accessibility Checker in Canvas pairs color with additional visual indicators. In the following image, color is paired with a dial indicating the level of accessibility as well as additional text cues.

• As an additional check, view your content in black and white to confirm that those with color blindness could grasp the meaning of the colors used. See the Ally example in black and white below. Are you still able to understand the meaning?

• Consider color contrast not only for text, but also when creating icons and graphic objects.  For example, is there a sharp enough contrast of a dark color and a light color? It is important to use sufficient contrast for all elements on the screen.  
• Consider font size. In general, the idea is to use at least 18-point font or greater if you are using a regular font, or at least 14-point font if using a bold font.  
• Use simple fonts that are easy to read. Sans-serif fonts are useful to consider due to crisp, clean design (e.g., Arial, Verdana, Calibri). Avoid fonts that make it hard to separate one letter from another with overlapping, decorative, or handwritten styles.  
• Use large, bold fonts on uncluttered pages with plain backgrounds. 

Additional Tools for Checking Color Contrast

As you get the basics down, keep on learning! 

• Use a color contrast analyzer tool, such as WebAim Color Contrast Checker Tool to check your use of color in a poster, icons, course content, or documents. 

• Make PowerPoints accessible for all users. This resource also has information on using accessible font format and color with multiple platforms including Windows, MacOS, iOS, Android and web.  

• Consider the St. Thomas branding colors and the branding toolkit when seeking a strong connection to our branding colors.

  • Note: Not all of our branding colors when paired with one another pass the color contrast accessibility checking (WCAG AA standard) depending upon the font size and color contrast choices. Use a color contrast checker tool such as the WebAim Color Contrast Checker to check your work. 

• When using Canvas, use the Canvas Accessibility Checker tool that is built into the Rich Content Editor (RCE) as another way to check color contrast. 

  • When enrolled as a Teacher, TA or Designer role in Canvas, select the “edit” button on a page and locate the Canvas Accessibility Icon. 

  • If there is a color contrast issue flagged, first learn where the issue is. Then within the Canvas checker tool, drag and move to select a different combination of RGB (Red, Green, Blue). 

• How to Convert Your Color Format and Get the Numbers. When working in Canvas and other digital resources, it is helpful to know how to convert a color code to another format. For example, being able to convert between different color formats such as RGB Hexadecimal Color “hex triplet” and other formats such as CMYK, HSV, HSL, CIELab, Android, Decimal, and YUV.  Free Color Translater from Nix  

• How to Use a Color-Dropper Tool to find color-code. You can add a browser extension which will give you a "color dropper” that you can use to select any color on any page or document open in your browser to be able to test its’ contrast in combination with other colors. You can download these extensions for Google Chrome, Microsoft Edge, and other browsers. 

We also invite you to enroll in the Digital Accessibility Basics Badge site to learn more about color contrast and other digital accessibility skills.