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 Yellow
Yellow on Black
Black: #000000,
Yellow: #ffff00
19.56:1 Pass AA Pass AA
Blue on Orange
Orange on Blue
Blue: #0000ff,
Orange: #ffa500
4.35:1 Fail AA Pass AA
White on Purple
Purple on White
White: #ffffff,
Purple: #800080
9.42:1 Pass AA Pass AA
Green on Red
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:

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.