Last updated on August 26th, 2026 at 09:30 am

Most Viral Tool - SEO Audit Tool  | Reseller Profit Tracker Generator | Freelance Invoice Generator | ADHD Planner Generator

Colour Contrast and Readability: The Checklist That Makes Your Website Actually Readable

Here's a test. Look at your business's website and find the text that's grey on white, light blue on white, or white on a bright yellow button. Now imagine you're a 50-year-old customer on a phone, in daylight, with tired eyes. That elegant light-grey paragraph you loved in the design preview? It's a wall of faint smudges to them — and they'll quietly leave rather than squint.

Contrast isn't a design flourish. It's the difference between content people can read and content people abandon. And it's measurable: there's a standard for it (WCAG, part of the wider website accessibility guide), and a free tool that checks any two colours in five seconds. This article gives you the checklist — colour rules, then the typography side (size, spacing, line length) — so you can make your site readable without being a designer.

Trending Today- Earn $$$ FREE  | Trending LIFE Quotes | HOT DEBATES | Autograph | FREE PAID Tools | Advertise FREE |

The core rule: 4.5:1 contrast for normal text

The accessibility standard (WCAG 2.2, level AA — what laws and lawsuits reference) says: normal-sized text needs a contrast ratio of at least 4.5:1 against its background. Large text (roughly 18px bold, or 24px regular and above) needs 3:1.

"Contrast ratio" is just a number that describes how much text stands out from its background, scored from 1:1 (identical colours, invisible text) up to 21:1 (black on white). The rule of thumb in everyday language:

• Black or very dark text on white or near-white — almost always fine (around 15–20:1).
• Medium grey on white (like #999 on #fff) — fails (about 3:1); common and almost always wrong for body text.
• White text on yellow, or yellow on white — fails dramatically; don't do it.
• Coloured text on coloured backgrounds — check it; pastel-on-pastel is usually the offender.

The good news: this is the single easiest fix on any website. Choosing near-black text on white, and reserving colours for headings and accents, fixes 90% of contrast complaints with zero risk of breaking your design.

How to check (free, five seconds per pair)

Three free tools make checking painless:

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker) — type in two hex colours, get the ratio and an instant pass/fail against WCAG. The gold standard of the toolkit.
• WAVE browser extension — scans your whole page and flags every element that fails contrast, with the offending colours highlighted. Run this on every page after launch; it's part of the website accessibility checklist.
• Browser dev tools — right-click any element → Inspect; Chrome shows the contrast ratio live when you select text.

You don't need a design eye for this. You need a tool, ten minutes, and the willingness to change two or three offending colour pairs. That combination fixes the worst readability crimes on most small business sites.

Beyond colour: the typography side of readability

Contrast gets all the attention, but typography does most of the work. These are the settings that determine whether a paragraph reads comfortably or repels:

Font size. Body text below 16px is hard to read on phones (browsers zooming to compensate says it all). Set body text to 16px or 17px as a baseline. If your site's text is 13–14px, that alone is a readability problem hiding in plain sight.

Line height (the space between lines). Text that's cramped — lines stacked tight — is tiring to read. A line-height of about 1.5× the font size (so ~24px for 16px text) is the comfortable range. Tight 1.2 line-height for body prose: too cramped.

Line length (the width of a line). Text lines that run wall-to-wall make your eyes hunt for the next line. Aim for roughly 50–75 characters (about 8–10 words) per line for body text. On a desktop site that means text blocks that don't span the full page width.

Real text, not images. Any important text — especially headings and buttons — should be actual text, not text baked into an image. Real text is what screen readers read, what search engines see, and what zooms cleanly. If your logo or badges contain text, provide a real text version alongside.

Left-aligned, not justified. Justified text (stretched to fill both edges) creates uneven gaps between words that make paragraphs harder to read, especially on narrow screens. Left-align body text.

Avoid thin, decorative, or all-caps body fonts. Ultra-light or overly-stylised typefaces fail at both contrast and readability — a 300-weight grey on white is the double whammy. Reserve thin fonts for large headings if you must use them at all.

The accessibility angle: readability is accessibility

Every rule above is also an accessibility requirement, which is why the wider WCAG 2.2 guide covers contrast as its number one fix. Making text readable helps everyone: the ageing customer, the mobile user in sunlight, the reader with low vision, and — because screen readers announce real text — the visitor using assistive technology.

Two extra readability habits that matter legally and practically:

• Don't rely on colour alone to convey meaning. "Errors in red" or "success in green" is fine, but if red is the only signal, colour-blind users miss it. Pair colour with an icon or text ("Required", "Success").
• Interactive text should be obvious. Underlined links (or clearly styled buttons) signal "clickable". Text that's just a slightly different colour invites guessing.

The 10-point actionable checklist

Print or save this. Run it against your site today:

1. Body text uses a colour with at least 4.5:1 contrast — in practice, near-black on white.
2. Large text and UI (big headings, buttons, input outlines) meets 3:1.
3. Body font size is 16px+ on desktop and mobile.
4. Line height ≈ 1.5× the font size for paragraphs.
5. Line length ≤ ~75 characters for body content.
6. All important text is real text, not text-in-image.
7. Body text is left-aligned, not justified.
8. Thin / very light-weight / all-caps fonts are used only for large headings, if at all.
9. No colour-only meanings — pairing colour with icons or words.
10. Links and buttons look clearly interactive (underline, border, or background).

Frequently asked questions

What is the WCAG contrast rule?
Normal text: at least 4.5:1 against its background. Large text (18px+ bold or 24px+) and key UI elements: 3:1. These are the AA requirements most laws reference.

Is white text on any dark colour okay?
No. White on mid-grey, and white on most colours except truly dark ones, fails 4.5:1. Check each pair — the tools above make it instant.

My brand uses light colours — do I have to change my brand?
No. Apply strong contrast to body text and key controls, and let your light brand colours live in headings, backgrounds, and decoration where they do less damage. You can keep a brand feeling without failing the rule.

How do I know if my site currently fails?
Run the free WAVE browser extension and look at the "Contrast Errors" count. A typical small-business site finds most errors are one or two colour pairs repeated everywhere.

Does contrast affect SEO?
Not directly, but page usability, Core Web Vitals behaviour (people reading instead of bouncing), and accessibility all feed into rankings indirectly. Readability is a business and safety win regardless of algorithm scores.

The honest summary

Readable websites aren't the result of design talent — they're the result of a short, verifiable checklist: near-black text on white, 16px+ body text, comfortable spacing, sensible line lengths, and real text for everything important. Run the free checkers, fix the two or three recurring colour offenders, adjust the typography settings in the theme you use (most WordPress themes — see our best free themes guide — expose these in the customiser with sliders). In under an hour you can take a site from "squinty" to "comfortable for everyone", and that hour pays back in every customer who actually finishes reading what you wrote.