Websites: Color and Contrast
Easy to Read Text
Text that is offset poorly by its background can be difficult for people with poor vision to read. This can also apply to icons or images on a page.
- Use sufficient contrast. Make sure that the contrast ratio between text color and background color is at least 4.5:1. There are color contrast tools that can help you test color pairs for contrast and adjust the values as necessary.
- Avoid very high contrast. Be aware also that for some people, especially people with dyslexia, a very high contrast color scheme can make reading more difficult. It is a good idea to choose an off-white background color rather than a white background to aid on-screen reading.
The following example shows two color combinations: one that has a low contrast ratio and one that has a high contrast ratio.
Color contrast checking tools can compare two color values and report on the contrast ratio between them. Some tools will allow you to adjust these values until the ratio is sufficient, helping you to choose a color scheme that avoids contrast problems.
Check text and background color combinations on the page, using a color contrast checking tool:
- Does the contrast ratio exceed 4.5:1 (or 3:1 for large text)?