Text does not have enough contrast

Why it matters

Low-contrast text is hard to read for people with low vision, in sunlight, or on a worn-out screen. AA needs 4.5:1 for normal text and 3:1 for large text (24px, or 19px bold).

How to fix it

Darken the text or lighten the background until the ratio passes. The Colour Studio suggests the nearest colour that keeps your hue.

/* Before: 2.8:1 */
color: #999999; background: #ffffff;

/* After: 7:1 */
color: #595959; background: #ffffff;

Related rules

• Text sits over an image or gradient (WCAG 1.4.3)
• Text misses the enhanced (AAA) contrast level (WCAG 1.4.6)
• Interface component or border has low contrast (WCAG 1.4.11)
• Link is only distinguished by colour (WCAG 1.4.1)