What contrast ratio actually means
Contrast ratio is a single number that measures how different two colours are in brightness — usually your text against its background. It runs from 1 to 1, meaning identical colours you could never tell apart, up to 21 to 1, which is pure black on pure white. The bigger the number, the easier the text is to read. Everything in accessibility contrast comes down to keeping that ratio above a proven threshold, because below a certain point text stops being reliably legible for a large share of people.
The important thing to understand is that this is about brightness difference, not just picking different colours. Two colours can look quite different to someone with full colour vision and still have poor contrast — a medium red and a medium green, for instance, are worlds apart in hue but similar in brightness, which is why they can be nearly indistinguishable to someone who is colour blind or reading on a washed-out screen in sunlight. The ratio measures the thing that actually governs readability. You do not have to calculate it by hand; tools do it instantly. You just have to know the targets.
The numbers you need to hit
The accessibility guidelines set clear thresholds, and they are worth memorising because they cover almost every decision you will make. For normal body text, the standard target is a contrast ratio of at least 4.5 to 1 against its background. That is the line for Level AA, the level Canadian and international law generally expects. For large text — roughly 24 pixels and up, or 19 pixels and up if it is bold — the target relaxes to 3 to 1, because bigger, heavier shapes are easier to read at lower contrast.
There is a stricter tier, Level AAA, which asks for 7 to 1 on normal text and 4.5 to 1 on large text. That is the target I hold this site to, because I am building for readers whose eyes, like mine, need the extra margin. You do not have to reach AAA everywhere, but treating 4.5 to 1 as an absolute floor for body text and aiming higher when you can is the right instinct. One more rule people miss: meaningful non-text elements need contrast too. The border of a form field, the icon that carries information, the focus outline around a button, a segment of a chart — those need at least 3 to 1 against what is around them, or people cannot see the thing they are supposed to interact with.
Who low contrast actually hurts
It is tempting to think of contrast as a niche concern for a small group of visually impaired users. It is not. I write about this from the inside — I am low vision, and low-contrast text is a daily tax on my attention — but the group affected is enormous and mostly invisible. It includes the millions of people with any degree of reduced vision, everyone who is colour blind, and, crucially, everyone whose eyes are simply aging. Contrast sensitivity declines steadily with age for all of us, which means a design that reads fine to a twenty-five-year-old designer can be a genuine struggle for a sixty-year-old customer.
Then add the situational cases, which touch everybody. Anyone reading on their phone in bright sunlight is temporarily low vision. Anyone on a cheap monitor, a dimmed laptop, or a screen tilted at a bad angle loses contrast. When you strengthen contrast for the people who need it permanently, you also help the far larger group who need it occasionally — which, over a day, is essentially all of your visitors. There is no downside audience here. Nobody has ever left a website because the text was too easy to read.
The five most common contrast mistakes
The same handful of failures show up again and again. The first is grey body text on a white background, chosen because it looks softer than black. Pure black is rarely necessary, but drift too light and you fall under the threshold; a dark grey that still clears 4.5 to 1 is the sweet spot. The second is placeholder text used as a label — that faint grey hint inside a form field is almost always below the contrast line, and when it doubles as the only label, the field becomes a guessing game.
The third is text laid over a photo or a gradient, where the contrast is fine over the dark part of the image and fails completely over the bright part. The fix is a solid or semi-transparent overlay behind the text so it never depends on what the photo is doing underneath. The fourth is light-coloured buttons and links — a pale brand colour that looks lovely but leaves the call-to-action text or a link nearly invisible. The fifth is colour as the only signal: marking a required field or an error purely by turning something red, so that anyone who cannot distinguish that red gets no information at all. Always pair colour with a shape, an icon, or a word.
How to check your own site
You can audit your own contrast in minutes without any special knowledge. The fastest route is a free contrast checker tool: you enter your text colour and background colour, and it tells you the ratio and whether it passes AA and AAA for normal and large text. Designers keep one open constantly. For checking a page as it really appears, the developer tools built into every modern browser will report the contrast ratio of any text you inspect, and browser extensions can scan a whole page and flag every element that falls short.
The most honest test, though, costs nothing and needs no tools. Pull your site up on your phone, take it outside into daylight, and try to read it. Turn your monitor brightness down halfway and read it again. Ask the oldest person you know to read it without leaning in. If any of those is a strain, your contrast is too low, whatever a number says, because those are the real conditions your customers use your site in. The tools give you a pass or fail; the outdoor test gives you the truth.
Good contrast is not boring design
The objection I hear most is that all this will make a design flat and lifeless — that strong contrast means harsh black on white and nothing else. That is a misunderstanding. Contrast rules govern the relationship between text and its immediate background, not your whole palette. You can use every colour you like in illustrations, backgrounds, accents, and imagery. You simply make sure that when there are words a customer needs to read, those words stand clearly apart from whatever sits directly behind them. Some of the most striking, most premium-looking sites on the web are ruthless about contrast; the confidence to use bold, legible type is itself a design signal.
The habit to build is simple: every time you set a text colour, check it against its background before you move on. It takes seconds and it saves you from the single most common accessibility complaint there is. Do that consistently and you will have a site that reads effortlessly for the widest possible audience, satisfies the accessibility level Canadian law expects, and looks more confident for it — not less. If you would like a second set of eyes, ideally a set that navigates the web the way your low vision customers do, a contrast and readability pass is part of the accessibility review I offer through Design Menu.