How Low Contrast Quietly Undermines Customer Confidence
Black and White Became Shades of Gray
In the early days of the Internet, everything was black and white. Actually, no, but black text on a white background was a common, and a bit stark, default mode for many websites.1 Over time though, web design became more sophisticated, and it became popular to use shades of gray text on white or even some off-whites for backgrounds. On the whole, this was a welcome move. It looked more modern, felt less stark, and was often easier on the eyes.
Like many things in design, though, a good idea can be pushed too far.2 The pursuit of a softer, more modern look sometimes came at the expense of readability.
How Much Contrast Is Enough?
So how do we know when modern design has crossed the line from elegant to difficult to read?
The Web Content Accessibility Guidelines, commonly known as WCAG, establish minimum contrast ratios intended to make text readable for more people.
Under WCAG Level AA, normal text requires a contrast ratio of at least 4.5:1. Large text requires at least 3:1.
Caveat
The WCAG provides guidelines. They are mathematical calculations, and do not always provide the best recommendations in certain situations. It is still ultimately up to the human designer to exercise their judgement.
What the Audit Discovered
One of the first things that caught my attention during the audit3 was the contrast used in the hero section. Nothing looked obviously wrong at first glance. In fact, the overall effect was quite very sharp. But the more I looked at it, the more I realized the text was struggling against the background image to be noticed.
I recommended the following: Use a lighter gray text against a darker background image, and increase the font size. Remember that normal text should meet at least a 4.5:1 contrast ratio. In the version I audited, parts of the heading dropped as low as 2.90:1. In my revised version, after increasing the contrast, the text ranged between 6.15:1 and 9.96:1, comfortably exceeding the recommended minimum. The increased font size that was used did not change the technical WCAG measurement, but I felt it still helped make the text more readable.4
Before & after
The difference contrast makes
The design barely changes. The reading experience changes completely.
Original
Needs attention
Some of the text falls below the AA requirement.
Corrected
Passes comfortably
Every measured color clears the AA requirement.
Who Poor Contrast Affects
Poor contrast makes reading more difficult than it should be.
- Older adults experiencing age-related vision changes.
- People with low vision.
- People viewing a screen in bright sunlight.
- Users with low-quality or dim displays.
- Anyone experiencing temporary visual fatigue.
Why This Matters
People don't usually think:
"This website has poor contrast."
They think:
"This site is hard to read."
Poor readability adds effort and friction, and every unnecessary bit of effort reduces confidence.
Poor Contrast Is Surprisingly Common
Low-contrast text is one of the most common accessibility problems found on websites.
WebAIM's 2026 Million report found detectable low-contrast text on 83.9% of the one million home pages it automatically evaluated, making low contrast the most common accessibility error identified in the study.5
Readable Design Inspires Confidence
Every improvement that removes unnecessary friction gives your visitors one more reason to stay, read, and trust your business. Professional websites don't ask visitors to work harder than they have to.
Footnotes
- To be completely fair, most of the really, really early Internet was a free-for-all with any color used on any other color. Vibrant—one could even say, garish or outlandish—color combinations were fairly commonplace. Ah, the headiness of the early days! ↩
- The writer, Douglas Adams may have predicted the end stage of this design trend with this quote from the book The Restaurant at the End of the Universe, “It’s the wild colour scheme that freaks me,” said Zaphod whose love affair with this ship had lasted almost three minutes into the flight, “Every time you try to operate on of these weird black controls that are labelled in black on a black background, a little black light lights up black to let you know you’ve done it. What is this? Some kind of galactic hyperhearse?” ↩
- As explained in the first post in this series, the website I audited belongs to my sister, who runs the IT consulting business Pulse IT Advisors. She gave me permission to share what I found and the improvements I recommended. ↩
- I asked an AI to create this infographic. Ironically—and perhaps proving the point—it initially chose text colors that did not meet the WCAG 4.5:1 contrast ratio minimum requirement. ↩
- WebAIM: Contrast and Color Accessibility ↩
Would Your Website Pass a Professional Audit?
A professional-looking website can still hide dozens of small issues that quietly reduce its effectiveness. Discover what a professional website audit might reveal.
When First Impressions Arrive Too Late
The hero image is often the first thing visitors see—and the last thing some browsers discover. Here's why that matters for your business.