Contrast ratio between your text and background is at least 4.5: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.

What do to

Make sure the contrast ratio between your text and background is at least 4.5:1.

Do this by:

Tips

  • Picking a contrast of at least 7:1 will also fulfil Guideline 1.4.6.
  • 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 3: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.

See also

About Author

I'm Luke, I started Wuhcag in 2012 to help people like you get to grips with web accessibility. Check out my book, 'How to Meet the WCAG 2.0'.