Contrast (Enhanced)
Success Criterion 1.4.6 (Level AAA)

Question

Is the contrast between the text and its background 7:1 or greater?

Why is this important

Enhancing the contrast ratio to 7:1 or greater allows users with more significant vision loss and/or color deficiency to view content in the website without assistive technology.

Note: This success criterion builds upon the 4.5:1 minimum contrast ratio in Success Criterion 1.4.3. (Level AA)

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 7:1.

Exceptions are:

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

How do you do it?

  • Using color contrast analyzers, spot test various text and backgrounds throughout the site or application to ensure a contrast ratio of at least 7:1. When insufficient contrast issues are found, adjust either one or the other color to meet a minimum of 7:1 ratio.
  • Another way to meet this guideline is to provide a link or control on the page allowing the user to adjust contrast levels, or provide an alternative high contrast version of the content.

Need technical guidance?

Additional Resources to help you: