Make sure foreground and background colors and other visual indicators contrast each other.
Introduction
Understanding color and contrast can help you communicate more effectively in your documents, web pages, and presentations. This subject isn’t just for graphic designers and artists—color is one of the most powerful and often misused aspects of visual communication.
Just because it looks one way to you when you design your documents and web pages doesn’t mean it will look that way to your audience.
- Users of adaptive technologies like screen magnifiers can change the way colors look on their personal display by for example, enabling high contrast mode.
- Some users may be looking at your content while standing in bright sunlight.
- Some may have an older computer monitor with different color calibration settings.
Color and contrast demonstration
Learn about contrast in the video above, or access the video in Kaltura: Using Color in Documents (3:58 minutes).
Best Practices
Both RGB and CMYK are modes for mixing color in graphic design. As a quick reference, the RGB (Red, Green and Blue) color mode is best for digital work, while CMYK (Cyan, Magenta, Yellow, Black) is used for printed materials.
Use color with another cue to show emphasis or differences
Color should never be the sole means of conveying information.
If you color code your document (e.g., “things highlighted in blue are my responses to your questions,”) a certain segment of your readers will have difficulty finding the new information. Screen readers don’t offer a way to search by color and people with a wide variety of conditions and in certain environments won’t be able to see the difference either.
This includes people who:
- Have a color vision deficiency
- Have low vision
- Have age-related vision issues such as macular degeneration
- Use monitors with incorrect or imperfect color rendering
- Are trying to read your materials on their phone while standing in broad daylight
Other elements (in addition to color) that you can use to emphasize a point or visually distinguish information differences include:
- Bold
- Size
- Patterns or shapes
- Halo (highlights)
- Text preface (e.g. Note:, Important:)
Avoid using color alone to emphasize a point or show information differences, combine colors and underlines to emphasize (looks like a hyperlink), or use color plus italics to emphasize (it is difficult to read in large quantities).
Use colors that strongly contrast each other
Color contrast is measured as a ratio of brightness to darkness, the brightness of a color against the darkness of the color it appears on top of. WCAG 2.1 guidelines specify different contrast ratios depending on the size and weight of the font text, such as:
- 3:1 for large text (14-point or larger bold or 18-point or larger non-bold) and graphics and user interface components
- 4.5:1 for normal text (less than 14 points)
If you’re not sure whether your background and foreground colors have adequate contrast, you can compare the two colors using a color accessibility checker, such as the WebAIM color contrast checker. You’ll need to know the hexadecimal value of the colors in order to perform this check.
Avoid using colors that don’t pass the contrast checker.