How to Check Colour Contrast for Accessibility — WCAG 2.1 Explained
A designer picks a pale grey text on a white background because it looks clean. A developer makes a button label slightly lighter to match a brand gradient. Neither of them thinks twice about it — until someone points out that it's unreadable for anyone with low vision, or until an accessibility audit comes back with a list of failures.
Colour contrast is one of the most commonly failed WCAG criteria, and it's also one of the most straightforward to fix once you know what to check. This guide explains what the ratios mean, which ones apply to which elements, and how to test any combination using DocSuite's WCAG Contrast Checker.
What is a contrast ratio?
Contrast ratio is a measure of the relative luminance difference between two colours — how much brighter one is than the other. It's expressed as a ratio from 1:1 (identical colours, zero contrast) up to 21:1 (black on white, maximum contrast).
The ratio is calculated using a formula defined in the WCAG specification that converts colour values to perceived luminance, accounting for how human eyes respond differently to red, green, and blue light. You don't need to calculate this by hand — a contrast checker does it instantly from hex or RGB values.
The WCAG contrast requirements
WCAG 2.1 defines two conformance levels that most organisations target. Here are the specific contrast thresholds:
What counts as "large text"? WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold weight. CSS font-weight: 700 or higher counts as bold for this purpose.
What the ratios mean in practice
To give you a feel for the scale: pure black (#000000) on white (#ffffff) is 21:1 — the maximum. Medium grey (#767676) on white passes Level AA at exactly 4.54:1 for normal text. Anything lighter than that will fail.
Light grey text on a white background — a very common "clean" design choice — often falls below 3:1. Something like #aaaaaa on white is only about 2.3:1, which fails all levels. It looks fine on a high-quality display in a bright room, but becomes genuinely difficult to read for people with low vision or on lower-contrast screens.
On the other side, a common issue is coloured text on a coloured background — for example, a yellow button label on an orange background, or a brand-coloured link on a similarly toned background. The colours look different to a sighted person but can have very poor contrast for someone with colour deficiency.
Step-by-step: Checking contrast with DocSuite
Open the contrast checker
Visit edgeworksapps.com/docsuite/tools/contrast-checker.html. No account required.
Enter your colours
Enter the foreground colour (your text) and the background colour as hex values — for example #333333 and #f5f5f5. You can also use the colour picker to select visually if you don't have the hex values to hand.
Read the result
The tool displays the ratio and shows pass/fail status for each WCAG level — AA normal text, AA large text, and AAA. A preview shows what the colour combination actually looks like at standard text sizes.
Adjust until you pass
If a combination fails, try darkening the text colour or lightening the background. Small adjustments to L (lightness) in HSL colour space are the most efficient way to find a passing ratio while keeping the brand feel.
Common mistakes designers make
- Checking the wrong layer: If text sits over an image or gradient, the contrast changes across different parts of the screen. You need to check the worst-case area, not the average.
- Forgetting placeholder text: Form field placeholder text (the grey hint text before you type) is often styled at low opacity or a light grey. It still needs to meet contrast requirements.
- Ignoring focus indicators: Keyboard focus outlines must have 3:1 contrast against the adjacent background. Default browser focus styles are often overridden by CSS resets without a replacement being added.
- Assuming brand colours are exempt: WCAG does not have an exemption for brand colours. If your brand uses a light yellow, you need to find a supporting dark colour for text rather than using the yellow as a text colour on white.