WCAG Color Contrast Checker
Pick a text color and a background color to get the exact WCAG 2.x contrast ratio, pass/fail verdicts for AA and AAA at normal and large text sizes, a live sample preview, and a one-click nearest-passing adjustment when the pair falls short.
Pick your colors
Normal text (16px): The quick brown fox jumps over the lazy dog.
Large text (24px): Grumpy wizards make toxic brew.
Design with accessible colors in Moda
Apply the passing pair to slides, social posts, and web pages on a real canvas.
Try Moda free →What AA and AAA mean in practice
WCAG level AA is the standard most laws and procurement policies reference (including ADA lawsuits and the European Accessibility Act): 4.5:1 for normal text and 3:1 for large text. AAA is the stricter enhanced tier — 7:1 and 4.5:1 — typically reserved for reading-heavy interfaces or audiences with known low vision. In practice: aim for AA on everything, and treat AAA as the target for body copy on content sites. "Large text" is defined as at least 24px regular or about 18.7px bold; a 24px headline can legally use a pair that its 16px caption cannot.
How the ratio is calculated
The tool computes each color’s relative luminance per the WCAG spec — sRGB channels are linearized (undoing gamma), then weighted 21.26% red, 71.52% green, and 7.22% blue — and the ratio is (lighter + 0.05) / (darker + 0.05). The result runs from 1:1 (identical colors) to 21:1 (black on white). Because the formula is symmetric, swapping text and background never changes the ratio — the swap button exists for previewing, not for gaming the number.
How the suggested fix works
When a pair fails AA, the tool walks the text color’s HSL lightness away from its current value one point at a time — in both directions — and offers the closest step that reaches 4.5:1. Hue and saturation are left alone, so the fix stays recognizably your color; it just gets darker or lighter until it passes. If no lightness of that hue can pass (common against mid-gray backgrounds, where even black tops out around 5.3:1), the tool says so — the fix then is to change the background.
Contrast ratio is not the whole story
A passing ratio does not guarantee readable design: thin font weights underperform their ratio, text over images or gradients has no single background to measure against (measure the worst-case region), and WCAG 2.x famously scores some white-on-orange pairs as failing while dark-on-orange passes, against many people’s perception. The ratio is also not a color-blindness test — red/green confusability is a separate issue our color blindness simulator covers. Treat 4.5:1 as a floor, not a finish line.
Frequently asked questions
What counts as "large text" for the 3:1 threshold?
At least 18pt (24px) at regular weight, or at least 14pt (about 18.7px) at bold. Anything smaller must meet the normal-text thresholds: 4.5:1 for AA, 7:1 for AAA.
Does the contrast ratio change if I swap text and background?
No. The WCAG formula compares the lighter and darker luminance regardless of which is the text, so the ratio is identical both ways. The swap button is for previewing the inverted design, and inverted pairs can still feel very different to read even at the same ratio.
Do these thresholds apply to icons and UI controls too?
Graphics and interactive component boundaries have their own WCAG criterion (1.4.11, non-text contrast) requiring 3:1 against adjacent colors. This tool measures any two colors, so you can test an icon against its background — just read the result against the 3:1 bar rather than 4.5:1.
Why does the suggested fix sometimes not appear?
The suggestion only changes lightness, keeping your hue and saturation. Against backgrounds near mid-gray, no lightness of any hue reaches 4.5:1 — even pure black only manages about 5.3:1 against #808080 — so there is nothing honest to suggest and the tool tells you to adjust the background instead.
Is 4.5:1 enough for placeholder or disabled text?
WCAG exempts genuinely disabled controls from the contrast requirement, but placeholder text that carries real information (like a format hint) is not exempt — it needs 4.5:1 like any other normal text. The common light-gray placeholder at around 2.6:1 is one of the most frequent audit findings.