How to Check Color Contrast for Accessibility

I built the A11y Contrast Checker because I kept making the same mistake: picking colors that looked fine on my screen, then hearing from users that the text was unreadable on their devices. Turns out, my calibrated monitor is not representative of how everyone experiences my sites.

The Quick Version

WCAG contrast requirements:

• Normal text (under 18pt regular or 14pt bold): 4.5:1 ratio
• Large text (18pt+ regular or 14pt+ bold): 3:1 ratio
• Enhanced (AAA): 7:1 for normal, 4.5:1 for large

Those numbers matter because below 4.5:1, text becomes genuinely hard to read for people with less-than-perfect vision or not-quite-perfect lighting.

Using the Contrast Checker

The A11y Contrast Checker works like this:

Enter your foreground and background colors. The tool shows you the ratio immediately and tells you whether you pass AA, AAA, or fail.

Test your most critical combinations first: body text, headings, link text, buttons. These should all meet minimum requirements.

Look at the ratio itself, not just pass/fail. A 4.51:1 passes AA but has zero margin for error. 10:1 gives you breathing room when screens are dirty or lighting is bad.

Color Blindness Simulation

The tool also simulates how your colors look with different types of color blindness:

• Protanopia (red-blind)
• Deuteranopia (green-blind)
• Tritanopia (blue-blind)

This matters more than most designers think. Red-green color blindness affects about 8% of men. If your error state only uses red coloring and your success state only uses green, you've built something some users literally cannot distinguish.

Fixing Contrast Problems

When a combination fails:

Darken the text color. This is usually the easiest fix. Pure black on white is 21:1—more than enough for anything. If black feels too harsh, dark gray that passes 4.5:1 works.

Or brighten the background. On dark designs, make sure your background is dark enough relative to your text.

The suggestion feature in the tool gives you nearby colors that pass. Sometimes you can find something close to what you wanted that actually works.

Where Contrast Gets Tricky

Placeholder text in forms is notorious for failing. Designers love light gray because it looks clean. But #CCCCCC on white is 2.33:1. It fails spectacularly. Solution: use visible labels, and only use placeholder text for hints, not critical information.

Disabled states trip people up too. Very low contrast for disabled buttons might look "clean" but some users literally cannot see that something is disabled. Add icons or other indicators beyond just color.

Icons without text labels need color contrast for their visual element, plus accessible names for screen readers. Check both.

Making It Part of Your Process

Pick your color palette deliberately. Don't just choose colors that look good and then check if they pass. Build a palette where the combinations that matter all pass from the start.

If you use a design system, document which combinations are approved. Make it hard to accidentally use a failing combination.

The Payoff

Contrast is one of those things where the fix is cheap and the impact is high. You don't need JavaScript, you don't need complex components. Just pick colors that actually have contrast.

Your users with less-than-perfect vision will notice. They just won't know to thank you for it.