Color Accessibility Is Not Optional — Here Is How to Get It Right

Last year I had a client whose website failed an accessibility audit because the button text was too light against its background. I had looked at that button a hundred times and thought it looked fine. But "looks fine to me" is not the standard that matters. That single failed audit taught me more about contrast than any tutorial ever could.

Why Contrast Ratios Exist

The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios to ensure text is readable for people with visual impairments. It is not just about blindness — low contrast affects anyone with aging eyes, screen glare, or even a cheap monitor with bad calibration.

A 4.5:1 ratio is the minimum for normal text (WCAG AA). For large text, 3:1 is acceptable. If you want to hit the gold standard of AAA, you need 7:1 for normal text. These numbers sound abstract until you realize that many popular color combinations — light gray on white, yellow on white, red on black — fail even the basic thresholds.

The Gray Trap

Here is a mistake I made repeatedly: I would pick a modern-looking light gray for body text because it felt softer and more elegant than pure black. What I did not realize was that the gray I chose (#999999) against a white background gives a ratio of just 2.8:1 — failing WCAG AA for normal text.

The fix was simple: I pushed the gray darker to #595959, which hits 7:1 and passes AAA. The design still looked clean, but now it was actually readable for everyone. A tool like ColorCraft's contrast checker makes this kind of mistake impossible to miss in real time.

Do Not Trust Your Eyes Alone

Human perception of contrast is weird. A thin font will look less readable than a bold font at the exact same color values. Colors that seem to pop on a large desktop monitor can disappear on a phone screen in sunlight. Your brain also auto-corrects colors based on surrounding context, which means you literally cannot trust what you see.

This is why I never ship a color combination without running it through a contrast checker. The math does not lie. If the ratio is below 4.5:1, it needs to change, no matter how good it looks to me personally.

Practical Tips I Use on Every Project

• •Always check contrast at multiple sizes — your heading might pass while your body text fails.
• •Do not rely on color alone to convey meaning. Add icons or labels for error states, success states, and links.
• •Test your palette with our color blindness simulator. Red-green combinations that look obvious to you might be invisible to someone with deuteranopia.
• •When in doubt, err on the side of darker text on light backgrounds. It is almost always safer.