WCAG Contrast Checker

How the contrast ratio is calculated

Low-contrast text is the most common accessibility failure on the web. Every year since it began, WebAIM's automated survey of the top one million home pages has found insufficient text contrast on roughly four out of five of them, far ahead of missing alternative text or unlabeled form fields.¹ Before you can fix a failing pair, it helps to understand exactly what the large number in this tool measures and why two colors that look distinct to you can still score poorly.

The relative luminance formula

The ratio compares the relative luminance of your two colors. Relative luminance is a measure of perceived brightness: the formula undoes the display's gamma encoding for each channel, then weights red, green, and blue by how strongly the human eye responds to each, with green contributing roughly ten times more than blue.²

Both values then pass through (L1 + 0.05) / (L2 + 0.05), where each 0.05 term models the small amount of light a real screen emits even when showing pure black. As a result, the scale runs from 1:1 for two identical colors up to a hard ceiling of 21:1 for pure black against pure white.

When the background is not one color

Real interfaces rarely hand you two flat colors. The ratio exists between exactly two colors, and the guidelines measure it against the specified background the text renders over in normal usage.³ Text on a photograph or a gradient therefore has no single ratio: every region of the backdrop forms its own pair with your text color. The honest method is the worst-case pair. The background region closest in lightness to the text color is where the ratio bottoms out, so sample that region, pair it with the text color, and treat that pair as the one that must clear the threshold. That sampled pair enters this checker like any other flat pair.

A solid backing removes the ambiguity entirely. Placing a scrim, a plate, or a solid band behind the text turns the situation back into two flat colors, and those two colors are what the checker measures directly. The boundary here is equally plain: this tool accepts exactly two flat colors, takes no image or gradient input, and offers no eyedropper, so the sampling decision happens in your design tool before the paste. When the design cannot live without the photo showing through, sample the worst-case region, verify the pair here, and keep the sampled value in your notes.

Semi-transparent colors

Semi-transparent colors hit the same wall. Both fields accept only fully opaque forms: six-digit hex, shorthand hex, rgb(), hsl(), hsv(), oklch(), and the CSS named colors all parse, while every alpha-bearing syntax, from rgba() to eight-digit hex, shows the unrecognized-format hint and keeps the last valid color. The reason is definitional rather than a missing feature. A translucent color has no contrast ratio of its own, because what appears on screen depends on what shows through it, so there is no single pair to measure until the layer is composited.

Flatten the color before you paste it. Composite the translucent layer over its actual background in your design tool, then check the resulting flat pair here. The arithmetic is small but worth seeing once: a fifty percent black overlay composited over white produces roughly #808080, and that gray, not the original rgba() value, is the color the checker needs paired against the text. One translucent brand tint therefore produces two different ratios over two different surfaces, which is exactly why the flattening step cannot be skipped. Check each surface separately whenever the tint spans a light region and a dark one.

What AA and AAA require for each tier

WCAG 2.1 does not apply one threshold to everything. Body text must reach 4.5:1 for AA conformance and 7:1 for AAA, while large text, defined as at least 24 CSS pixels at regular weight or roughly 18.7 pixels when bold, passes AA at 3:1 and AAA at 4.5:1 because thicker, taller strokes stay legible at lower contrast.⁴ The three rows in the preview panel mirror those tiers exactly, so the same color pair can pass comfortably as a heading while failing as body copy.

The third row covers something many checkers skip entirely. Under success criterion 1.4.11, the visual boundaries and states of user interface components, such as a button's outline or a text field's border, need at least 3:1 against adjacent colors.⁵ For this criterion, WCAG defines no enhanced AAA tier, which is why the UI row shows a single AA badge instead of two. If your button borders inherit a muted gray from a design system default, this row is the one that catches it.

What WCAG is, and what it is not

Behind these badges sits a document, not a law. WCAG, the Web Content Accessibility Guidelines, is a technical standard published by the W3C, and its success criteria are organized into three conformance levels: A, the lowest; AA, the middle tier; and AAA, the highest.⁶ Each criterion carries its level tag, so "passes AA" always refers to a numbered, testable statement rather than a general seal of approval. The tiers this checker reports are exactly those documented levels, nothing more and nothing less: a badge means one criterion, at one named level, passes for this pair of pixels.

