The ratio that matters
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text means 24px regular weight or 18.66px bold. Those numbers aren't arbitrary. They're the threshold where text becomes reliably readable for people with moderately low vision.
Think of contrast like the lettering on a seed packet. If you can't read the label in the sunlight, the information is useless, no matter how well it was written.
Who this actually affects
Low vision affects roughly 1 in 12 people over age 65 and millions more at every age. Color vision deficiency (what most people call colorblindness) affects approximately 8% of men and 0.5% of women. Add in situational factors like screen glare, dim lighting, or an aging laptop display, and the population affected by poor contrast expands to include nearly everyone at some point.
Designing for contrast isn't designing for edge cases. It's designing for reality.
Where contrast fails most often
Placeholder text
Form placeholders are among the worst offenders. Browsers default to a light gray that fails contrast checks against white backgrounds. If your placeholder is your only label, you've got two problems, but the contrast failure is the one automated tools will catch first.
Disabled states
WCAG technically exempts disabled controls from contrast requirements, but that doesn't mean you should make them invisible. Users need to know a control exists even if they can't interact with it yet.
Text over images
Hero banners with white text over photographs are a gamble. Some areas of the image will provide enough contrast. Others won't. A semi-transparent overlay solves this, and it's the same technique we use in the Had A Farm footer when a background image is set.
Links within text
Links that rely solely on color to distinguish them from surrounding text need a 3:1 contrast ratio between the link color and the body text color, in addition to the 4.5:1 ratio against the background. An underline removes this requirement entirely, which is why we recommend keeping underlines on inline links.
Checking your work
You don't need to calculate contrast ratios by hand. Tools like eiSEO flag contrast failures automatically during site scans. Browser DevTools have built-in contrast checkers in the color picker. WebAIM's online contrast checker lets you test any two colors in seconds.
The important thing is to check early and check often. Catching a contrast failure in a design comp takes thirty seconds to fix. Catching it after the site launches takes a ticket, a developer, a deploy, and a whole lot of unnecessary back-and-forth.
Better contrast, better design
Here's the part that surprises people: improving contrast almost always improves the design. High-contrast text is more confident. It communicates hierarchy more clearly. It reads faster. The best typographic design in the world has always been high-contrast. Black text on white paper wasn't an accessibility accommodation, it was a design choice refined over centuries.
Your website deserves the same clarity. So do your readers.