Accessible color design isn't just a nice-to-have — it's essential for creating products that work for everyone. About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Many more have low vision or read their phones in bright sunlight. Good contrast ensures your content is readable by all.
In this guide, we'll break down the WCAG standards, explain how contrast ratios work, and give you practical tips for designing accessible color schemes.
What is Contrast Ratio?
Contrast ratio measures the difference in luminance (brightness) between two colors, typically text and its background. The ratio ranges from 1:1 (same color, zero contrast) to 21:1 (pure white on pure black).
It's calculated using a formula based on relative luminance — how bright a color appears to the human eye. Green contributes most to perceived brightness, blue the least, which is why blue text on black can be hard to read even though the hue difference seems obvious.
WCAG Standards at a Glance
The Web Content Accessibility Guidelines (WCAG) define two levels of contrast compliance:
| Element | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt+ / 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
Why Aim for AA vs AAA?
WCAG AA is the legal baseline in many regions (EU's EN 301 549, US Section 508, Canada's AODA). AAA is a higher standard that's harder to meet — many brand colors simply can't reach 7:1 on white. For most products, AA compliance is the practical target, with AAA as a stretch goal for body text where possible.
Common Accessibility Mistakes
1. Light Gray Text on White
This is the #1 culprit. Designers love "subtle" gray text for secondary info, but #999 on white is only about 2.8:1 — well below the 4.5:1 minimum. If you must use light gray, make sure it's truly decorative or non-essential. For important secondary text, use a darker gray like #666 or #555.
2. Color as the Only Indicator
"The red button is delete, the green one is save" — that's a problem for color-blind users. Always pair color with another cue: iconography, text labels, patterns, or position. Error states should have an icon and message, not just a red border.
3. Low-Contrast Hover States
Buttons look fine in their default state but the hover/active state drops contrast. Always test all interactive states — default, hover, active, focus, disabled — for contrast.
4. Pure White Text on Bright Colors
White text on bright colors like #6366f1 (indigo) looks great but might fall short. Let's check: white (#ffffff) on indigo (#6366f1) has a contrast ratio of about 4.0:1 — close but below 4.5:1 for body text. For buttons and headlines (large text), it passes AA at 3:1. Just be aware of the distinction.
How to Check Contrast
There are several easy ways to test contrast ratios:
- Use our Contrast Checker — plug in any two colors and get an instant WCAG pass/fail result
- Browser DevTools — in Chrome DevTools, inspect text elements and the color picker shows contrast ratio
- Extensions — tools like axe DevTools or Wave can scan whole pages for contrast issues
- Grayscale test — convert your design to black and white. If it's hard to read in grayscale, the contrast is too low
Designing Accessible Color Palettes
Start with Value Contrast
Here's a trick: design your palette in grayscale first. Get the value relationships right — dark enough text, light enough backgrounds, clear hierarchy — then add color on top. If your design works in grayscale, it will pass contrast checks and be readable by everyone.
Use Darker Shades for Text
Your brand color might be a bright blue, but that doesn't mean text needs to be the same blue. Create a darker version of your brand color specifically for text links. It will still read as "your brand" but will be much more readable.
Test with Real Content
Contrast tools test pure color swatches against each other. Real-world factors like font rendering, anti-aliasing, and font weight affect readability too. Always test with actual text at actual sizes on actual screens.
Consider Color Blindness
Contrast ratio is about luminance, not color difference, so it already helps with many forms of color blindness. But you should also check that color-coded information doesn't rely on hue alone. Use tools like Coblis or Color Safe to simulate how your design looks to people with different types of color vision deficiency.
Accessible Dark Mode
Dark mode has its own accessibility challenges. Pure black (#000000) backgrounds with pure white (#ffffff) text have maximum contrast (21:1) but can cause eye strain and halation for some users, especially at night. A better approach:
- Use a dark gray like #0f172a or #18181b instead of pure black
- Use off-white text like #e2e8f0 instead of #ffffff
- Make sure body text still meets 4.5:1 (it will — #e2e8f0 on #0f172a is about 14:1)
- Reduce the number of saturated accent colors — they vibrate more on dark backgrounds
The Business Case for Accessibility
Beyond the ethical and legal reasons, accessible design is just good design. Better contrast means your content is more readable in all conditions — bright sunlight, low-quality screens, old monitors, glanceable moments. Designing for the edges improves the experience for everyone.
Ready to check your colors? Use our Color Contrast Checker to test any pair against WCAG standards.