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:
- Using a light background and dark text; or
- Using a dark background and light text; and
- Using WebAim’s colour contrast checker to verify your choice.
- 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.
- Guideline 1.4.5 – Images of Text
- Guideline 1.4.6 – Contrast (Enhanced)
- Guideline 1.4.9 – Images of Text (no exception)
- Understanding Success Criterion 1.4.2 (W3C)
Free Developer Resources
Join over 3,500 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.
Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.