A few months ago I was reviewing an old design of mine. Light gray text on a white background — very elegant, very minimalist. The problem: it was nearly unreadable. And I'm not exaggerating — look at this:
My 'elegant' gray from 2021
Can you read this comfortably?
A ratio of 2.85:1. The recommended minimum for normal text is 4.5:1. I, who considered myself a good designer, had spent months using a color that many people couldn't comfortably read.
Contrast is measured as a ratio between the luminosity of two colors. It ranges from 1:1 (two identical colors, literally invisible) to 21:1 (pure black on pure white, maximum possible contrast). WCAG, the web accessibility standard, defines two levels: AA (the acceptable minimum, 4.5:1 for normal text) and AAA (the ideal, 7:1 for normal text).
Large text needs less contrast because larger letters are easier to distinguish — 3:1 for AA and 4.5:1 for AAA. "Large" means 18px or more, or 14px if bold.
This gray text is very common in interfaces
This gray text is very common in interfaces
On the left, the #999999 gray I was using (and which is constantly used in placeholders, secondary text, captions). On the right, #595959 — noticeably darker, but it meets WCAG AA. If you want gray on white and want to meet the standards, you need at least #767676.
Try your own combinations here:
Sample text
This is an example of how the text will look with these colors.
The technical formula uses relative luminosity, which weights green more than red and blue (our eyes are more sensitive to green). A bright green appears more "luminous" to you than a bright blue even though they technically have the same value in their RGB channels. But you don't need to know the math — just use the tool.
The most common mistake I see is assuming that if light mode passes, dark mode also passes. It doesn't work that way.
Gray in dark mode
Can you read this comfortably?
This gray on an almost-black background has a ratio of 4.68:1. It passes AA, but just barely. And that same gray on pure black (#000000) goes up to 5.32:1. The difference between #000000 and #1a1a1a as a background significantly changes the contrast. Always verify both modes separately.
Another common mistake: brand colors that don't work as text. The corporate blue looked great in the logo, but does it work as a link color on a white background? Sometimes it doesn't. The solution is simple — slightly darken the color when using it for text. Nobody is going to notice that your blue went from #2563eb to #1d4ed8, but everyone will notice if they can't read the links.
When we design, we typically work on calibrated monitors, with good lighting, with perfect vision. But users read on screens with low brightness, in sunlight with glare, without glasses, with tired eyes. Eight percent of men have some form of color blindness. Adequate contrast isn't "for people with disabilities" — it's for everyone at some point during the day.
The time to check contrast isn't when the design is finished. It's when you're defining the color palette. My process now is: I choose the primary colors, I immediately check if they work as text on the main backgrounds, and if they don't work, I create darker variants (for light backgrounds) or lighter variants (for dark backgrounds). This avoids the awkward conversation of "the client wants exactly this blue but it doesn't meet accessibility."
If in doubt, increase the contrast. Text that's slightly darker than "aesthetically ideal" is infinitely better than text that someone can't read. And if a design "needs" low contrast to look good, the problem is with the design, not with the accessibility guidelines.
Bookmark the tool above. Use it before finalizing any color palette. Your future self will thank you.