The accessibility contrast ratio is a single number between 1:1 and 21:1 that describes how much luminance separates two colors, and it is the exact metric the Web Content Accessibility Guidelines (WCAG) use to decide whether text is readable against its background. The math behind it converts each sRGB color channel from a gamma-encoded 0 to 255 value into linear light, then combines the three channels with fixed perceptual weights of 0.2126 for red, 0.7152 for green, and 0.0722 for blue to produce a relative luminance value L. The contrast ratio is then (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color and L2 is the darker one. Identical colors land at 1:1 and pure black on pure white tops out at 21:1, so every text and background pair you can ever build falls somewhere inside that range. That number is not a designer's opinion, not a brand guideline, and not a feeling; it is a fixed formula the accessibility community has agreed on and that procurement officers, regulators, and plaintiffs increasingly enforce.
What Accessibility Contrast Ratio Actually Measures
The accessibility contrast ratio measures one specific thing: the luminance difference between two colors. Luminance is how bright a color appears on a screen, weighted toward the green channel because human eyes are most sensitive to green. Two colors can look wildly different to the eye and still fail the contrast test if they are close in brightness. The reverse is also true: two colors that look fairly similar can score a very high ratio if one is dark and the other is light.
That is why the ratio is symmetric. Swap the foreground and background and you get the same number, because the formula divides the lighter color's luminance by the darker one's, then adds 0.05 to each side so the result can never collapse to zero. The 0.05 constant prevents a degenerate division when both colors are perfectly black, which would otherwise leave you with 0:0 instead of a usable score. It also slightly compresses the top end so two near-white colors still register as distinct.
The range is fixed. Identical colors land at exactly 1:1 because both luminances are equal and the 0.05 offsets cancel out. Pure black against pure white gives 21:1, the maximum the formula allows. Every brand color, every hex code, every design token falls somewhere between those two endpoints, which is why the metric is so useful: there is a single number you can read, compare, store in a style guide, and defend in an audit.
The WCAG Numbers You Need to Hit
The Web Content Accessibility Guidelines translate that single number into four concrete pass thresholds. Level AA, the standard most public-facing sites aim for, requires at least 4.5:1 for normal body text and at least 3:1 for large text. Level AAA, the stricter ceiling used for content where extra legibility matters, requires 7:1 for normal text and 4.5:1 for large text. A separate rule, called non-text contrast, asks for at least 3:1 for UI components, icons, and graphical objects such as form field borders and focus indicators.
| WCAG Level | Normal text | Large text | Non-text (UI and graphics) |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
"Large text" has its own definition. WCAG treats text as large when it is at least 18 point (24 pixels) in regular weight, or at least 14 point (about 18.66 pixels) when it is bold. Thicker, bigger letters are easier to read, which is why the same color pair can pass for a heading but fail for a paragraph. Aim your highest contrast ratios at body copy and small UI text, and treat 3:1 as the relaxed ceiling for big headings, icons, and decorative graphics.
Why Luminance Contrast Matters for Real Users
Color vision deficiency is far more common than most designers assume. Color-blindness prevalence runs into the millions worldwide, and millions more readers have low vision, cataracts, or simply read on a cheap screen in bright sunlight. Luminance contrast is the single property that stays legible across all of those conditions, because it is anchored to brightness rather than to specific hues. A reader with red-green color blindness and a reader with full color vision both see the same luminance gap; that is exactly what the formula tests.
It is also a legal requirement in many places. The Americans with Disabilities Act (ADA) is routinely applied to websites in the United States, Section 508 mandates accessible contrast for federal agencies, and the European standard EN 301 549 references WCAG directly for public-sector sites. A passing accessibility audit is no longer a nice-to-have; it is increasingly treated as a compliance baseline. The contrast ratio is one of the easiest things to get right, because it is a single number with a fixed formula. Missing it is also one of the easiest things for a regulator, a procurement officer, or a complainant to point at. The W3C publishes the underlying Contrast (Minimum) success criterion as the canonical reference, and any checker is just an implementation of that specification.
How to Test a Color Pair with the Color Contrast Checker
- Set the foreground color using the color picker or by typing a hex value such as #111111.
- Set the background color the same way, for example #ffffff.
- Read the contrast ratio and the AA and AAA pass or fail badges for normal, large, and non-text, then adjust either color until the pair clears the level you need.
To walk through a real number, take #767676 on white. Each sRGB channel is 118 divided by 255, about 0.4627. Because that value sits above the 0.03928 sRGB threshold, the linear-light conversion is ((0.4627 + 0.055) divided by 1.055) raised to the power 2.4, which works out to roughly 0.1811. Relative luminance is the weighted sum 0.2126 × 0.1811 plus 0.7152 × 0.1811 plus 0.0722 × 0.1811, which simplifies to 0.1811 because the three weights add up to exactly 1.0000 and all three channels are equal. The ratio is then (1.0 + 0.05) divided by (0.1811 + 0.05), or 1.05 divided by 0.2311, which is about 4.54:1. That is the famous gray-on-white pair that just barely passes AA for normal text; any darker and you fail, any lighter and the contrast slips below the threshold. Use the Color Contrast Checker to confirm this number and to test your own palette against the same formula in real time.
What the Result Does and Does Not Tell You
The contrast ratio is a measure of luminance, not of hue. Two colors with very different hues but similar brightness, such as a red on a green, can still fail WCAG even though they look obviously distinct to many viewers. That is exactly why relying on color alone to convey meaning is discouraged in WCAG; pair it with text labels, icons, or underlines so the information still reaches readers who cannot separate the two hues.
There are also practical edge cases the formula does not handle directly. Text placed over a gradient or a photograph has an effective background that shifts from one side of the element to the other, so the safe move is to test against the lightest and darkest regions the type actually sits on. Semi-transparent overlays compound the problem, because the effective color depends on whatever is behind them. Placeholder text, disabled form states, focus rings on tinted surfaces, and thin decorative fonts are common failure spots worth double-checking with the checker, since designers tend to focus on body copy and forget the supporting text.
Everything runs locally in your browser, which means you can test brand palettes and design tokens privately without uploading anything. That makes it practical to iterate on a pair until both AA and AAA pass, instead of settling for "good enough" on a single badge.
Practical Tips for Hitting the Standards Without Redesigning
Treat AA as a floor, not a ceiling. If your body copy passes 4.5:1 by a tenth of a point, it will look thin on glare-heavy screens or for readers with low vision, so aim for AAA where you can. Large, bold headings have a much easier threshold (3:1 for AA, 4.5:1 for AAA), which is a useful reason to lean on typographic weight rather than color alone.
Test your brand palette against pure white and against pure black first. Many saturated brand colors, especially mid-tone blues and greens, sail through 3:1 for UI but fall short of 4.5:1 for body text on white. The fix is usually a small shift toward a darker, less saturated variant for body copy, while leaving the brighter brand color for headings, icons, and buttons where the 3:1 non-text rule applies. For a broader reading of how this fits into a real design workflow, the practical guide to accessibility contrast walks through a similar process across more environments.
Finally, remember that contrast is a property of the pair, not of either color in isolation. The same hex code that fails for body text on white may pass for body text on near-black, and the inverse is just as true. Re-test every combination before you ship, and remember that legal and user-experience reasons both push in the same direction: pick the color pair with the largest ratio you can, especially where the smallest text lives.