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.

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.

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 and 1 in 200 women have some form of color vision deficiency, most commonly in the red-green range.⁶ The toggle above the preview re-renders your exact pair through established simulation matrices for protanopia, deuteranopia, and tritanopia, the three dichromatic forms in which one cone type is absent.⁷ 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. WCAG conformance is defined against the actual colors your page renders, not against a simulated view of them, 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.