Contrast (Minimum) - Success Criterion 1.4.3 (Level AA)

Question

Is there sufficient contrast between the text and its background?

Why is this important?

Without proper contrast, people with moderately low vision, who do not use assistive technology, will be unable to easily read and navigate site and application content. In fact, all users will benefit from good contrast between the text on a site or application and the background color.

Whom does it benefit?

Example 1

As a person with low vision, I have difficulty reading hyperlink text that does not stand out from the background.
I want good contrast for hyperlinks and visited hyperlinks
so that I can read and use links with ease.

Example 2

As a person who works all day on a computer, I get eye fatigue after several hours of reading text.
I want sufficient color contrast between the text and the background
so that I can minimize eye strain.

Example 3

As a student with color blindness, I struggle seeing text on colored buttons.
I want sufficient contrast between the text and the color of the button
so that I can be sure to click the correct button to submit my homework.

What should you do?

The color difference of text and its background should have a contrast ratio of at least 4.5:1. This also applies to images of text.

Exceptions are:

When using large text (18 points or larger) a ratio is 3:1 is sufficient
When using decorative items
When using logos

How do you do it?

Using contrast analyzers, spot test various text and backgrounds throughout the site or application to ensure a contrast ratio of at least 4.5:1. When insufficient contrast issues are found, adjust either one or the other color to meet a minimum of 4.5:1 ratio.

This guideline also applies to images of text (but avoid using images of text when possible, see Success Criterion 1.4.5).