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.

The most common color combinations that fail

After auditing about fifty client sites over the past few years, I started noticing the same failures pop up again and again. Here are the ones that trip people up most:

Light gray text on white backgrounds. This is the number one offender. Designers pick #999 or #aaa because it looks "clean" and "modern." On a high-end monitor in a dim room, it looks fine. On a phone in daylight, or for anyone over forty, it disappears.

Pastel buttons with white text. Every SaaS landing page has this problem. Soft blue, soft green, soft purple buttons with white text on top. They almost always fail the 4.5:1 ratio. The fix is simple: use darker button colors or switch to dark text on the button.

Images with text overlays and no contrast layer. You put a hero image on your landing page and slap white text on top. The left side of the image is dark, so it looks great. The right side has a bright sky, and the text vanishes. A semi-transparent dark overlay behind the text fixes this every time.

Footer text in muted colors. Footer links and copyright text are often the lightest text on the page. They sit on dark backgrounds, which helps, but designers sometimes pick colors that look sophisticated on their calibrated displays and read as invisible on everything else.

Testing your site takes five minutes

You don't need expensive software or a consultant. Here's what I do when I audit a new project:

1. Open the Contrast Checker in a browser tab.
2. Walk through your site page by page. Pick the text color and background color of every distinct text style: headings, body text, links, buttons, footer text, form labels, placeholder text.
3. Check each pair. If any pair fails 4.5:1 for normal text or 3:1 for large text (headings over 18px bold or 24px regular), change the color.
4. Don't forget hover states. Some sites change link color on hover to something that fails the contrast check.

Chrome DevTools also has a built-in accessibility audit. Open DevTools, go to the Lighthouse tab, and check the "Accessibility" category. It catches contrast issues automatically.

Why this matters beyond lawsuits

The ADA lawsuit thing gets attention, but most people fix contrast because of a simpler reason: their users can't read the site.

About 300 million people worldwide have some form of color vision deficiency. That's roughly 1 in 12 men and 1 in 200 women. Adding low vision, aging eyes, and situational factors like bright sunlight or cracked phone screens, and you're looking at a significant chunk of your audience struggling with your design choices.

Good contrast also helps everyone, not just people with vision issues. Readable text means faster scanning, less eye strain, and lower bounce rates. There's no downside to getting this right.

The business case, if you need one

I had a conversation with a product manager who pushed back on spending time on contrast fixes. "Our users are all young developers," he said. "They don't have vision problems."

Two things about that: first, developers spend eight to twelve hours a day staring at screens. Their eyes are tired by 4 PM. What looks fine at 9 AM looks terrible at 4 PM. Second, "our users are young" is a bet that ages poorly every single year.

After we improved the contrast across their dashboard, their support tickets about "can't read the settings page" dropped by forty percent within a month. That's not an accessibility win. That's a product win.

Quick wins that don't ruin your design

You don't have to make everything black and white. Small adjustments go a long way:

• Change #999 to #666 for secondary text. Same gray feel, actually readable.
• Add bg-black/50 or bg-black/60 behind any text that sits on an image.
• For colored buttons, try darkening the button color by 20-30% instead of changing the text color. The button keeps its personality and gains readability.
• Test your palette on a phone screen in bright light before committing. What looks good on a 27-inch monitor in a dark office will look different on a 6-inch phone screen.

Accessibility isn't a feature you bolt on at the end. It's a quality bar that makes every part of your site work better for everyone. Start with contrast, because it's the easiest fix with the biggest impact.