Success Criterion 1.4.6 (Level AAA)
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?
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.
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.
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.
- 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:
Colour Contrast Analyser
Accessibility Color Wheel