Contrast ratio is the measured difference in luminance between two colors, expressed as a ratio like 4.5:1 or 7:1. White text on a black background is 21:1 (maximum). Light gray text on a white background might be 2:1 (nearly unreadable). WCAG 2.1 requires a minimum of 4.5:1 for normal text and 3:1 for large text.
The "light gray text on white background" trend that swept web design around 2015-2020 was an accessibility disaster. It looked sleek in Figma on a retina display in a dark room. In the real world — on budget laptops, in sunlit offices, for anyone over 40 — it made pages unreadable. We still see this in 30-40% of landing pages we audit.
Contrast beyond text
Contrast ratio isn't just about body copy. Your CTA button needs sufficient contrast against its background AND the button text needs contrast against the button color. A white button with light yellow text? That's a conversion killer hiding in plain sight. Form field borders need enough contrast to be visible. Error messages need to be distinguishable from regular text.
Use your browser's dev tools or a contrast checker to verify. Fix body text first (biggest readability impact), then CTAs (biggest conversion impact), then secondary elements. It's one of the highest-ROI design changes you can make — better readability, legal compliance, and often measurably higher conversions from a single CSS change.