How to Pick Accessible Colors for Your Website
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency (color blindness). If your website doesn't have sufficient color contrast, millions of users can't read your content — and you may also fail legal accessibility requirements. Here's how to pick accessible colors the right way.
What Is WCAG Color Contrast?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors:
| Level | Normal Text | Large Text (18px+ bold, 24px+) | Compliance |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | Legal requirement in many countries |
| AAA (enhanced) | 7:1 | 4.5:1 | Best practice — target this when possible |
Contrast Ratio Examples
| Text Color | Background | Contrast | AA Normal | AA Large |
|---|---|---|---|---|
| Black (#000) | White (#fff) | 21:1 | ✅ Pass | ✅ Pass |
| Dark gray (#666) | White (#fff) | 5.7:1 | ✅ Pass | ✅ Pass |
| Gray (#999) | White (#fff) | 2.8:1 | ❌ Fail | ❌ Fail |
| Light gray (#ccc) | White (#fff) | 1.6:1 | ❌ Fail | ❌ Fail |
| White (#fff) | Purple (#7c3aed) | 6.3:1 | ✅ Pass | ✅ Pass |
| White (#fff) | Orange (#f59e0b) | 2.1:1 | ❌ Fail | ❌ Fail |
💡 Quick Test: Look at the white-on-orange example above. Can you read it easily? That's a 2.1:1 ratio — too low for any WCAG level. Now imagine 1 in 12 of your male users trying to read that all over your site.
How to Check Color Contrast (Free Tools)
- Online: Use the DevTools color picker and contrast checker. Pick your text and background colors, and it instantly calculates the contrast ratio and shows WCAG pass/fail.
- Browser DevTools: In Chrome, inspect an element → click on the color swatch in Styles panel → Chrome shows the contrast ratio and AA/AAA compliance.
- Dedicated tools: WebAIM Contrast Checker, Stark plugin for Figma/Sketch, axe DevTools browser extension.
Common Color Accessibility Mistakes
- Gray text on white background — The #1 accessibility violation. "Designer gray" (#999 or #ccc) fails AA for normal text. Use at least #767676 for body text on white.
- Color as the only indicator — "Click the green button" or "fields in red are required." Colorblind users can't distinguish these. Add icons, labels, or patterns alongside color.
- Low-contrast placeholders — Form input placeholders often use light gray. WCAG requires placeholder text to meet the same contrast requirements as regular text.
- Text over images — A white headline over a photo with a bright sky will be unreadable. Always add a dark overlay or text shadow when placing text over images.
Accessible Color Palette Quick Rules
- Body text: #333 or darker on white (#fff). Never lighter than #767676.
- Links: Underlined + color that differs from body text. Blue (#1a73e8) is the most recognizable link color.
- Buttons: White text on a dark or saturated background (6:1+ ratio). Test with our contrast checker.
- Charts and graphs: Use patterns (dotted lines, crosshatch) in addition to color. ColorBrewer has colorblind-safe palettes.
- Error states: Red (#c62828) plus an icon (⛔) and text label. Never color alone.
Check Your Colors Now — Free
← Back to DevTools Blog
Pick colors, check contrast ratios, see WCAG pass/fail instantly.
Open Color Picker →