There are two aspects we need to address when it comes to color, contrast and color dependence. Color contrast is the ratio of the foreground color(text) and the background color. Color dependence is the need to see color to understand the information. Unless specific agency requirements dictate otherwise, color contrast should meet the WCAG 2.0 AA minimum color contrast ratio of 4.5:1.
Testing
Color Contrast
- Using a color contrast checker, select the darkest or lightest section of the text.
- Select the darkest/lightest section of the background.
- Check the ratio and ensure its greater than 4.5:1 (ex 5.3:1 would pass).
Note: Run this test for all states of the text (hover, visited, focused). This test should also be performed on images of text unless the image is a logo, which are exempt.
Color Dependence
- Identify sections which use color to convey information.
- Check to see if the information is conveyed in another way visually and programatically.
Examples
Failures
This text fails.
This text fails because it’s too light. The contrast ratio is (2.93 : 1).
This text fails.
This text fails because the background isn’t dark enough. The contrast ratio is (3.28 : 1).
Red text indicates a required field
<input type”text” id=”name”>
<input type”text” id=”lname”>
This is a failure because the only indication of which fields are required is the color of the text label.
Passes
This text passes.
This text passes. The contrast ratio is (4.56 : 1).
This text passes.
This text passes. The contrast ratio is (4.54 : 1).
* indicates a required field
<input type”text” id=”name-2”>
<input type”text” id=”lname-2”>
This example passes because the * and the red text indicates the required field.