Color Contrast Checker: WCAG AA & AAA, Live

Pick or type two colors and see the exact ratio, plus whether the pair clears AA or AAA for normal and large text.

Short answer: enter a text color and a background color below and this checker computes the WCAG contrast ratio between them instantly, on a scale from 1:1 (identical colors) to 21:1 (pure black on pure white). Level AA needs at least 4.5:1 for normal text and 3:1 for large text; level AAA raises the bar to 7:1 and 4.5:1. The results panel checks all four combinations at once, so you can see exactly which threshold a pair clears and which one it misses.

Text color Background

Normal text: the quick brown fox jumps over the lazy dog

Large text sample

Contrast ratio: --:1

Level	Normal text	Large text
WCAG AA
WCAG AAA

AA needs 4.5:1 (normal) or 3:1 (large, about 24px or 18.66px bold). AAA needs 7:1 or 4.5:1. Ratios are rounded to two decimals.

How to use this checker

Set a text color and a background color, either by clicking the color swatch or typing a hex code directly into the field beside it. The two live preview blocks update immediately, one at normal body-text size and one at large-text size, so you can judge the pair by eye as well as by number. Below the preview, the ratio and the four pass or fail results update together: AA and AAA, each for normal and large text. Use the Swap button to flip text and background instantly, since checking both directions matters more than people expect, and read what the ratio does not tell you before you treat a passing number as the final word.

What the ratio actually measures

A WCAG contrast ratio compares the relative luminance, the computed brightness, of two colors, not their hue. Each sRGB channel is linearized and then weighted by how strongly the eye responds to it (green contributes the most, blue the least), and the two resulting luminance values are combined as the lighter one plus 0.05, divided by the darker one plus 0.05. That small constant keeps the scale finite: 1:1 for identical colors, 21:1 for pure black against pure white, the maximum the formula can produce. Our longer guide to color contrast and the WCAG thresholds works through that formula in full and explains where the specific numbers, 4.5:1 and 7:1, actually come from; this page exists to compute the ratio for your exact colors and tell you, instantly, which bar it clears.

Normal text vs. large text: two different bars

WCAG sets a lower bar for large text because bigger letters carry more of their own shape, so a reader needs less contrast to resolve them. "Large" has a specific technical meaning: at least 18 point (roughly 24px) at regular weight, or at least 14 point (roughly 18.66px) at bold weight. Everything smaller counts as normal text and must clear the higher bar.

Content	Level AA	Level AAA
Normal text	4.5:1	7:1
Large text (≥24px, or ≥18.66px bold)	3:1	4.5:1
Non-text UI components & graphics	3:1	not defined

That is why this checker always shows all four numbers together. A pair might comfortably clear AA for a large heading while failing AA outright for the body copy set underneath it in the same color, and the two previews above are sized so you can feel that difference, not just read it in a table.

What contrast ratio does not measure

A single ratio is a useful, testable number, and it is also a narrow one. Three things it deliberately leaves out are worth naming plainly, because a passing ratio can still produce text that is genuinely hard to read.

Polarity. The formula is symmetric: dark text on a light background and light text on an equally dark background produce the exact same ratio if the two luminance values are the same pair, just swapped. But the two are not experienced identically. Some readers, including many with astigmatism, report that light text on a dark background appears to bloom or smear at the letterforms, an effect sometimes called halation, while others find dark-on-light tiring in low light. The ratio cannot see this, because it only ever compares two numbers, never the direction the light travels.

Stroke width and weight. The formula takes two colors as input and nothing else. It has no idea whether the text sitting on top of that background is a hairline-thin condensed font or a heavy black weight, and a thin stroke at a given ratio is measurably harder to resolve than a bold one at the same ratio. WCAG's own large-text exception is an implicit acknowledgment of this: size and weight change legibility even when the ratio number does not move.