WCAG itself legislates nothing. It is a standard that laws and procurement rules around the world reference, which is a crucial distinction: the binding requirements for any given project come from whichever law, regulation, or policy applies in that context, not from the W3C. Those policies differ by country, scope, and the WCAG version they build on.⁶ When your project must answer to a regulator rather than a design review, read the policy that governs it, because this checker measures contrast against the standard, not against the law.

Which version should the numbers come from, then? The thresholds on this page are WCAG 2.1's, and the current revision, 2.2, kept every contrast criterion unchanged: 1.4.3, 1.4.6, and 1.4.11 carry the same ratios under both versions. Version 2.2 added new success criteria in other areas, none of them revising the text or non-text contrast ratios this checker measures, so a pair that clears these rows meets the same contrast criteria under 2.2 as well.⁷ Check your policy for the version it names, and let that decide whether any of the newer criteria need a separate audit.

How Auto-Fix finds a passing color

Most contrast tools stop at telling you that you failed. When a row here fails, the Fix buttons go one step further and compute the nearest color that actually passes, keeping the character of your palette intact. The search runs in OKLab, a perceptually uniform color space, and adjusts only the lightness channel while holding hue and chroma constant, so a failing brand blue becomes a lighter or darker blue rather than drifting toward purple the way saturation tweaks in HSL often do.⁸

Some pairs can never pass

Under the hood, the tool searches lightness in both directions, toward black and toward white, and checks the true contrast ratio of the resulting screen color at every step. Whichever direction reaches your target with the smaller lightness change wins, which keeps the suggestion as close to your original color as the math allows. Some pairs simply cannot be fixed. Two mid-grays can never reach 7:1 no matter how far one of them moves, and in that case the button does not appear at all; the tool never offers a suggestion that would not pass.

Reading the color blindness preview

Roughly 1 in 12 men have some form of color vision deficiency, far more often than women, and most cases fall in the red-green range.⁹ The toggle above the preview re-renders your exact pair for protanopia, deuteranopia, and tritanopia, the three dichromatic forms in which one cone type is absent, by applying three fixed simulation matrices to the preview samples.¹⁰ Watching a red-on-green pairing collapse into two nearly identical browns makes a far more convincing argument for a palette change than any number can.

One thing the simulation deliberately does not do is change your results. The ratio is a property of the two colors themselves, so the ratio and every badge keep reporting the true pair while a filter is active.⁴ Treat the preview as a design instrument: it shows you why a numerically passing combination can still be hard to tell apart when the difference lives mostly in hue rather than in lightness.

Why a passing badge is not the finish line

A green badge means your pair clears a measurable bar, not that every reader will find it comfortable. Contrast requirements are minimums, and body text sitting exactly at 4.5:1 reads noticeably harder on a dim, uncalibrated laptop panel in a bright room than the same text at 7:1. For long-form reading, treating AAA as the target rather than the ceiling costs you very little in design freedom and buys real legibility for readers with low vision.

Color can't carry meaning alone

Contrast also cannot carry meaning by itself. Success criterion 1.4.1 requires that color is never the only way information is conveyed, so a chart that distinguishes series purely by hue, or a form that marks errors only by turning a border red, fails even when every pair in it passes this checker.² Pair the ratio with the color blindness preview before you commit a palette: when two states remain distinguishable in all three simulations and every row shows a passing badge, you have covered both the measurable and the perceptual side of the problem.

What the requirements exempt

Not every piece of text owes the ratio anything. Success criterion 1.4.3 sets out its exceptions plainly: incidental text, which covers text on an inactive user interface component, pure decoration, text nobody can see, and text that is part of a picture with significant other visual content, has no contrast requirement, and text that is part of a logo or brand name has none either.³ The logic behind the exemptions is information transfer. The criterion protects text that carries meaning, and the exempted categories carry none on their own, so a logo rendered in brand colors at a failing ratio remains conformant, and a disabled button's grayed label is exempt for exactly as long as it stays disabled.

The non-text rule runs a parallel course. Under 1.4.11, inactive components sit outside the 3:1 requirement, and so does any component whose appearance the user agent itself determines rather than the author.⁵ The caution that follows the exemption list matters more than the list: exempt is not the same as harmless. A decorative headline that disappears into its backdrop fails no criterion, yet it still reads badly for visitors with low vision. Treat the exemptions as the scope rule they are, not as design permission, and the badge tiers stay honest.