Switch color mode
Home Blog Why Color Contrast Matters for Low Vision Accessibility
Picture someone trying to pay a bill online. They have low vision, they may be leaning in towards the screen, zoomed to 300%, screen brightness up.
Shani Jayant
July 1, 2026
They find the amount. They find the form. Then they get to the button. It’s there, pale gray text on a slightly-less-pale gray fill, technically present, and they cannot tell whether it’s the button they need or one that’s switched off. So they guess. Or they zoom further. Or they give up and call someone.
The product is asking the person to do the work the design should have done for them.
That is what low color contrast does, and it is still the most common accessibility problem on the web. Low-contrast text, below the WCAG 2 AA thresholds, appears on 83.9% of home pages, according to the 2026 WebAIM Million report — up from 79.1% the year before, and ahead of missing alt text, missing form labels, and empty links. A huge portion of the web is making text harder to read than it needs to be.
Getting this right is not complicated. But it does ask teams to stop treating contrast as a visual preference and start treating it as part of whether the product works at all.
Color contrast is the difference between what sits in the foreground and what sits behind it — most often text and background, but also buttons, icons, focus states, charts, warnings, form fields, anything someone needs to perceive in order to act.
I personally love color. It tells a story, creates structure, builds recognition, sets a mood. But color also has a job. When contrast is strong enough, that job happens quietly- people don’t think about it, they just read, tap, move, choose, continue. When contrast is too low, the job moves from the design onto the person. Now they squint, zoom, guess, ask someone, or leave. And it isn’t only people with low vision who feel it. Anyone with a migraine, anyone in bright sunlight, anyone tired at the end of a long day reads more easily when contrast is strong. Designing for the people who need it most tends to make the product better for everyone.
Low vision is not one thing. It can mean reduced central vision, reduced peripheral vision, blurriness, sensitivity to glare, and often more than one at once.
It also affects a far larger group than some folks may realize. Many of the people who rely on good contrast would never describe themselves as blind or low vision. They may be aging into it gradually- reaching for readers, holding the phone a little further away, finding screens harder than they used to be- without a diagnosis or a label. They don’t think of themselves as part of this conversation, but they are exactly who it’s about.
When contrast is good, a page feels calm and usable: the structure makes sense, buttons are easy to find, fields are clear, a warning actually reads as a warning. When it’s poor, the whole experience turns uncertain. Is that text disabled or active? Is that a link? Did the button change when I tapped it? Did an error just appear? Is that chart showing three categories or five? The person is left interpreting the interface instead of using it. That interpretation is effort. The same screen can be fine in the morning and unusable in afternoon glare, so the experience isn’t even stable from hour to hour. And the cost isn’t only that someone gives up and leaves. Straining to parse low-contrast screens for any length of time can mean headaches and fatigue, which for someone doing this all day at work means being less able to do the job at all.
WCAG gives teams a shared way to measure contrast, and that matters- it takes the decision out of personal taste. For most body text, the Level AA minimum is 4.5:1. For large text, it’s 3:1. AAA asks for 7:1 on normal text. When a color choice starts drifting in the wrong direction, those numbers are something concrete to point at.
But a passing ratio is a measurement and not an experience. A color pair can clear the threshold and still fail in the real product. Text sits on top of a photo. A button reads fine in its default state and nearly vanishes when it’s hovered, focused, or disabled. A set of chart colors each pass on their own but blur together as a group. A thin icon is technically visible but doesn’t register fast enough to be useful. And contrast isn’t only about body text, it’s controls, focus states, fields, graphs, error messages, every cue that tells someone what’s happening and what to do next.
So run the checker. Then keep going. Look at the interface on real devices. Try it in bright light and low light. Zoom in. View it in grayscale. Check every state, not just the perfect one in the design file. A contrast checker can tell you whether two colors meet a ratio. It can’t tell you whether someone found the button or finished what they came to do. That’s the part that matters, and it’s the part only a person can tell you.
Get the basics right before anything clever:
Check contrast in the design, not after build, and check it everywhere, not just body text: large text, buttons, icons, form fields, focus states, charts, and the key interface states. Be especially wary of pale-on-pale: light gray on white, yellow on white, light green on gray, tinted text on tinted backgrounds. It can look quietly elegant in a design review and disappear entirely for someone with low vision.
Don’t put text over a busy image unless there’s real separation: use an overlay or a solid background, and judge it in the actual component, not the best crop. Don’t let color carry meaning on its own, either; pair it with text, shape, an icon, a label, or position. If the meaning vanishes in grayscale, you’ve asked color to do too much.
Test every state: default, hover, focus, selected, disabled, error, success, empty, loading. A lot of contrast problems hide in the states that get the least design attention. And test in real conditions: on a phone, with the brightness down, outside, in dark mode and light mode, glancing quickly rather than studying carefully.
Where you can, give people control. Some need higher contrast, some need less glare, some want light-on-dark and others want dark-on-light. No single setting serves everyone. (Our own site offers three contrast modes, as one example of building that choice in.) But controls are only a starting point. The only way to know whether they work is to put them in front of people with low vision before the decisions are locked, while what they tell you can still change the design.
Because that’s the standard worth holding ourselves to: if someone cannot understand what you designed, the design is the problem.
