# Use sufficient color contrast

**Source**: https://accessibility.huit.harvard.edu/use-sufficient-color-contrast
**Parent**: https://accessibility.huit.harvard.edu/content-creator-essentials

When text contrasts poorly with its background, it makes reading more difficult, especially for people with low vision. The same goes for icons and situations where highlighting is used to draw attention (such as the hover effects on links).

This example shows two color combinations: one that has a low contrast ratio and one that has a high contrast ratio.

- **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’s a good idea to choose an off-white background color rather than a white background to aid on-screen reading.

## Testing

Check text and background color combinations on the page, using a [color contrast checking tool](https://accessibility.huit.harvard.edu/testing):

- Is the contrast ratio at least 4.5:1 (or 3:1 for large text)?

## Resources

- [Understanding WCAG SC 1.4.3—Contrast (Minimum) (WAI)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
- [Colour Contrast Analyser (TPGi)](https://www.tpgi.com/color-contrast-checker/)

## Related Techniques

[### ✎ Technique: Checking color contrast](https://accessibility.huit.harvard.edu/technique-checking-color-contrast)

Color-contrast-checking tools can compare two colors 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.