Check Text And Background For Sufficient Color Contrast

1. Home
2. Accessibility Tips

Check Text and Background for Sufficient Color Contrast Check Text and Background for Sufficient Color Contrast

Color contrast is a common web accessibility issue that is often overlooked. People who may have low vision, or may be colorblind, could encounter some difficulty distinguishing text from a background color if the contrast is insufficient. There are nearly three times more individuals with low vision than those with total blindness; and one out of twelve people has some sort of color deficiency. So, it is critical to consider adequate contrast between text and backgrounds.

For Level AA conformance, WCAG 2.0 Success Criterion 1.4.3 recommends that regular text has a minimum contrast ratio of 4.5:1 and that large text (18-point or 14-point bold) has a minimum contrast ratio of 3:1. The ratios have been scientifically calculated to ensure that text can be read by those with moderate low vision and that contrast is sufficient enough for those who have color deficiencies. A common question web designers have when addressing color contrast is what colors to avoid. It is not so much about avoiding colors as much as it is about ensuring that colors used in web design have appropriate contrast.

Color Contrast Ratio Examples

Color Combinations	Color Codes	Contrast Ratio	Small Text	Large Text
Black on YellowOR Yellow on Black	Black: #000000, Yellow: #ffff00	19.56:1	Pass AA	Pass AA
Blue on OrangeOR Orange on Blue	Blue: #0000ff, Orange: #ffa500	4.35:1	Fail AA	Pass AA
White on PurpleOR Purple on White	White: #ffffff, Purple: #800080	9.42:1	Pass AA	Pass AA
Green on RedOR Red on Green	Green: #008000, Red: #ff0000	1.28:1	Fail AA	Fail AA

Here are some tools that can be used for analyzing color contrast:

• Deque online color contrast checker
• Axe DevTools Browser Extensions: Axe DevTools for Chrome and Axe DevTools for Edge and Axe DevTools for Firefox
• Luminosity Colour Contrast Ratio Analyser — a web-based tool by Juicy Studio
• Colour Contrast Check — snook.ca

Note: Though the WCAG recommendation only applies to text, it would be best practice to also make sure that colors used for graphics such as icons have sufficient contrast.