Contrast is the measurable difference between elements — in colour, size, or weight. It creates hierarchy (what to look at first) and determines legibility (whether users can read text at all). WCAG defines minimum colour contrast ratios: 4.5:1 for normal text, 3:1 for large text. Most contrast failures come from aesthetics overriding legibility.
Every decision about colour, size, and weight in a design is a decision about contrast. Dark text on a light background is high contrast. Light grey text on white is low contrast. A large bold headline above small body text is contrast. A 14px headline above 13px body text is almost none.
Contrast does two things at once. It communicates hierarchy — what's more important, what's secondary, where to look first. And it determines legibility — whether users can actually read the content at all. These two functions are separate but related. A design can have excellent hierarchy through contrast while still failing on legibility. And a design with perfectly accessible colour contrast can still have no visual hierarchy if everything is the same size and weight.
Most contrast problems in product design come from one of two places: aesthetics overriding legibility (light grey text that looks elegant but can't be read), or hierarchy never being considered (everything the same visual weight, nowhere for the eye to land first). Both are fixable — and both have a significant impact on how effectively users can use what you build.
“Contrast is only contrast if there's something for it to contrast against. A bold headline on a page of bold text isn't hierarchy — it's noise.”
WCAG contrast ratios are the clearest objective standard in design. Below 4.5:1 for body text, a meaningful portion of your users will struggle to read what you've written. The standard isn't a bureaucratic rule — it's a threshold below which the text starts disappearing for real people.
The interactive checker below lets you try different text colour and background colour combinations and see the contrast ratio live. Try the common mistakes first — light grey text on white, blue text on a light blue background, white text on yellow. Then try finding combinations that pass.
Grey-on-white is the most common contrast failure in modern UI. It looks clean and minimal — but for a significant percentage of users, especially on low-quality screens, in sunlight, or with ageing eyesight, it simply disappears. The WCAG threshold of 4.5:1 is not where text becomes comfortable to read. It's where text becomes readable at all for most people. Comfortable is usually higher.
Both product cards below contain identical information. Price, rating, title, description, CTA — everything is the same. The bad version uses the kinds of subtle, low-contrast choices that get made when designers prioritise a muted aesthetic over legibility. The good version keeps the same colour palette but ensures text meets the 4.5:1 minimum. The improvement isn't dramatic — but the difference in readability is significant, especially on a phone screen in daylight.
The grey description text, pale rating, muted price, and washed-out button text all fail WCAG AA. On a bright screen or for users with low vision, significant portions of this card are effectively invisible.
Same colours, same layout. Category text is deeper indigo, body text is dark slate, the price is near-black, and the button is a rich dark purple with white text. Everything passes AA.
The lesson from this comparison isn't that you need to use black text on white. It's that whatever colour combination you choose, the contrast ratio needs to be high enough that the text is readable for users who aren't you — viewing it on a different screen, in different lighting, with different eyes. Testing your colour choices against the WCAG threshold takes thirty seconds and prevents a class of usability failures that affect millions of people.
Contrast problems accumulate gradually. A brand colour gets applied as text on a light background — the design looks fine on a calibrated monitor. A muted grey gets used for secondary text to “not compete” with the primary content. A button gets lightened to feel less aggressive. Each decision seems reasonable in isolation. Together they produce an interface that is technically functional but practically difficult to use.
The simplest habit is to check contrast ratios before shipping any text. Browser devtools, Figma plugins, and free web tools all calculate ratios in seconds. The check takes less time than the decision to use the colour did.
W3C Web Accessibility Initiative (2018). Web Content Accessibility Guidelines (WCAG) 2.1. w3.org/WAI. · Arditi, A., & Cho, J. (2005). Serifs and font legibility. Vision Research, 45(23). · WHO (2023). Blindness and vision impairment. World Health Organization.