Why it matters for a small business site
Low-contrast text is hard to read for people with low vision, for many older visitors and for anyone using a phone in sunlight. If people can’t read your offer or find your button, nothing else on the page matters.
How to check yours
- Put your text colour and background colour into a contrast checker, such as WebAIM’s, to get the ratio.
- Check the hard cases: light grey text, text on photos, white text on your brand colour, and placeholder text in forms.
- Look at the page on a phone outdoors.
What good looks like
At least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold): the WCAG AA level. Button edges, form field borders and icons people need should reach 3:1 against what’s around them.
Common mistakes
- Light grey body text on white because it “looks cleaner”.
- White text on a pale brand colour such as yellow, light orange or mint.
- Text placed over photos without a darker layer behind it.
- Meaning shown only by colour, like an error in red with no icon or words.