color.md

title	layout	description	permalink	page_title	sidenav
Color and Contrast	post	How we work with color and contrast	/accessibility/color/	Color and contrast	accessibility

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

First Name <input type"text" id="name">

Last 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

First Name <input type"text" id="name-2">

* Last Name <input type"text" id="lname-2">

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