Accessibility
Colour Contrast & Legibility
Text needs enough contrast against its background to be read — WCAG's ratio is the floor, not the goal.
Where it comes from
The minimums were set by the World Wide Web Consortium (W3C) in the Web Content Accessibility Guidelines — first in WCAG 2.0 in 2008, and carried forward into 2.1 and 2.2. Those ratios are now the reference point for accessibility law in markets around the world.
Why it matters for your website
Low contrast isn't an edge case — it's a mainstream readability problem. WCAG sets a minimum contrast ratio of 4.5:1 for normal text (3:1 for large text), but that's the minimum, not the target. Text people can't comfortably read is text they won't.
It isn't only people with diagnosed low vision who are affected. Anyone reading on a phone in bright sunlight, on a cheap screen, or simply with ageing eyes hits the same wall — and that's a large share of your audience, not a fringe of it.
There's a commercial edge, too. Light-grey 'designer' text can look refined in the studio, but if visitors skim past your value proposition because it's a strain to read, the polish is costing you the message. And with accessibility now written into law in many markets, contrast failures carry legal risk alongside the lost conversions.
Wrong vs right
Light-grey body text (#9b9b9b) on a white background at around 2.8:1 — readable for some in good light, a strain for many, and below the WCAG floor.
The same text darkened to #595959 or below, clearing 4.5:1. No layout change — just text people can actually read.
White text over a photographic hero, legible on the dark part of the image and invisible over the bright part.
A subtle scrim (a semi-opaque overlay) behind the text, so the contrast holds wherever the image lands.
A brand-colour button with pale label text that looks on-brand but reads at 2:1 — the call to action is the hardest thing on the page to read.
The label darkened or the button colour deepened to clear 4.5:1, so the most important text is also the most legible.
Understanding Colour Contrast & Legibility
Contrast ratio is a number describing how different two colours are in brightness — specifically, the relationship between the luminance of your text and the luminance of its background. It runs from 1:1 (identical, invisible) to 21:1 (pure black on pure white). WCAG's AA standard asks for at least 4.5:1 for normal body text.
Large text gets an easier bar — 3:1 — because size itself aids legibility, and the same 3:1 minimum now applies to meaningful interface components and graphics, not just words. Most real-world failures cluster in a few familiar places: grey-on-white body copy, text laid over images, brand colours pressed into service as text, placeholder text, and disabled states.
The ratio is deliberately framed as a floor, not a target. AA's 4.5:1 keeps text legible for most people in most conditions; AAA raises it to 7:1. Long-form reading, small type, and outdoor use all benefit from more headroom than the legal minimum — so clearing the bar is the start of the job, not the end of it.
How Kweri checks it
Kweri runs automated contrast checks (via axe-core) against the WCAG 4.5:1 / 3:1 ratios and reports the elements that fall short. Automated testing is reliable for measurable colour ratios — but it catches only part of the accessibility picture (industry estimates put automated coverage at roughly a third to a half of issues). Things like text baked into images, contrast against video, or focus-state contrast often need a human eye, and Kweri says so rather than implying a clean automated pass means a fully accessible page.
FAQ
What contrast ratio do I actually need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt, or 14pt bold) and for meaningful UI components and graphics. AAA raises that to 7:1. Treat 4.5:1 as the floor, not the target.
How do I check my site's colour contrast?
Use your browser's built-in accessibility/contrast inspector, a free checker like the WebAIM Contrast Checker, or an automated tool such as axe. Kweri's audit also flags failing elements for you.
What's the difference between WCAG AA and AAA contrast?
AA (4.5:1 for normal text) is the level most laws and organisations target. AAA (7:1) is stricter and aimed at maximum legibility; it's often reserved for content that must be readable by the widest possible audience.
Does contrast apply to buttons and icons too?
Yes. Since WCAG 2.1, meaningful non-text elements — button borders, icons, form-field outlines, chart colours — need at least 3:1 against their surroundings so people can perceive and operate them.
Is low contrast really a legal issue?
Increasingly, yes. WCAG is the standard referenced by the EU Accessibility Act, the UK Equality Act, and US ADA case law. Contrast is one of the most common and most cited failures.
Does dark mode fix contrast problems?
Not automatically — it just inverts the problem. Light-grey text on dark grey can fail in exactly the same way. Every theme needs to clear the ratio on its own.
Related principles
Web accessibility is organised around four principles: content must be Perceivable, Operable, Understandable, and Robust — failure on any one principle makes content inaccessible to some users.
The eye separates a subject (figure) from its surroundings (ground) — that separation must be unambiguous.
Every interactive element must be reachable and operable using a keyboard alone, with visible focus indicators showing where the user currently is.
Attribution & sources
Identified by W3C Web Accessibility Initiative (WAI) (WCAG 2.0 (2008), carried into 2.1 / 2.2). Catalogued from W3C — Understanding Success Criterion 1.4.3: Contrast (Minimum).
Defined in the Web Content Accessibility Guidelines, the international standard referenced by laws including the EU Accessibility Act and the US ADA.
See Colour Contrast & Legibility on your own site
Run a free Kweri audit — a plain-English review of your site’s speed, accessibility, SEO and design, ranked by what to fix first. No login, no jargon.
Run a free audit →