WCAG Color Contrast Checker
Enter a foreground and background color to see the exact WCAG contrast ratio with live AA and AAA pass/fail for normal text, large text and UI components — computed in your browser, nothing uploaded.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Walks the chosen color's lightness toward pure black or pure white in sRGB, in 1% steps, keeping its hue — then returns the nearest color whose ratio, measured with the same WCAG-2 formula above, meets your target. Only lightness changes.
This pair already passes — no fix needed.
#000000
Nothing leaves your browser. The luminance maths, the ratio and every pass/fail badge are computed on your own device with plain JavaScript. There are no network requests, no logging and no analytics — the page keeps working with your network disconnected.
What a contrast ratio actually is
Contrast ratio is a single number, from 1:1 to 21:1, describing how different two colors are in lightness. It is not about which hues you picked — it compares how much light each color reflects, so a bright yellow and a bright cyan can score barely above 1:1 even though they look nothing alike. 1:1 means the two colors are identical (invisible text); 21:1 is the maximum, reached only by pure black on pure white. This tool computes that number the way the WCAG specification defines it, then checks it against every published threshold at once.
How the number is worked out
Each color is turned into its relative luminance. Take the default foreground #767676: all three channels are 118, which is 118/255 = 0.463. Because 0.463 is above 0.03928 it gets gamma-expanded — ((0.463 + 0.055) / 1.055)^2.4 ≈ 0.181 — and since red, green and blue are equal here the weighted sum 0.2126·L + 0.7152·L + 0.0722·L is just 0.181. White's luminance is 1.0. The ratio is (1.0 + 0.05) / (0.181 + 0.05) = 1.05 / 0.231 ≈ 4.54:1. That +0.05 models a little ambient light bouncing off the glass, which is exactly why the scale stops at 21 rather than running to infinity.
AA versus AAA, normal versus large
WCAG defines two conformance levels and two text sizes, giving four text thresholds plus a separate one for interface parts:
| Requirement | Applies to | Ratio |
|---|---|---|
| AA | Normal text | 4.5:1 |
| AA | Large text | 3:1 |
| AAA | Normal text | 7:1 |
| AAA | Large text | 4.5:1 |
| 1.4.11 | UI components, graphics | 3:1 |
AA is the level most laws and contracts point to (the EU EN 301 549 standard, the US ADA/Section 508 guidance and similar rules all reference WCAG AA). AAA is a stricter target you meet where you can rather than site-wide. Large text — 18pt (≈24px) regular, or 14pt (≈18.66px) bold — earns the lower bar because thicker strokes stay legible with less contrast. Our default #767676 on white lands at 4.54:1: it clears AA for body text by a whisker, passes AAA only when the text is large, and would fail AAA for normal copy.
The UI-components rule people forget
Text is not the only thing that must be visible. WCAG 2.1's success criterion 1.4.11 Non-text Contrast asks for at least 3:1 between a UI component or meaningful graphic and its surroundings: the border of a text input, an unchecked checkbox, a focus ring, the slice colors in a pie chart, an icon that conveys state. A common failure is a form field outlined in a pale #e0e0e0 on white — about 1.3:1 — which sighted-but-low-vision users simply cannot find. The UI badge above checks that 3:1 bar for you.
Common mistakes
Trusting a bright color to be readable. Perceived vividness and luminance contrast are unrelated — pure yellow #ffff00 scores about 1.07:1 on white and fails every text threshold. Checking against the wrong background. Test your text against the exact surface it ships on, not a generic white; a card, a tinted section and a hero image are three different backgrounds. Forgetting transparency. If your text uses opacity or an alpha below 1, the eye sees it blended onto what's behind — flatten to the composited color before checking. Reading contrast off a solid swatch. Thin anti-aliased fonts render lighter than a filled block, so borderline pairings that pass here can still feel weak at small sizes — leave headroom. Assuming a pass means accessible. Contrast ignores hue, so a red/green pair can pass the ratio yet be invisible to color-blind users.
Honest limits
This checker implements the WCAG 2.1 contrast-ratio formula exactly, but that formula itself has known blind spots: it is a luminance-only measure and does not account for hue, chroma, font weight or the newer APCA model being explored for WCAG 3, which weights light and dark text differently. It compares two opaque sRGB colors — it can't reason about semi-transparent layers, wide-gamut Display-P3 colors, or text sitting on a gradient or photo (check the lightest and darkest points of such a background separately). And a green light on every badge confirms the numbers, not the whole experience: pair it with real testing, sensible font sizes and never relying on color alone. Everything is computed locally; nothing you enter is uploaded.
Want the maths from first principles? Learn more in our WCAG contrast guide → — it works out relative luminance, the (L1+0.05)/(L2+0.05) ratio and every threshold by hand.