Check text contrast at 4.5:1 or more
Body text needs a contrast ratio of at least 4.5:1 against its background, and large text 3:1. Light grey on white looks calm in a mockup and fails in sunlight.
Why it matters
Contrast is what makes text readable: on a cheap screen, at low brightness, in sunlight, or for someone whose eyes are older or weaker than the designer’s. Light grey text looks calm and refined in a mockup on a good monitor, and turns into a smudge on a phone outside.
How to do it
- Body text needs a contrast ratio of at least 4.5:1 against its background (WCAG 2.2, 1.4.3, level AA).
- Large text needs 3:1: 24px and up, or 18.7px and up when bold.
- The edges of controls, like a field’s border, and icons that carry meaning need 3:1 too (1.4.11).
- Check placeholder text and muted helper text; they fail most often.
- Measure, don’t eyeball. Browser dev tools show the ratio in the color picker, and WebAIM’s checker takes any two colors.
- Put the passing grey in a token, so nobody picks a lighter one by eye. On this site the muted grey is
#6c6c75, 5.2:1 on white.
When it bends
Disabled controls, decorations and logos are exempt. For long reading, aim higher: 7:1 is the AAA level for body text.