Skip to main content Skip to navigation
Web Communication Color and contrast

Color and contrast

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

  1. Using a color contrast checker, select the darkest or 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 (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

  1. Identify sections which use color to convey information.
  2. 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

XXXXXXX

XXXXXXXXX

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

Needs an input ref https://guides.18f.gov/accessibility/color/

Needs an input ref https://guides.18f.gov/accessibility/color/

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

The original text for this document was created by the 18F and made available in the public domain under the CC0 1.0 Universal license.

Washington State University has made modifications to the original document. These changes are also licensed as CC0 1.0. Please feel free to reuse this content.