The contrast ratio between text and background is at least 7:1.
All users benefit from a good contrast between the text on your website and the background colour.
Some users with visual impairments need a stronger contrast than others to understand your content, so getting your colour choice right is essential.
While the minimum contrast for Level AA was 4.5:1, for Level AAA it’s 7:1. This higher standard of contrast helps a wider range of users read your content.
How to Pass
Make sure the contrast ratio between your text and background is at least 7:1.
Do this by:
- Using a light background and dark text; or
- Using a dark background and light text; and
- Using a colour contrast checker to verify your choice.
- Text that is 18 points or larger (or 14 points or larger, if bold) has a lower minimum contract ratio of 4.5:1
- If the text is purely decorative
- If the text is an incidental part of an image (for example, a man who is reading a newspaper or a landscape that happens to include a street sign)
- Brand logos
You may have fulfilled this guideline when you completed 1.4.3 – Contrast (Minimum).
Remember to ensure that all colours used conform. This includes links that change colour after being used once, and headings in menus and sidebars, as well as the main content.
Make sure that any embedded charts or images of charts have the minimum contrast between elements (for example, bars, axes and labels).
This guideline also applies to images of text (but you shouldn’t be using images of text, see 1.4.5 – Images of Text).
- Guideline 1.4.3 – Contrast (Minimum)
- Guideline 1.4.5 – Images of Text
- Guideline 1.4.9 – Images of Text (No Exception)
- Understanding Success Criterion 1.4.6 (W3C)
Free Developer Resources
Join over 3,500 subscribers on my weekly web accessibility email and get free developer resources like WCAG 2.1 Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.