Color contrast checker: test text against WCAG 2.2 AA and AAA

Pick a text color and a background to get their WCAG contrast ratio, from 1:1 to 21:1, with pass or fail for AA (4.5:1 normal text, 3:1 large text), AAA (7:1 and 4.5:1) and icons (3:1). If a pair fails, the checker suggests the closest text color that passes.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated November 10, 2026

Text color

Background color

Large text: 24px regular or 18.66px bold

Normal body text at 16px. The quick brown fox jumps over the lazy dog.

Small print at 13px, the size of captions and footnotes.

Contrast ratio 10.01:1

WCAG 2.2 check	Needs	Result
AA, normal text (1.4.3)	4.5:1	Pass
AA, large text (1.4.3)	3:1	Pass
AAA, normal text (1.4.6)	7:1	Pass
AAA, large text (1.4.6)	4.5:1	Pass
Icons and UI parts (1.4.11)	3:1	Pass

On this page

Low contrast is the most common accessibility problem on the web, and it is easy to miss: a pale gray caption that looks elegant on a designer's bright monitor can vanish on a phone in sunlight or for someone with low vision. This checker measures a pair of colors the way the Web Content Accessibility Guidelines do and tells you which levels the pair meets.

How the ratio is worked out

WCAG first turns each color into a relative luminance, a number from 0 for black to 1 for white that weights green most and blue least, because that is how bright each channel looks to us. The contrast ratio is then (lighter + 0.05) ÷ (darker + 0.05). Black on white gives the maximum, 21:1; any color on itself gives 1:1. The order doesn't matter, so swapping text and background gives the same ratio.

ColorPlum cuts the ratio to two decimals instead of rounding it. WCAG's thresholds are exact, so a pair at 4.499:1 fails AA even though it would round to 4.5.

What the levels mean

AA, normal text: 4.5:1. The level most laws and style guides point to for body text.
AA, large text: 3:1. Large means at least 24px, or 18.66px bold (18pt and 14pt bold in print terms).
AAA: 7:1 for normal text and 4.5:1 for large text. A stricter level, worth aiming for in long reading.
Icons and interface parts: 3:1. Under success criterion 1.4.11, the borders of inputs, focus rings and meaningful icons need 3:1 against what is next to them.

Logos and purely decorative text are exempt from these rules, and text that is disabled (a grayed-out button) is too.

Worked example

A designer has set captions in #777777 on white. The checker shows 4.47:1: close, but a fail for AA normal text. The checker suggests #767676 and Use it swaps it in: one step darker on each channel, it measures 4.54:1 and is the lightest neutral gray that passes AA on white. The starting pair on this page, plum #5B2A6E on a warm off-white #FDF9F4, measures 10.01:1 and passes every level.

Tips for real designs

Test the real background, not the page color: text over a photo or gradient needs checking against its lightest part.
Check hover and focus states, placeholder text and links inside body text, which are the colors most often missed.
Contrast is one part of readability. Font weight, size and line length matter too, and a passing ratio with a hairline font can still be hard to read.
For a whole palette's text pairs at once, every palette page lists the pairs that pass, and the shade and tint generator shows any color against white, black and your background.

How the ratio is worked out

What the levels mean

Worked example

Tips for real designs

Sources