Contrast (Minimum)
Success Criterion 1.4.3 (Level AA)

Question

Is there sufficient contrast between the text or images of text and the background?

Why is this important

Without proper contrast, people with colorblindness or low vision may not be able to easily read and navigate site and application content.

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 all hyperlinks and visited hyperlinks,
so that I can read and use links with ease.

Example 2:

As a student with colorblindness, 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.

Example 3:

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.

What should you do?

Ensure that text (as well as images of text) and its background has a contrast ratio of at least 4.5:1.

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 until the contrast ratio is at a minimum of 4.5:1.

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

Need technical guidance?

Additional Resources to help you: