Color and contrast

There are two main accessibility concerns for color, contrast and color dependence. Color contrast is the ratio of the foreground color(text) and the background color. Text should have a ratio of 4.5:1 or greater with the background.

Color dependence is the need to see color to understand the information. An example of this would be The required fields are red. Some users may not be able to distinguish red from other colors and would lack information to fill out this form.

Links that only rely on color also fail this requirement. Links must be distinguished by more than just color (hue). Links can be distinguished by underlines, symbols, context (in a menu for example), or lightness. If the contrast between the surrounding text and a link is greater than 3:1 it is acceptable. Also note, the link text itself still needs to have a contrast ratio of 4.5:1 or greater with the background. More information about link color dependence.

Testing

Color Contrast

1. Using a color contrast checker such as the WebAIM Color Contrast Checker or Accessible Colors compare the color of the text with the color of the background.
2. In situations where the color is a gradient or cannot be determined programmatically, compare the lightest part of the text with the lightest part of the background using the color picker. Then compare the darkest part of the text with the darkest part of the background.
3. Check that the ratios are 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.

Note: Logos, disabled form fields, and disabled buttons are exempt from this test and don't need to be tested for contrast.

Color Dependence

1. Identify sections which use color to convey information.
2. Check to see if the information is conveyed in another way visually and programmatically.
3. If links are only distinguished by color surrounded by normal text 3a. Check if the link has a contrast ratio of 3:1 with the surrounding text

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

First Name

Last Name

This is a failure because the only indication of which fields are required is the color of the text label.

Im a Link. I'm just normal text

This fails because the contrast ratio between the link and surrounding text is less than 3:1.

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

First Name

* Last Name

This example passes because the * and the red text indicates the required field.

Im a Link. I'm just normal text

This passes because the link and the black text have a contrast(lightness) ratio of 3:1, but we would recommend a greater contrast ratio for links without other visual indicators

Im a Link. I'm just normal text

This passes because all users see the link as normal text.