Why Color Contrast Matters for Web Accessibility

I built the A11y Contrast Checker because I kept running into the same problem: I'd pick a color that looked fine on my calibrated monitor, then hear from someone that the text was basically invisible on their phone in bright sunlight. That's when it clicked—color contrast isn't theoretical, it's practical.

The Quick Version

Contrast ratio is just how different two colors are in brightness. Black on white gives you 21:1 (maximum). Same color gives you 1:1 (invisible). WCAG says normal text needs 4.5:1, large text can get away with 3:1, and AAA compliance wants 7:1.

Those numbers sound arbitrary until you try reading gray text on a phone at noon.

What Actually Happens

I have moderately trash vision (thanks, genetics) and I still catch myself squinting at low-contrast text. My dad, who's 70, literally cannot read text that I find acceptable. If your 65-year-old user can't read your prices, you've lost a customer.

The stats about color blindness are real—roughly 8% of men have some form of red-green color blindness. But the bigger issue is everyone trying to read on their phone in bright daylight. That's not a niche case, that's Tuesday.

The Mistakes I Keep Seeing

Placeholder text in forms is the big one. Designers love light gray because it looks clean. But #CCCCCC on white is 2.33:1. That's not just below the recommended 4.5:1—it's barely visible in any real lighting condition. If your form labels only exist in placeholder text, you've got a problem.

Brand colors in body text trips people up constantly. Your logo blue might be gorgeous, but #5499C7 on white doesn't cut it for reading paragraphs. The fix isn't abandoning your brand—it's having a text palette that actually works, with your brand as an accent color.

Color-only indicators are the one that got me. Red for errors, green for success—I've made this mistake myself. I'm deuteranopic to some degree, which means I mix up certain reds and greens. There are error states I literally cannot distinguish from success states if color is the only signal.

Why I Bother

Fixing contrast is one of the highest-leverage accessibility changes. It doesn't require re-engineering anything. You just pick different colors.

The WCAG numbers aren't perfect, but they're useful. 4.5:1 is where most people with moderately reduced vision can read without straining. AAA at 7:1 is better if you can get there, but AA is the floor.

Using the Checker

That's why I built the A11y Contrast Checker. Paste in your colors, see if they pass, check the color blindness simulations. Everything runs in your browser—nothing sent anywhere.

The color blindness simulation has saved me multiple times. Designs that looked fine to me turned out to be garbage for users with tritanopia.

Fixing contrast isn't about limiting your design. It's about making sure your design actually reaches the people you're trying to serve.