Skip to main content

Color & Contrast

This page is related to Accessibility

At a Glance

Color is a powerful way of conveying information, and in a digital environment, any color you can find a hex code for is at your fingertips. But for many people, color can be a stumbling block to understanding information. This doesn’t mean you have to take color out completely, though! By taking the time to consider how color is used in a course, instructors and designers can make sure that students are able to understand all the information, no matter what color it’s in.

Convey Information with More Than Color

Color should not be solely relied upon to convey information. Users who don’t perceive color fully may struggle when presented with color-based cues. For example, if stoplights were just a single light that changed colors, drivers who are red/green colorblind would be at a severe disadvantage. Similarly, in a course reading, if keywords are marked in bright red, colorblind or blind students might not be able to tell which words are important. However, by using additional avenues for communication, these challenges can be avoided. Stoplights consist of multiple lights in predictable placements, so all drivers know what it means when certain lights are illuminated. And in a course reading, keywords could be red, bold, and labeled in the text itself.Use text, patterns, textures, and shapes to communicate information alongside color. Multiple indicators of information ensure that everyone can understand, no matter their visual perception.

High Contrast is Best

Example of bad contrast ratio.A banner that shows both light and dark text against a WCAG color approved background.
Color contrast simply means the difference in brightness between different colors in an image or text. Black text on a white background, or vice versa, both have very high levels of contrast and are thus easier to read. This is especially important for low-vision and colorblind users, who may struggle to distinguish between similar color shades and tones. Pope Tech has a color contrast checker that will flag any potential issues with color use in your Canvas course. Visit this Mission: Accessible page for a video demo of how to use it!

Colorblind Design

In addition to high color contrast, being careful with color choices is also important for colorblind design. Certain colors are more difficult to distinguish. For example, these color combinations can pose challenges for red/green colorblind people: One major issue with these color combinations is that they’re very close together in saturation. Yellow and bright green are almost indistinguishable to a colorblind viewer, but bright yellow and dark green would present enough contrast that even if someone couldn’t see green, they’d still be able to tell the difference between the colors.

References/Resources

  • If you’re not colorblind and are concerned that you’ll miss some of these combinations, don’t worry! There are numerous resources available to help. First and foremost, use Pope Tech in your Canvas courses!
  • In addition, Most image editing programs have colorblind simulation filters, and COBLIS allows you to upload an image and apply various colorblind filters as well. WebAIM also has a very simple and popular color contrast checker that you can use as long as you have a web browser and the hex codes of your colors.
  • If you’re creating maps, check out ColorBrewer, which provides colorblind-friendly palettes for maps and other data visualizations. Color Oracle is a free desktop program that applies a colorblind filter to your entire screen, independent of the program you’re using, so you can view everything on your computer from a colorblind perspective.