WCAG 2.2 contrast checker
Enter a text color and a background color to get the exact contrast ratio and a pass or fail against every WCAG 2.2 criterion that sets one: 1.4.3 for text, 1.4.6 for enhanced text, and 1.4.11 for buttons, borders and other non-text elements. When a pair fails, the checker names the nearest color that passes. The preview updates as you type, and the URL updates with it so a finding can be shared.
Large heading sample
This is body text at a normal size. Good contrast keeps it readable for everyone, including people with low vision.
19.14:1Computed with the WCAG relative luminance formula. WCAG 2.2 carries success criteria 1.4.3, 1.4.6 and 1.4.11 over from 2.1 unchanged, so these numbers are identical under either version.
Why contrast matters
Contrast is the difference in brightness between text and its background. When it is too low, text becomes hard or impossible to read, especially for people with low vision, aging eyes, or anyone on a phone in bright sunlight. The Web Content Accessibility Guidelines set clear numeric thresholds so this is not a matter of opinion.
The thresholds, in plain terms
Three success criteria set every number this tool reports. They are unchanged between WCAG 2.1 and WCAG 2.2.
| Criterion | Level | Applies to | Minimum ratio |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Normal text | 4.5:1 |
| 1.4.3 Contrast (Minimum) | AA | Large text | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Normal text | 7:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Large text | 4.5:1 |
| 1.4.11 Non-text Contrast | AA | Interface components, meaningful graphics | 3:1 |
1.4.11 is the one most often missed. A button border, a form field outline, a focus ring and the bars of a chart all need 3:1 against what sits next to them, even though none of them is text. The checker above reports it alongside the text levels.
A worked example
Take #2563EB on white. Each channel is divided by 255, giving 0.145, 0.388 and 0.922. Each is then run through the WCAG transfer function, which for values above 0.03928 is ((c + 0.055) / 1.055)^2.4, giving 0.0185, 0.1248 and 0.8308. Weighting those by 0.2126, 0.7152 and 0.0722 and summing gives a relative luminance of 0.1532 for the blue. White is 1 by definition. The ratio is (1 + 0.05) / (0.1532 + 0.05), which is 5.17:1. That clears AA for normal text and misses AAA. Every one of those figures comes from the same function the tool above uses.
Fixing a failing combination
If a pair fails, you rarely need to change the hue. Usually adjusting lightness is enough. Darken the text or lighten the background, one step at a time, and watch the ratio climb. The color converter makes this easy: switch to HSL and move the lightness slider while keeping the hue and saturation you designed around.
A common trap is light grey text on white, a look that reads as elegant but often fails AA. If you love the muted look, keep the hue and saturation but push the lightness darker until the ratio clears 4.5.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
For normal text, WCAG AA requires a ratio of at least 4.5 to 1, and AAA requires 7 to 1. Large text, roughly 24px or 18.66px bold and up, needs 3 to 1 for AA and 4.5 to 1 for AAA.
How is the contrast ratio calculated?
It compares the relative luminance of the two colors. HueKit computes luminance with the formula in the WCAG specification, including its 0.03928 breakpoint, then divides the lighter value plus 0.05 by the darker value plus 0.05. The result runs from 1:1 to 21:1.
Is WCAG 2.2 different from 2.1 for contrast?
No. WCAG 2.2 is a W3C Recommendation, most recently revised on 12 December 2024, and it carries success criteria 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced) and 1.4.11 Non-text Contrast over from 2.1 with the same thresholds and the same luminance formula. A checker that says 2.1 and one that says 2.2 return the same number. What 2.2 added elsewhere, such as 2.4.11 Focus Not Obscured and 2.5.8 Target Size, does not change any contrast calculation.
What counts as large text?
WCAG defines large text as at least 18 point, which is about 24px, or 14 point bold, about 18.66px bold. Large text has a lower contrast requirement because bigger shapes are easier to read.
Does contrast matter for more than text?
Yes. Interactive elements and meaningful graphics also have contrast requirements. As a rule, anything a user needs to see clearly should have strong contrast against what surrounds it.
Related tools
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.