Color Contrast Ratios Explained

ficklestudio26 · Facts checked October 15, 2026

Light gray text on white looks elegant and is hard to read. The Web Content Accessibility Guidelines put numbers on it.

Check your colors
Enter two colors and see their contrast ratio.
Open the tool →

The requirement

Success Criterion 1.4.3 in WCAG 2.1, at level AA, requires a contrast ratio between text and its background of at least 4.5:1 for normal text. For large text the ratio is 3:1. Large text means 18 point or larger, or 14 point and bold, which is roughly 24 px or 18.5 px. The ratios are not rounded, so a computed 4.499:1 does not pass.

The exceptions

Text in inactive interface elements, such as disabled buttons.
Pure decoration, or text that nobody can see.
Text that is part of a logo or brand name.

The stricter level

A higher level, AAA (criterion 1.4.6), asks for 7:1 for normal text.

Using it with a palette

When you build a palette, the text and background colors matter more than the other colors. Test the pairs you will really use, and darken the text or lighten the background until the ratio passes. Pale colors on white are the most common failures.