Accessibility Guidelines: Color and Color Contrast

  • Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound (WCAG 1.3.3; A).
  • Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (WCAG 1.4.1; A)
  • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (WCAG 1.4.3; AA) or at least 7:1 (WCAG 1.4.6; AAA).

Color

Imagine sitting down to play Trivial Pursuit with friends and not being able to tell the difference between the pieces or the squares on the board!  Color is often used to enhance the look and feel of online content, but the use of color alone to convey meaning creates problems for people with low vision, color perception deficiencies, and color blindness. 

A trivial pursuit board and game pieces shown with different types of color blindness

 

Color Contrast

Color contrast refers to the difference in brightness between foreground and background colors. In the following screenshots from WebAIM's Contrast Checker, you can pretty easily see the difference between the first example, which passes both AA and AAA requirements, and the third, which passes neither. The second examples, with the standard red color used in LibGuides, passes AA but not AAA.

Three examples of color contrast, from passing to failing

More Resources