Why contrast and readability are quietly killing your website.

Nobody calls you to say your website was hard to read. They just close the tab. That light grey text on white, the paragraph that runs for six lines without a break, the heading that's technically readable but requires a squint — visitors encounter all of it in the first few seconds and make a decision you never see.

This post is about two things that most business websites get wrong without knowing it: contrast and readability. They're not design trends. They're the baseline conditions for your content to be understood at all.

The silent bounce problem

Bounce rate is where most people notice the symptom. Someone lands on your page and leaves immediately. The usual suspects — slow load time, wrong audience, bad ad targeting — get all the blame. But poor readability is just as common a cause, and it's invisible in your analytics.

There's no "left because it was hard to read" event in Google Analytics. You just see a short session and a bounce. Meanwhile the actual problem — grey text on a slightly-less-grey background, three-syllable words stacked into 40-word sentences — never gets investigated.

Those numbers aren't just an accessibility argument — they're a market-size argument. If your text is hard to read, you're filtering out a meaningful slice of every audience you've paid to reach.

What contrast ratio actually means

Contrast ratio is a number that describes how different your text colour is from its background. It runs from 1:1 (identical — completely invisible) to 21:1 (pure black on pure white — the maximum possible difference).

The calculation uses relative luminance — a measure of how much light a colour appears to emit. It's not just about how dark or light a colour looks to you; it accounts for how human eyes perceive different wavelengths. That's why a bright yellow text on white can look obvious but still fail contrast checks — yellow light and white light aren't perceptually different enough.

The difference in those two examples isn't dramatic. It doesn't make your site look clinical or ugly. It just makes it readable — which is what your content needs to be to actually do its job.

WCAG explained for humans

WCAG stands for Web Content Accessibility Guidelines. It's a set of internationally recognised standards published by the W3C — the organisation that defines how the web works. There are three conformance levels: A, AA, and AAA.

For most business websites, WCAG AA is the target. It's what's referenced in most accessibility legislation around the world and what Google's Lighthouse tool checks against.

WCAG isn't just about disability. Bright sunlight on a phone screen, a cheap monitor, tired eyes at the end of the day — these all reduce effective contrast for everyone. Meeting AA standards means your content stays readable under conditions you can't control.

The readability side

Contrast is about colour. Readability is about language. They're separate problems that often appear together.

The most widely used readability measure is the Flesch Reading Ease score — a formula that combines average sentence length and average syllables per word into a score from 0 to 100. Higher is easier to read.

• 90–100: Very easy — readable by an 11-year-old. Think instruction manuals and children's books.
• 60–70: Standard — readable by a 13–15 year old. This is the target for most business websites.
• 30–50: Difficult — academic or legal writing. Most corporate websites accidentally end up here.
• 0–30: Very difficult — professional journals. No business website should be here.

That last category sounds extreme, but it's more common than you'd think. Service pages loaded with industry jargon, hero sections that try to sound premium but read like a press release, about pages written for search engines instead of actual humans — these regularly score below 40.

Sentence length is the biggest lever. A 35-word sentence forces your reader to hold the beginning of the sentence in memory while they work through to the end. Most people don't — they skim, miss the point, or give up. Cutting long sentences in two is the single fastest way to improve readability with no loss of meaning.

5 mistakes most business sites make

1. Light grey text on white

This is the most common contrast failure on the web. Designers love it because it looks clean and subtle. Visitors experience it as text that requires effort to read. Any grey body text on a white background needs to be checked — most lighter greys fail AA.

2. Text over images without an overlay

Hero sections with text on top of a photo look great in mockups where the photo is carefully chosen. In practice, different screen sizes, different images, and different parts of the photo create wildly varying contrast. Without a dark overlay or a contrasting text shadow, this will fail.

3. Placeholder text that looks like real content

Form placeholders are almost always too light — they're designed to look secondary. But when visitors can't distinguish which fields are empty and which are filled, forms get abandoned. Placeholder text contrast is frequently overlooked in audits.

4. Long paragraphs with no break

A paragraph that runs for six or seven lines is a readability problem even if every sentence is perfectly clear. Visually, it signals "work" before the reader even starts. Breaking long sections into shorter paragraphs of 2–3 sentences reduces cognitive load without changing what you're saying.

5. Writing for yourself instead of your reader

This happens when the person writing the content knows the subject well. The vocabulary that feels natural to you — terms you use every day — may be opaque to a visitor who's shopping around and hasn't yet committed to understanding your industry. The fix is reading your copy out loud and noticing where you stumble.

How to check your site now

You don't need to go through your site page by page with a colour picker. There are two ways to get a complete picture quickly.

Automated Lighthouse audit — Google's Lighthouse (built into Chrome DevTools, or accessed via any PageSpeed tool) runs a colour contrast audit across your entire rendered page. It finds text elements that fail WCAG AA, tells you the exact foreground and background hex values, and shows you which element on the page is affected.

Flesch score analysis — There's no browser-based tool for this, but you can run the text of any page through a readability checker. The score tells you where you sit, the sentence heatmap shows you which specific sentences are dragging the score down, and you can rewrite them one by one.

Once you have your results, prioritise contrast failures first — they're objective pass/fail issues with clear fixes. Then work through readability by sentence: the heatmap will highlight the hardest sentences, and most of them can be rewritten in under two minutes.

How to fix what you find

Fixing contrast failures

For every failing text element, you need to darken the text, lighten the background, or both until the ratio hits 4.5:1. The contrast checker tool shows you the exact ratio and suggests a corrected hex value. In most cases you're shifting a colour by 10–20% lightness — it's a subtle change that you'll barely notice visually but that passes the test.

If you're on WordPress with Elementor or a theme with a colour palette, update the palette values rather than changing colours element by element. One change in your global settings can fix the same failure across every page.

Fixing readability

Start with your three most important pages: homepage, main service page, and contact page. Run each through the checker, find the sentences scored as "hard" in the heatmap, and rewrite them using this rule: one idea per sentence, under 20 words when possible.

Then check your vocabulary. For any term that's specific to your industry, ask: would a new client understand this without explanation? If not, either define it on first use, replace it with plain language, or move it to a glossary or FAQ.