How to check colour contrast by hand
Contrast is the biggest single category of accessibility failure, and it is the one our scanner deliberately does not report: it needs the colours a browser actually computes, not the ones we can guess from a stylesheet. So here is how to check it yourself, properly, in about twenty minutes per site.
The two numbers you need
Contrast is measured as a ratio between the text colour and the background behind it, from 1:1 (invisible) to 21:1 (black on white). The thresholds in WCAG 2.2 are:
- 4.5:1 for normal text (level AA).
- 3:1 for large text: roughly 24px, or 18.7px if bold.
- 3:1 for the visible boundaries of interface components — button borders, input outlines, icons — and for the focus indicator. This one is missed constantly and it is the one that stops people using your site with a keyboard.
- 7:1 for normal text at level AAA. Treat this as a bonus, not a target.
Where to look, in this order
- Placeholder text in forms. Almost always too light: designers pick grey, and grey on white at 14px is usually about 2.5:1.
- Text on photographs or gradients. The ratio changes across the image. Test the lightest and darkest point behind the text, not the average.
- Coloured buttons. White text on a mid-tone brand colour often lands at 3.5:1, which is fine for a heading and a failure for a button label.
- Links inside body text. If a link is only distinguishable by colour, it also needs 3:1 against the surrounding text, plus something other than colour to identify it (an underline, most of the time).
- Disabled states and secondary text: the small grey print under a heading, the "optional" label, the footer.
- Dark mode. Half of all dark modes are an afterthought and turn a passing design into a failing one.
How to measure it
Open the page in a browser, right-click the text, choose Inspect, and look at the Computed
styles. You now have the text colour and the background colour, in rgb() form, as the browser
actually applied them. Put both into any contrast calculator — the WebAIM contrast checker is the
standard free one, and every design tool has one built in. You do not need a plugin for this.
The trap is what sits behind the text. If the background is a photograph, a gradient, a semi-transparent overlay, or an animation, the computed value is only the last layer. Screenshot that part of the page, sample the lightest pixel behind the text with an image editor, and test that. This is exactly why an automated scanner cannot be trusted on contrast and why we say so instead of guessing.
Fixing it without wrecking the brand
You usually do not need a new palette. In order of least painful:
- Darken the text, not the background. Two or three steps down the same hue is often enough and nobody notices.
- Make the text bigger or bolder if it is already borderline: large text needs 3:1, not 4.5:1.
- Add a solid background behind text that sits on an image — a subtle scrim at 30–40% opacity does more for contrast than a new photograph.
- Reserve the light brand colour for large headings and use a darker shade of it for body text.
- Never "fix" contrast by removing the text, and never fix it only in an overlay widget: the underlying page is what screen readers and other tools see.
Testing focus and controls, which is a different job
Tab through the page with the mouse unplugged. Watch for three things: can you see where you are at every step (a 3:1 focus ring, not a faint dotted line), is the order sensible, and can you reach every control? Contrast tools will not tell you any of this, and it is where most sites fail hardest.
What our tool does instead
AccessAudit finds the problems that can be proven from HTML — missing alt text, unlabelled fields, empty links and buttons, heading order, table headers, frame titles, zoom-blocked viewports — and quotes the markup responsible. It leaves contrast to you, on purpose, because a guess there would be worse than silence. The full explanation of what automated scans can and cannot see is worth two minutes.
Check a page for the other problems, free The ten most common problems