# Check text contrast at 4.5:1 or more

UI Tip #004 · UX & accessibility · 2026-10-12 · https://ui.praveenjuge.com/4/text-contrast

> 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.

*Figure: An article card whose body text darkens from faint grey to legible text as its contrast ratio rises from 1.6:1 to 7:1.*

## 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.

## Sources

- [Contrast (Minimum), WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
- [Non-text Contrast, WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
- [Contrast Checker, WebAIM](https://webaim.org/resources/contrastchecker/)

---

From [UI Tips by Praveen Juge](https://ui.praveenjuge.com). Free to share, with a link back to https://ui.praveenjuge.com/4/text-contrast.