With careful use of color, you can help enable everyone to easily distinguish your content.
Color can be an effective tool to help people understand information. However, it works poorly if it is used as the only method of communicating information. People who are colorblind may misinterpret your content, and people who are blind or have low vision may miss it entirely.
To make sure that everyone can clearly make out your content, it is important to ensure foreground text has strong color contrast against the background color and that important colors used in graphics (like bar charts) have strong color contrast against adjacent colors. For example, we want to avoid using light gray text against a white background.
You can use tools such as the WebAIM Contrast Checker to calculate a color contrast ratio between foreground and background colors. In general, text should have a contrast ratio of at least 4.5:1. Large-scale text (at least 18 pt or 14 pt and bold) and important graphics only require a contrast ratio of 3:1 or higher.
What To Do
Avoid using color as the only means of communicating information.
Ensure foreground text has at least a 4.5:1 color contrast ratio against the background color. Large-scale text (at least 18 pt or 14 pt and bold) only needs a contrast ratio of at least 3:1.
When using color to communicate information through graphics, ensure you have at least a 3:1 color contrast ratio against adjacent colors.
Human Impacts
If you communicate information through color alone, people who are colorblind or blind will miss out.
If your content doesn’t have sufficient color contrast, people won’t be able to reliably perceive and understand your content.
WCAG References
This skill corresponds to the following success criteria of the Web Content Accessibility Guidelines (WCAG):
- 1.3.3 Sensory Characteristics (Level A)
- 1.4.1 Use of Color (Level A)
- 1.4.3 Contrast (Minimum) (Level AA)
- 1.4.11 Non-text Contrast (Level AA)