↓Skip to main content
Dessky.org Dessky.org
  1. All Posts/

Color and contrast – Accessibility Guidelines

Accessibility 18F GSA
Table of Contents

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>

Testing #

Color contrast>

Color contrast #

  1. Using a color contrast checker, 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][https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#contrast-minimum] (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>

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
  4. Check if the link has a contrast ratio of 3:1 with the surrounding text


↑