How to Check Color Contrast for Accessibility
Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Millions more have low vision, aging eyes, or are viewing screens in bright sunlight. If your text does not have enough contrast against its background, these people cannot read it.
Color contrast is not just a nice-to-have — it is a core accessibility requirement.
What WCAG requires
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background:
| Level | Normal text | Large text | Non-text UI |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | — |
"Large text" means 18px bold or 24px regular and above.
The contrast ratio ranges from 1:1 (no contrast — white on white) to 21:1 (maximum contrast — black on white).
How to check contrast
- Select your colors — enter the foreground (text) and background colors using HEX codes, RGB values, or color pickers.
- Check the results — the tool instantly shows the contrast ratio and whether your combination passes WCAG AA and AAA for both normal and large text.
- Adjust if needed — if the contrast fails, darken the text or lighten the background (or vice versa) until you pass the required level.
Common contrast mistakes
Light gray text on white — #999999 on #ffffff has a ratio of only 2.8:1. This fails WCAG AA. It might look "clean" to a designer with perfect vision, but it is unreadable for many people.
Colored text on colored backgrounds — a blue button with white text often passes, but a green button with white text may not. Always check — you cannot judge contrast ratio by eye.
Placeholder text — form field placeholders are notoriously low-contrast. While WCAG does not strictly require placeholders to meet contrast ratios, users still need to read them.
Dark mode — designers often use medium gray text on dark gray backgrounds for a "subtle" look. This frequently fails contrast checks.
Tips
- Check every text/background combination — do not assume. Even experienced designers are surprised by which combinations fail.
- Test both themes — if your site has light and dark modes, check contrast in both. A color that works on white may fail on dark gray.
- Use your brand colors wisely — if your brand blue fails as text color, use it for larger elements (buttons, headers) where the large text threshold (3:1) applies, and use a darker shade for body text.
- Do not rely on color alone — in addition to sufficient contrast, never convey information by color alone. Use icons, text labels, or patterns alongside color to ensure everyone can understand the content.
Frequently Asked Questions
What contrast ratio should I aim for?
For normal text, aim for at least 4.5:1 (WCAG AA). For large text (18px bold or 24px regular), 3:1 is sufficient. For the highest accessibility standard (AAA), aim for 7:1 for normal text.
Does this only apply to text?
No. WCAG 2.1 also requires sufficient contrast for UI components and graphical objects (icons, form borders, focus indicators). The minimum for non-text elements is 3:1.
What about dark mode?
Dark mode needs the same contrast checks. White text on a dark background often passes easily, but gray text on a dark gray background frequently fails. Test both modes.
Is color contrast a legal requirement?
In many jurisdictions, yes. The ADA (US), EN 301 549 (EU), and similar laws require digital accessibility. WCAG compliance is the recognized standard for meeting these requirements.