This tool checks whether a text-and-background colour pair meets WCAG 2.1 accessibility requirements. Enter a text colour and a background colour and it returns the exact contrast ratio plus pass/fail badges for AA and AAA at normal and large text sizes, and the 3:1 threshold for UI components and graphics. A live preview shows the colours on real sample text so you can judge legibility too.
How it works
The tool converts both colours to their relative luminance using the official WCAG formula: each sRGB channel is linearised, then weighted 0.2126 × R + 0.7152 × G + 0.0722 × B. The contrast ratio is:
ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05)
This gives a value from 1:1 (identical) to 21:1 (black on white). The result is checked against the WCAG thresholds:
| Requirement | Minimum ratio |
|---|---|
| AA normal text | 4.5:1 |
| AA large text / UI components | 3:1 |
| AAA normal text | 7:1 |
| AAA large text | 4.5:1 |
Understanding the thresholds
AA vs AAA represents a practical division: AA is the legally required standard in most accessibility regulations (the EU Web Accessibility Directive, the UK Public Sector Bodies Accessibility Regulations, and the target level under the US Section 508 guidelines). AAA is a higher bar intended for situations where maximum legibility matters — such as documents designed for users with low vision.
Large text gets a lower threshold because larger glyphs are more legible at lower contrast. WCAG defines large text as 18pt (approximately 24px) for regular weight or 14pt (approximately 18.66px) for bold. A heading that passes only the 3:1 threshold is compliant at AA if it meets the size definition; the same colour pair on body text (which does not) would fail.
UI components and graphics (icons, chart segments, form borders) need at least 3:1 against their adjacent colour, but this applies to the component itself, not to text within it.
Worked example
For #767676 text on a #ffffff white background:
- Luminance of #767676 ≈ 0.216
- Luminance of #ffffff = 1.0
- Ratio = (1.0 + 0.05) ÷ (0.216 + 0.05) ≈ 4.54:1
This just clears AA for normal text (4.5:1) but fails AAA (7:1). To reach AAA, darken the text to approximately #595959, which produces a ratio of around 7:1.
Practical tips for passing
- When a colour fails on a white background, try a slightly off-white background (
#f8f8f8) — the contrast ratio drops only marginally and the visual look is gentler. - Brand colours frequently fail on white. A common fix is to use the brand colour as a border or accent, and darken it slightly for the text rendering version.
- If a colour passes AA but not AAA and you need AAA, darkening towards black (for light text on dark) or lightening towards white (for dark text on light) is almost always the right direction — shifting hue rarely changes the ratio enough on its own.
The ratio is calculated in your browser using the official relative-luminance formula, so nothing is uploaded.