Typeface. Letter shape, x-height, and spacing all affect how easily a reader separates a character from its background, and none of them enter the calculation. A geometric sans at a given ratio reads more easily for many people than a hairline serif at the identical ratio. A newer method under discussion for future accessibility guidelines, the Advanced Perceptual Contrast Algorithm (APCA), tries to fold size and weight into its number; the current WCAG ratio, the one this tool computes, deliberately does not, which keeps it simple and testable at the cost of these blind spots.

Worked examples

A few concrete pairs make the thresholds tangible. A common link blue, #0066cc, on white comes out at 5.57:1: comfortably past AA for both text sizes, but short of the 7:1 AAA bar for normal text. An amber warning color, #ffcc00, on white lands at only 1.51:1, failing every threshold outright, which is exactly why pale yellow text or icons on a white card are a recurring accessibility complaint. At the other end, dark gray #333333 text on an off-white #f5f5f5 background reaches 11.59:1, clearing even AAA with room to spare. Type any of these three pairs into the checker above to confirm the numbers, then try nudging them: small hex changes near a threshold move the ratio less than people expect, while changes near the extremes barely move it at all.

Beyond text: icons, borders and controls

Text is not the only thing that needs to be seen. WCAG's non-text contrast rule asks for a minimum of 3:1 on the meaningful parts of interface components and graphics: an icon against its background, a focus ring against the field it surrounds, the border that tells a text input apart from the page behind it. This is the same luminance math, just applied to shapes and edges instead of letterforms, and it is where designers most often lose points without noticing, since a faint 1px border can look intentional on a bright monitor and vanish on a dimmer one.

Limitations of this tool

This checker runs the standard WCAG relative-luminance formula against the two sRGB values you enter, and nothing more. It assumes a reasonably calibrated, non-glare screen; it cannot account for ambient glare, an uncalibrated panel, or a color-management profile that is silently shifting what actually reaches the eye. It also, deliberately, says nothing about whether two colors used side by side (rather than as text on a background) can be told apart by a reader with a color vision difference; that is a separate question from luminance contrast, and our color blindness simulator covers it directly. Finally, a "pass" here is necessary, not sufficient: it clears a specific, testable legal and design bar, but real readability also depends on font, size, line length and layout choices this tool cannot see.

Feel it, not just calculate it. In Hueseam, a wide color bar hides a faint vertical seam where the shade steps. Slide the marker to the edge you can just make out. It is a direct, hands-on way to sense how small a luminance difference the human eye can and cannot resolve, the same quantity this checker turns into a number.

Play Hueseam →

Frequently asked questions

What contrast ratio do I need for normal text?

WCAG level AA requires at least 4.5:1 for normal text. The stricter level AAA requires at least 7:1. Large text (about 24px regular, or 18.66px bold) needs only 3:1 for AA and 4.5:1 for AAA.

Does this checker account for color blindness?

No. It computes luminance-based contrast, which is a different question from whether two hues can be told apart by someone with a color vision difference. Two colors can pass a high contrast ratio and still be hard to distinguish for a reader with a red-green difference if they rely on hue rather than lightness. Use our color blindness simulator to check that separately.

Why does the same ratio look different depending on which color is text and which is background?

The ratio itself does not change when you swap text and background, since the formula treats the lighter and darker luminance symmetrically. What can change is your subjective experience of reading it: some people find light text on a dark background prone to a blooming or smearing effect at the letterforms, particularly with astigmatism, while others simply prefer one polarity. Try both directions with the Swap button and judge by eye, not only by the number.

Is a "pass" here a legal guarantee of accessibility?

No single tool can guarantee full accessibility. A pass on this checker means the two colors you entered clear a specific, well-defined WCAG success criterion for contrast, which is one testable requirement among many (structure, keyboard access, alternative text and more) that make up an accessible page.

What counts as "large text" exactly?

At least 18 point type (about 24px) at a regular weight, or at least 14 point (about 18.66px) at a bold weight. Anything smaller than that is normal text and must meet the higher threshold.