Sufficient colour contrast decides whether text stays readable for everyone – including people with low vision, users in bright sunlight or those on low-quality displays. With the Color Contrast Checker (WCAG) you can check two colours against the Web Content Accessibility Guidelines (WCAG 2.1) in seconds. This guide explains the formula, the thresholds and a common borderline case from real projects.
How the contrast ratio is calculated
The contrast ratio describes the brightness difference between the foreground and background colour. It is derived from the relative luminance L of both colours:
Contrast ratio = (L_light + 0.05) / (L_dark + 0.05)
Here L_light is the relative luminance of the lighter colour and L_dark that of the darker one (WCAG 2.1). Relative luminance weights the red, green and blue components according to human perception. Values range from 1:1 (no contrast, identical colours) up to 21:1 – the maximum for pure black on pure white.
The WCAG thresholds for AA and AAA
WCAG defines two conformance levels (AA, AAA) and two text sizes. "Large text" means 18 pt and above, or 14 pt and above when bold. Smaller and regular-weight type counts as normal text.
| Requirement | Normal text | Large text |
|---|---|---|
| WCAG AA | ≥ 4.5:1 | ≥ 3:1 |
| WCAG AAA | ≥ 7:1 | ≥ 4.5:1 |
AA is the minimum level required by most laws and tenders, while AAA is the more demanding recommendation. Larger text may have lower contrast because thicker letterforms remain legible even with a smaller difference.
Example: a narrow borderline case
A frequent mistake is using mid-grey for body text. Pure grey #777777 on a white background yields a contrast ratio of about 4.48:1. That falls just short of the AA threshold of 4.5:1 – so it is not accessible for body text, even though it may look sufficient at first glance. Only a slightly darker grey reaches the required 4.5:1. It is exactly these borderline cases that the calculator reliably reveals.
How to run the check
Enter the foreground and background colours as hex values, for example #333333 on #FFFFFF. The calculator returns the ratio and shows, for each combination of level and text size, whether it passes. Always check text colours against the actual background – including buttons, links in their hover state and text over images. This ensures your design is not only attractive but demonstrably accessible.
