Contrast Checker
Check text and background colours against WCAG 2.2 AA and AAA.
Two hex colours per line, separated by a space, comma or “on”. The opacity setting applies to every pair.
How to use Contrast Checker
- Choose the text colour and the background colour (or paste hex values).
- Read the contrast ratio and the pass/fail result for each WCAG level.
- If it fails, use the suggested colour, which keeps your hue but meets 4.5:1.
How it works
WCAG 2.2 defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colours. Level AA requires at least 4.5:1 for normal text and 3:1 for large text (24 px, or about 18.7 px bold) and for user-interface components and graphics. Level AAA requires 7:1 and 4.5:1.
Semi-transparent text is first blended over the background, because that is the colour readers actually see. The suggestion searches for the nearest lightness with the same hue and saturation that reaches 4.5:1.
Example
Grey #767676 on white is 4.54:1: it passes AA for normal text, just barely. #777777 is 4.48:1 and fails.
Frequently asked questions
What contrast ratio do I need?
For WCAG 2.2 AA: 4.5:1 for body text, 3:1 for large text and for icons, borders of inputs and other UI parts. AAA asks for 7:1 and 4.5:1.
What counts as large text?
At least 18 point (24 CSS px) regular, or 14 point (about 18.7 CSS px) bold.
Does it check WCAG 3 / APCA?
Not yet. APCA is a draft method for the future WCAG 3, and WCAG 2.2 is still the legal and contractual standard in most places.
Is contrast enough for accessibility?
No. It is one requirement among many: also check focus indicators, text size, keyboard use and not relying on colour alone.
Limitations
- Text over images or gradients must be checked at the worst-contrast point.
- APCA (draft WCAG 3) is not calculated.
Last reviewed November 9, 2026. How we build and test tools.