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:


  • 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).


  • 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'.
  • Cliff Tyllick

    Luke, I have heard, but haven’t had time to look into it, that the BBC is considering making enacted contrast required on all content for mobile. I guess a responsive design would switch style sheets when the viewport gets down to mobile-ish dimensions. Worth looking into, if you can.

    • Hi Cliff, I hadn’t heard of that – I’ll see if I can dig around next week.

      Anyone else heard anything about that or have a foot in at the BBC?

  • Great article! So often where I come across websites where the web designer (or client) seems to think it’s better to opt for what is “trendy” rather than what is beneficial to the end user. This tendency to stick to put “fashion” before functionality shows a clear lack of expertise and experience on the designer’s part when it comes to good user experience in proper professional web design and development.

    • Thanks Anthea, glad you enjoyed the article. It’s so important that companies know how to hire designers who know the fundamentals and won’t just throw up the latest fad for them.