Color Contrast Checker for WCAG 2.2 AA and AAA

How to use it

Type the text colour in Text colour and the colour behind it in Background colour.
Read Contrast ratio. The four text checks and the component check say which levels the pair reaches.
For body text, aim for AA, normal text. Large text needs less contrast; the sizes are in the sections below.
If a check fails, start from Suggested text colour and test the result in your real design.

How the ratio is calculated

WCAG 2.2 gives every colour a relative luminance. Each red, green and blue value is first made linear: a value of at most 0.04045 (on a scale of 0 to 1) is divided by 12.92, and a larger one is raised to the power 2.4 after adding 0.055 and dividing by 1.055. The three results are then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. The contrast ratio is the lighter colour's luminance plus 0.05, divided by the darker colour's luminance plus 0.05.

The result runs from 1, for two identical colours, to 21, for black on white.

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L1 + 0.05) ÷ (L2 + 0.05)

L1  luminance of the lighter colour
L2  luminance of the darker colour

The levels

WCAG 2.2 sets these minimum ratios. The level and the success criterion are shown so you can look up the exact wording.

AA, normal text: 4.5:1 (success criterion 1.4.3).
AA, large text: 3:1, for text of 18 point, or 14 point when bold (1.4.3).
AAA, normal text: 7:1 (success criterion 1.4.6).
AAA, large text: 4.5:1 (1.4.6).
Buttons, borders and icons that a reader needs in order to use the page: 3:1 (1.4.11).

What this checker does not cover

Text on photos, images and gradients: the background changes across the text, so check the real pixels there.
Transparent colours: enter the colour the reader actually sees on the page.
Hover, focus and other states: check the colours of each state too.
Whether text is large for the reader: the font size and weight decide it, and the page cannot know them.

Worked example: grey #777 on white

The grey #777 has each channel at 119 out of 255, which gives a relative luminance of about 0.184. White has a luminance of 1, so the ratio is (1 + 0.05) ÷ (0.184 + 0.05) = 4.48.

So #777 on white fails AA for normal text by a small margin, passes AA for large text and the 3:1 check for components, and fails AAA. The nearest darker grey that passes AA is #767676, with a ratio of 4.54.

Check	Needs	#777 on white
AA, normal text	4.5:1	4.48: fail
AA, large text	3:1	Pass
AAA, normal text	7:1	Fail
AAA, large text	4.5:1	Fail
Buttons, borders and icons	3:1	Pass

Frequently asked questions

What contrast ratio does body text need?

For WCAG 2.2 level AA, normal text needs at least 4.5:1 and large text needs 3:1. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.

Why does a ratio of 4.4999 show as 4.50 and still fail?

The check uses the exact ratio, not the two decimals on the screen. A ratio just below 4.5 rounds to 4.50 when shown, but it does not reach 4.5:1, so the check fails.

Does the order of the two colours change the ratio?

No. The ratio is the same whichever colour is the text and whichever is the background, because the lighter colour is always the numerator.

What is the suggested colour?

It is the text colour closest to yours in lightness that reaches 4.5:1 on your background. It keeps the same hue and saturation, and it is darker or lighter, whichever is the smaller change.

Can I enter a colour with transparency?

Not here. Enter the colour a visitor actually sees, which is the transparent colour already mixed with the background behind it.

Are my colours sent to a server?

No. The calculation runs in your browser, and nothing you enter is stored or sent.

Does a passing ratio mean the text is easy to read?

Not always. The ratio is the minimum that WCAG sets. Font size, weight, spacing and the reader's eyesight also matter, so test the real design with people where you can.

Sources

Figures and text last checked on Tuesday, November 10, 2026.

Result