Best Practices
9 Color Contrast
In this section, we provide guidelines and recommendations about color contrast in your textbook materials.
What is color contrast?
Color contrast refers to the hue, lightness and saturation of text, images, and background.
What role does color play in the delivery of your content?
When documents or web pages do not provide enough contrast between foreground elements (e.g., text, images) and background elements (e.g., color, watermark images), some students will have difficulty reading the content. Consider the following questions:
- Have you presented text- or image-based content on a colored or textured background? If so, you should:
- confirm that there is sufficient contrast between your foreground content and the chosen background color or texture
- Have you included links in your content? If so, you should:
- confirm that the color of your web links is distinct from both your background color and the color of the surrounding text
- Have you used color to convey concepts or information? If so, you should:
- confirm that you are not using color alone to convey this information
Who are you doing this for?
Who benefits?
Adequate color contrast is essential for students who are colorblind or have low or poor contrast vision.
The practice also benefits (among others) students who:
- Use a device with monochrome display
- Use a print copy that is in black and white
- Spend the majority of their day looking at a screen
- Are fatigued
What do you need to do?
In order to use color in a way that is most accessible, take into account color contrast between text and background, and whether or not color is used to convey information and the location of a link.
Contrast
Students with low vision and/or a form of color blindness may have difficulty reading text that does not contrast enough with the background color selected. If the color palette you have adopted is too subtle (e.g., white text on a pastel background; medium-gray text on a light-gray background), the contrast between your foreground and background is probably insufficient for some students. Most programs and platforms have default settings already reviewed for accessible contrast, such as the black text on a white background in this Pressbook theme. However, if you choose customize or dig deep into design templates, the information below can keep your content accessible.
Level AAA of the “Web Content Accessibility Guidelines (WCAG 2.0)” requires that “the visual presentation of text and images of text has a contrast ratio of at least 7:1.”[1] The following image presents four different foreground/background color-contrast examples to illustrate insufficient and sufficient color contrast ratios.
How to Test Your Materials for Color-Contrast Ratios
There are many online and downloadable tools available to help you evaluate color-contrast ratios. Here are two we have tried and like:
- WebAIM’s Color Contrast Checker: This web-based tool allows you to select or e