2. Color & Contrast

Provide sufficient contrast between foreground and background

Foreground text needs to have sufficient contrast with background colors. This includes text on images, background gradients, buttons, and other elements. This does not apply for logos, or incidental text, such as text that happens to be in a photograph. The links below provide more information on the minimum contrast ratio as required by the WCAG and how to check contrast. “Contrast ratio” is a short version of the more technically correct term “luminance contrast ratio”.


Don’t use color alone to convey information

While color can be useful to convey information, color should not be the only way information is conveyed. When using color to differentiate elements, also provide additional identification that does not rely on color perception. For example, use an asterisk in addition to color to indicate required form fields, and use labels to distinguish areas on graphs.

Example: Referring to something using color alone (color only)
Which is the right-angled triangle?

Green triangle: Angles are 30°, 60°, 90° . Blue triangle: Angles are 30°, 30°, 120° . Red triangle: Angles are 30°, 60°, 90° . Yellow triangle: Angles are 40°, 70°, 70° .






Green, Blue, Red, Yellow, or Don't Know?


Check by iconcheese from the Noun Project

Example: Referring to something using color and number


Which is the right-angled triangle?

1 Green triangle: Angles are 30°, 60°, 90° . 2 Blue triangle: Angles are 30°, 30°, 120° . 3 Red triangle: Angles are 30°, 60°, 90° . 4 Yellow triangle: Angles are 40°, 70°, 70° .

Green (1), Blue (2), Red (3), Yellow (4), or Don't know?


More Information:


Citation and Link: White, K., Abou-Zahra, S., & Henry, S. L. (2019, January 9). Designing for Web Accessibility. Web Accessibility Initiative. https://www.w3.org/WAI/tips/designing/