What Color contrast means
Low-contrast text is hard to read for many people, especially on phones in sunlight or for those with low vision. WCAG sets minimum contrast ratios. Checking brand colors early avoids painful redesigns later.
Why it matters for your website
Light gray text on white might look sleek in a mockup, but many visitors struggle to read it, especially on phones in sunlight or people with low vision. Poor contrast hurts readability, accessibility and conversions. Fixing it is usually just a color change.
Example
A spa's website uses pale pink text on a cream background. After switching to a darker shade that meets WCAG AA, the booking button and service descriptions are easy to read.
Tips
- Check text and button colors with a free contrast checker before launch.
- Aim for at least WCAG AA contrast: 4.5 to 1 for normal text.
- Test light text placed over photos, since busy images reduce contrast.
Common mistakes
- Using placeholder-gray text for important content like prices or labels.
- Relying on color alone, such as red text, to show form errors.
Questions about Color contrast
What is Color contrast?
The difference in brightness between text and its background, which affects readability.
What contrast ratio does WCAG require?
For Level AA, normal text needs at least 4.5 to 1 and large text needs at least 3 to 1. Level AAA raises those to 7 to 1 and 4.5 to 1.
How do I check color contrast on my website?
Use a contrast checker tool or your browser's developer tools, which can show the contrast ratio for selected text. Accessibility scanners also flag low-contrast text.
