Contrast ratio between your text and background is at least 7:1
All of your users will benefit from a good contrast between the text on your website and the background colour. Some of your users with visual impairments need a stronger contrast than others, so getting your colours right is essential.
While the minimum contrast for Level AA was 4.5:1, for Level AAA it’s 7:1. This higher level of contrast makes it even easier for everyone to read your content.
What to do
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.
Tips
- You may have fulfilled this guideline when you complied with Guideline 1.4.3.
- 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 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 Guideline 1.4.5).
Exceptions
- Text that is 18 points or larger (or 14 points or larger, if bold) must have a contrast of at least 4.5:1.
- Where text is purely decorative – so you could have a block of different coloured words on a blue background if it didn’t mean anything to your users and their order was random.
- Where 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.