If some visitors squint at your text or miss your buttons entirely, color contrast is often the reason. This guide explains how contrast works, which WCAG ratios to hit, how to test them, and how to fix low-contrast designs without gutting your brand. You will leave with clear targets and a checklist.
Why Contrast Matters More Than Designers Expect
Contrast is the difference in lightness between text and its background. Low contrast doesn’t only affect people with visual impairments. It affects anyone on a phone in sunlight, on a cheap screen, or reading while tired. Grey-on-white text may look elegant in your design tool, then vanish on a real device.
The cause is usually that designers evaluate color on calibrated monitors in ideal light. Real reading conditions are far worse, so a margin of safety is not optional.
The WCAG Ratios You Need to Know
The Web Content Accessibility Guidelines (WCAG), published by the W3C, define contrast as a ratio between 1:1 (no contrast) and 21:1 (black on white). The key thresholds for the widely used AA level are:
| Element | Minimum ratio (AA) |
| Normal body text | 4.5:1 |
| Large text (about 24px, or 19px bold) | 3:1 |
| Icons and UI components (borders, form outlines) | 3:1 |
The stricter AAA level asks for 7:1 on body text. Aim for AA as a baseline; reach for AAA on long-form reading where you can.
How to Actually Test Contrast
Do not judge contrast by eye. Use a tool that calculates the ratio from your hex values.
- WebAIM Contrast Checker: paste two colors and get the ratio with pass/fail marks.
- Chrome DevTools: inspect any text element and it shows the contrast ratio directly.
- Browser accessibility audits in Lighthouse flag failing text automatically.
Test the actual colors from your live site, including hover and disabled states, which people often forget.
Fixing Low Contrast Without Losing Your Brand
You rarely need to abandon a brand color. You need to control where it appears.
- Keep a light brand tint for large backgrounds, but darken the same hue for text.
- Reserve the vivid brand color for large elements (headings, buttons) that only need 3:1, and use a darker neutral for body text.
- If a color must sit on a busy photo, add a solid or semi-opaque panel behind the text so the ratio is predictable.
A Real Example
A wellness brand used a soft mint green (#8FD1B0) for body text on white because it matched their logo. The contrast ratio was about 1.7:1, well below the 4.5:1 minimum, and unreadable on phones outdoors. We kept mint for the large headings and button fills, then switched body text to a deep charcoal (#2A2E2C) that still felt on-brand. Body contrast jumped above 12:1. The page kept its calm mint identity but became readable everywhere.
Common Mistakes and How to Fix Them
- Light grey placeholder-style text. Trendy but often fails. Darken it or reserve very light grey for genuinely secondary hints only.
- Relying on color alone. Red-only error text fails colorblind users. Add an icon or label so meaning survives without color.
- Forgetting UI components. Form field borders and toggle states also need 3:1, not just text.
- Text over images without protection. Contrast changes as the image changes. Add an overlay or panel.
- Ignoring hover and focus states. A button that meets contrast at rest may fail on hover.
Action Checklist
- Run body text through a contrast checker; require at least 4.5:1.
- Check large text and headings against 3:1.
- Verify form borders, icons, and buttons meet 3:1.
- Test hover, focus, and disabled states, not just default.
- Confirm no meaning is carried by color alone.
- Add overlays behind any text placed on photos.
Conclusion and Next Step
Accessible contrast is not a limit on design; it is a guarantee that your design actually reaches people. Start by testing your body text against 4.5:1 today. If it fails, darken the text while keeping your brand color for larger elements.
FAQ
What contrast ratio should I aim for?
At minimum, 4.5:1 for normal text and 3:1 for large text, which meets WCAG AA. Higher is better for long reading.
Does contrast apply to buttons and icons?
Yes. Interface components and their states need at least 3:1 against adjacent colors under WCAG so they remain distinguishable.
Can I use my brand color for text?
Only if it passes the ratio. If not, keep it for large headings or button fills and use a darker shade for body text.
Is light grey text ever acceptable?
For truly secondary hints at large sizes, sometimes. For body content it usually fails and should be darkened.
References
- Web Content Accessibility Guidelines (WCAG) 2.1, W3C (w3.org/WAI)
- WebAIM Contrast Checker (webaim.org)