This article is designed to give guidance about using color effectively in your documents and web pages. If color contrasts are too low, then most people will find it difficult to perceive and read, regardless of ability. Low color contrast ratios create barriers, especially for low-vision and colorblind people. Furthermore, when we design digital information that relies on color to convey meaning, then we risk leaving anyone with a visual disability out.
Success Criteria for Color Contrast
Color contrast ratios exist on a spectrum where 1:1 is the lowest point and 21:1 is the highest point. Lower contrasts are more difficult to perceive than higher contrasts.
- An example of 1:1 is white text on white, or black text on black.
- An example of 21:1 is black text on white, or white text on black.
For normal text that is less than size 14pt, the minimum color contrast ratio between text color (foreground) and background color is 4.5:1. Better still are color combinations that create contrast ratios of at least 7:1.
Text that is size 14pt and bold, or 18pt and normal will pass with a minimum ratio of 3:1.
We recommend checking your color choices with a contrast analyzer tool like the WebAIM contrast Checker.
Non-text elements like borders and horizontal rules should also have a minimum color contrast ratio of 3:1.
Also, avoid layouts where text is overlaid on top of busy backgrounds like images and patterns. If you choose to add a text layer on top of a background image, make sure the text is set in a solid-colored box to improve readability. For examples, check out this article from the Nielsen Norman Group.
Techniques for Color Contrast
- Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- Ensuring that a contrast ratio of 3:1 is provided for icons
- Provide sufficient contrast at the boundaries between adjoining colors
Color and Meaning
Success Criteria for Color and Meaning
Color should not be the only way to perceive meaning. Colorblind, low-vision, and blind people can’t perceive color distinctions and need additional indicators for comprehension.
Colors that are often associated with concepts like Red/Stop and Green/Go are often used to convey meaning. When desaturated (grayscale), different colors like red and green can appear as the same shade of gray.
However by including other indicators then all individuals can have the same understanding. For instance in a form you might have instructions that state all red fields are required. By adding the word “Required” after the field name in red, you have color clues for sighted individuals and textual instructions for all individuals.
If the color red is used to indicate a negative number, then a preceding minus sign should also be included. Bar charts with different colors can also include labels. Links that are presented in a different color then surrounding text can also be underlined.
Techniques for Color Meaning
- Providing textual identification of items that otherwise rely only on sensory information to be understood.
- Using semantic markup whenever color cues are used
- Ensuring that information conveyed by color differences is also available in text
- Including a text cue for colored form control labels
- Ensuring that additional visual cues are available when text color differences are used to convey information