Accessible Colors and Contrast
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.
Who needs accessible colors and contrast?
Colorblindness is one of the most common disabilities in the world; 1 in 12 cis men (8% of cis men around the world) and 1 in 200 cis women have some degree of colorblindness. (Source: Colour Blind Awareness.) In addition, blind or low vision users may also have difficulties perceiving color, with either limited or no color perception. Over-reliance on color to convey information can result in frustration for these users.
High contrast is also important for low vision users, who may need to magnify a screen or invert the colors for easier reading. Inverted colors is a common feature on many devices--it’s often referred to as “night mode” and features light text on a dark background. If the colors on a page are too close together, they’re difficult to read—in their standard appearance or inverted.
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
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.
By default, Canvas is designed with high contrast in mind: white backgrounds and black or dark green text. But for other images or graphics, you can use a color contrast checker (like this contrast checker provided by WebAIM.org) to ensure that there’s a high level of contrast between the colors.
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 shade. 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.
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. Most image editing programs have colorblind simulation filters, and COBLIS allows you to upload an image and apply various colorblind filters as well. The color contrast checker linked above can also help; high contrast colors can generally be distinguished by colorblind viewers.
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.