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.

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.

More Resources
-
Adobe Color Accessibility ToolsCreate a colorblind-safe color palette and check color contrast with these accessibility tools.
-
Contrast Checker by WebAIMA tool for checking whether two colors have enough contrast to pass accessibility standards
-
Link Contrast Checker by WebAIMCheck link color versus text and background color for accessibility.
-
Digital Color MeterThis app comes with MacOS and allows you to find the value of any color on your screen, making it easier check color contrast.
-
Colorblindly Chrome ExtensionThis browser extension simulates how your page looks to users with different types of color blindness.
-
Colorblind Web Page FilterEnter a URL to see what that page looks like with different types of color blindness.