Color
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’s acceptable. Also note, the link text itself still needs to have a contrast ratio of 4.5:1 or greater with the background. Read more information about link color dependence.
Testing
Color contrast
- Using a color contrast checker, compare the color of the text with the color of the background.
- In situations where the color is a gradient or can’t 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.
- Check that the ratios are greater than 4.5:1 (for example, 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.
- Logos, disabled form fields, and disabled buttons are exempt from this test and don’t need to be tested for contrast.
Color dependence
- Identify sections that use color to convey information.
- Check to see if the information is conveyed in another way visually and programatically.
- If links are only distinguished by color surrounded by normal text.
- Check if the link has a contrast ratio of 3:1 with the surrounding text.
Examples
Fails
This text fails because it’s too light. The contrast ratio is 2.97: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.
This fails because the contrast ratio between the link and surrounding text is less than 3:1.
Passes
This text passes. The contrast ratio is 4.52:1.
This text passes. The contrast ratio is 4.54:1.
This example passes because the * and the red text indicates the required field.
This passes because the link and the black text have a contrast (lightness) ratio of 3:1, but we would recommend a greater contrast ratio for links without other visual indicators.
This passes because all users see the link as normal text. While not a failure of a specific accessibility requirement, this is not recommended from a usability perspective.