Your Grey Text is Illegal (Why Contrast Ratios Matter)

I love light grey text (#999).

It looks so sleek on my 4K monitor in a dark room. It looks elegant.

But last summer, I was trying to check a bus schedule on my phone while standing in direct sunlight, and I realized something: I couldn't read a damn thing.

The "Next Bus" time was in a polite, subtle grey. The designer probably thought it looked clean. I missed my bus.

That is annoying. But for a business, it's dangerous.

The Lawsuit Check

I had a client a few years ago—mid-sized e-commerce, sold camping gear—who ignored this.

They got hit with a demand letter. A customer couldn't read the checkout fields. The claim cited the ADA (Americans with Disabilities Act).

It wasn't a scam. It was a valid point. Their inputs were light grey on a white background. To anyone with slightly imperfect vision (or just a cheap monitor), the fields were invisible.

The Magic Number is 4.5

You don't need to be a lawyer. You just need to know one number: 4.5.

The Web Content Accessibility Guidelines (WCAG) say your text needs a contrast ratio of 4.5:1 against the background.

• 3:1? Illegal (mostly).
• 4.5:1? Safe.
• 7:1? Gold standard.

That pastel blue button you love? The one with the white text?

I guarantee you it's a 2.5:1. It fails.

Don't Use Pure Black (Weird, I Know)

Your instinct is "Okay, fine. I'll make everything #000 Black on #FFF White."

Don't do that either.

Pure black on pure white creates a "vibrating" effect for people with astigmatism. It's too harsh. It hurts to read for more than a minute.

You want a Dark Grey (#222) or a Navy Blue. It softens the blow without failing the contrast test.

Trusting Your Eyes vs. The Math

Here is the annoying part: Your eyes lie.

You cannot "eyeball" contrast. You will think a color combination looks legible, but the math will say "Fail."

I got tired of guessing, so I built the Axonix Contrast Checker.

It's not fancy. You paste two colors. It yells PASS or FAIL.

I check every single palette I design now. It takes five seconds.

Quick Fixes (That Don't Ruin the Vibe)

You don't have to make your site look ugly to make it accessible.

1. If you have orange buttons: Don't use white text. Use dark text. It actually pops more.
2. If you have a grey footer: Bump the hex code from #999 to #666. It's still grey, but people can actually read the copyright date.
3. If you have text on images: Put a black overlay behind it (bg-black/50). Always. Captions are useless if the image has a white cloud behind the letters.

Design isn't just about making things pretty. It's about letting people use the thing you built. Even if they're standing in the sun.