Color and Contrast

There are two aspects to address when it comes to color: contrast and color dependence.

1. Color contrast is the ratio of the foreground color (for most websites, this is often text) and background color.
2. Color dependence is the need to see color to understand the information. Unless specific agency requirements dictate otherwise or where excepted, color contrast should meet the WCAG 2.0 AA minimum color contrast ratio of 4.5:1.

Testing

Color contrast

1. Using a color contrast checker, select the darkest / lightest section of the text.
2. Select the darkest / lightest section of the background.
3. Check the ratio and ensure its greater than [4.5:1][WCAG 2.0 AA] (e.g., 5.3:1 would pass).

Note: Run this test for all states of the text (e.g., :hover, :visited, :focus). This test should also be performed on images of text unless the image is a logo, which is exempt.

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.

Exceptions

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Examples

Failures

This text fails because it is too light. The contrast ratio is (2.93 : 1).

This text fails because the background isn’t dark enough. The contrast ratio is (3.28 : 1).

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

Passes

This text passes. The contrast ratio is (4.56 : 1).

This text passes. The contrast ratio is (4.54 : 1).

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