A contrast checker compares two colors and reports their WCAG ratio. Normal text needs 4.5:1 for AA, large text needs 3:1 for AA and 4.5:1 for AAA, and interface graphics need 3:1 for AA. Graphics have no AAA. When a pair fails here, the tool also shows the nearest shade of the same hue that passes.

The threshold people forget

Most designers know 4.5:1 for body text. The one that gets missed is 3:1 for interface graphics, which covers anything you need to see in order to use the thing: input borders, focus rings, icons, toggle states, chart strokes, the line between two table rows if that line is carrying meaning.

It is easy to miss because none of those are text, so a page can have perfect body copy and a form full of boxes you cannot see. We found exactly that in this site's own tokens. The border color we had chosen for inputs measured 1.41:1 against the page background. Every word on the page passed. The form did not.

Decorative borders are exempt, which is the part that makes this genuinely fiddly. A divider between two sections carries no meaning and can be as faint as you like. The border around a text input is the thing that tells you where to click, so it is a user interface component and it needs 3:1.

When you have more than two colors

This tool takes a pair. A design system has eight or nine colors, and checking them two at a time means dozens of separate checks, which is enough work that it rarely gets done, and why the failures ship. Paste the whole set into the palette contrast grid instead and get every pair at once.

What "nearest passing" actually does

When a pair fails, this moves lightness only, in small steps, in both directions, and stops at the first shade that reaches 4.5:1. Hue and saturation stay put. The search can move a long way in lightness, and a very dark or very light result means that pair has little room to work with. Against a mid-gray background the suggestion can be nearly black, such as #E53935 on #777777 moving to #130303. Every sRGB text color still reaches 4.5:1 against black or white, so the tool is not describing a hue that cannot pass at any lightness.

Questions

What contrast ratio does text need?

Under WCAG 2.2, normal text needs 4.5:1 and large text needs 3:1 for Level AA. That's success criterion 1.4.3. Level AAA raises them to 7:1 and 4.5:1 (1.4.6). Parts of the interface you need to see to use it, like input borders and focus rings, need 3:1 (1.4.11). Type two hex codes and you'll get all five verdicts.

What does a 4.5:1 contrast ratio mean?

It compares how bright two colors are. Take the relative luminance of the lighter color plus 0.05 and divide by the darker one's plus 0.05. Scores run from 1:1 for two identical colors to 21:1 for black on white. Gray #767676 on white scores 4.54:1 and passes, while #777777, a hair lighter, scores 4.48:1 and fails. A TV's advertised contrast, like 3000:1, is a different measure. It compares the brightest white and darkest black the screen can show, not two colors in your design. How to read a contrast ratio covers the rest.

What counts as large text?

WCAG 2.2 says at least 18 point, or 14 point bold. CSS sets a point at 4/3 of a pixel, so that's 24px regular or about 18.7px bold. Anything smaller is normal text and needs 4.5:1. That includes 16px body copy, even in bold. The checker doesn't know your font size, so it shows both verdicts and you pick the one that fits.

Should I aim for AAA?

Not everywhere, according to WCAG 2.2 itself. Its conformance section says it's "not recommended that Level AAA conformance be required as a general policy" for whole sites, since some content can't meet every AAA criterion. For contrast, AAA means 7:1 for normal text and 4.5:1 for large text. The default pair, #2FBFD0 on #F5F7F9, scores 2.06:1 and misses both levels. When a pair is under 4.5:1, the checker keeps each color's hue and suggests the smallest lightness change it finds for the text and for the background. Here that's text #1F7C87 at 4.56:1. Suggestions stop at 4.5:1, so for 7:1 you'll need to adjust the color by hand.

Does it support APCA?

No. It computes the WCAG 2.2 ratio only. APCA, the Accessible Perceptual Contrast Algorithm from Myndex Research, is a separate method. It scores a pair as a lightness contrast value written Lc, such as Lc 90, not as a ratio. WCAG 2.2 doesn't use it, so an APCA score won't tell you whether a pair meets 1.4.3.

Can it check a transparent color or a color from an image?

No to both. It reads 3- or 6-digit hex codes, so #2FBFD080, which has an alpha channel, is refused. Blend the transparent color with what sits behind it and check the solid result. There's no image upload either. The swatch beside each box opens your browser's color picker, and on desktop Chrome and Edge that picker has an eyedropper you can use on an image open on screen. On-screen pixels can differ from the file, so for exact values read the hex codes in a design tool.

Related tools

Got a whole palette rather than a pair? The contrast grid checks every combination at once. Ready to ship the colors: export them to CSS variables and JSON tokens. And how to read a contrast ratio explains what the number does and does not tell you. Accent colors that fail as text is the pair-level version of the same mistake.

Color contrast checker

Two colors

Nearest passing colors