Text that is hard to read fails real users and fails accessibility audits. Color contrast is measurable, and hitting the standard is straightforward once you know the numbers. Here is what to aim for and how to check.
The ratios that matter
WCAG defines a contrast ratio between text and its background, from 1:1 (invisible) to 21:1 (black on white).
- AA (the common target): at least 4.5:1 for normal text, 3:1 for large text (about 24px, or 19px bold).
- AAA (stricter): 7:1 for normal text, 4.5:1 for large text.
Most projects target AA. AAA is worth it for body-heavy content like documentation.
Check a pair in seconds
- Open the WCAG Contrast Checker.
- Enter your text color and background color.
- See the ratio and whether it passes AA and AAA for normal and large text.
Where contrast usually fails
- Light gray text on white, common in “subtle” UI, often falls below 4.5:1.
- Placeholder text in form fields.
- Brand colors used as text on white (many greens and yellows fail).
- Text over images without an overlay.
A frequent fix is to darken the text a little or add a semi-transparent overlay behind text on images.
Large text gets a break
Bigger text is easier to read, so it only needs 3:1 for AA. If a color is close but fails for body text, it may still pass for headings.
Related tools
- Need to tweak a color to pass? Convert and adjust it with the Color Converter.
- Building an accessible palette? Use the Color Palette Generator.
- Picking a color from a design? Try the Image Color Picker.
Target 4.5:1 for body text, check every text-on-color pair, and darken or overlay where it fails.