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.



  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.


  1. Identify sections which use color to convey information.
  2. Check to see if the information is conveyed in another way visually and programatically.



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



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


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

Needs an input ref

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.