Why focus on color contrast?
- 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.
Accessibility Checklist
Your goals for creating accessible content with effective color contrast:
- 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.
Examples of bad and good practice
| Element | Good practice | Bad practice |
|---|---|---|
| Color Contrast |  |
 |
Additional resources
- Digital Accessibility Best Practices: Color Contrast & Use of Color
- Color Contrast Checkers:
- Colour Contrast Analyser (TPGi)
- Contrast Checker (WebAIM)