How this instrument works
Contrast ratio is a single number describing how far apart two colors sit in perceived brightness — 1:1 means they're indistinguishable, 21:1 means pure black against pure white, the widest gap sRGB can produce. The W3C defined the formula in WCAG technique G18 so 'is this text readable' could stop being a judgment call and become arithmetic: convert both colors to relative luminance, then compare (lighter + 0.05) to (darker + 0.05).
Relative luminance takes a detour most people don't expect. You can't just average the R, G and B values — displays don't render color linearly, and neither does the eye perceive brightness linearly. Each channel is first 'linearized' (undoing the sRGB gamma curve), then weighted 0.2126 red, 0.7152 green, 0.0722 blue — green dominates because human vision is far more sensitive to green light than to red or blue at equal numeric intensity. Only after that weighting do you get a luminance value between 0 (black) and 1 (white) that behaves the way contrast math needs it to.
The payoff is the WCAG AA thresholds built on top of this ratio: 4.5:1 for normal body text, relaxed to 3:1 for large text (18pt+, or 14pt+ bold), because bigger glyphs stay legible at lower contrast. Falling under those lines isn't illegal anywhere, but it does mean a meaningful slice of readers — anyone with low vision, anyone on a washed-out screen in sunlight — will struggle to read it.
- Enter Color A's red, green and blue values (0-255) — this is usually your text color.
- Enter Color B's red, green and blue values (0-255) — usually the background it sits on.
- Read the contrast ratio. The calculator automatically treats whichever color is lighter as the numerator, so it doesn't matter which color you put in which slot.
- Compare the result to 4.5:1 (normal text, WCAG AA) or 3:1 (large text, WCAG AA) to check whether the pairing passes.
Worked example — gray body text on white
A common 'is this gray too light' question: #767676 text, RGB(118,118,118), on a white #FFFFFF background. Scale 118 to 0-1: 118/255 = 0.4627, above the 0.03928 cutoff, so it runs through the curve step: ((0.4627+0.055)/1.055)^2.4 = 0.1812. Red, green and blue all carry that same value here since the gray is neutral, so the weighted sum gives the same result: L1 = 0.2126(0.1812) + 0.7152(0.1812) + 0.0722(0.1812) = 0.1812.
White linearizes to exactly 1.0 (255/255 = 1.0, and the curve maps 1.0 to 1.0), so L2 = 1.0. Ratio = (1.0 + 0.05) / (0.1812 + 0.05) = 1.05 / 0.2312, which comes out to about 4.54:1 — just over the 4.5:1 WCAG AA minimum for normal text. This is exactly why #767676 shows up so often in accessibility checklists: it's roughly as light a gray as you can use on white and still pass, which the calculator's own gray-on-white test case confirms independently.
Push the gray any lighter — say #808080, RGB(128,128,128) — and the ratio drops under 4.5:1, failing normal-text AA even though it would still clear the more forgiving 3:1 large-text bar.
Questions
What is a good contrast ratio for text?
For WCAG 2.x Level AA, the working target is 4.5:1 for normal-size text and 3:1 for large text (18pt+/24px+, or 14pt+/19px+ bold). Level AAA raises the bar to 7:1 and 4.5:1 respectively. Pure black (0,0,0) on pure white (255,255,255) gives the maximum possible sRGB contrast, 21:1, which comfortably clears every tier — most real designs deliberately soften that down for visual reasons, then check the softened pairing against these thresholds.
Why is the maximum contrast ratio 21:1 and not some rounder number?
Because 21:1 falls straight out of the formula's own bounds. Relative luminance L runs from 0 (black) to 1 (white), and the ratio is (Lighter+0.05)/(Darker+0.05). Push L to its extremes — 1 and 0 — and you get (1+0.05)/(0+0.05) = 1.05/0.05 = 21 exactly. The +0.05 padding on both sides of the formula exists so the ratio never divides by zero and never runs unbounded; it's also why the floor is 1:1 rather than 0:1 — identical colors always self-compare to exactly 1.
Does it matter which color I enter as Color A vs Color B?
No. The formula always divides the lighter color's luminance by the darker one's, so swapping text and background — or entering them in either order — gives an identical ratio. That's a deliberate property of taking the max and min of the two luminances rather than assuming one field is always 'the light one', and it means you can't get this wrong by putting your background color in the wrong box.
Why do I have to linearize RGB before computing luminance?
Because sRGB values are gamma-encoded for how displays draw color, not for how bright things actually look. A pixel value of 128 is not half as bright as 255 — the sRGB standard compresses the low end so more of the numeric range is spent where the eye notices small changes most. Relative luminance needs actual physical brightness, so each channel is first decoded back to a linear scale (the piecewise formula from WCAG G18: divide by 12.92 near black, otherwise raise to the power 2.4) before the 0.2126/0.7152/0.0722 weights are applied.
Why does green get the biggest weight in the luminance formula?
Because the eye's cone cells are far more sensitive to green wavelengths than to red or blue at equal physical intensity. A pure green pixel reads as noticeably brighter than a pure red or pure blue pixel of the same numeric value, so the standard weights green at 0.7152 versus 0.2126 for red and just 0.0722 for blue when the three channels combine into one luminance figure — the same weighting used in ITU-R BT.709, the HDTV color standard the WCAG formula borrows from.
Does this contrast ratio account for color blindness?
No — it only measures luminance contrast (light versus dark), which red-green and blue-yellow color-vision deficiencies don't affect. That's actually useful: a pairing that passes WCAG contrast will generally still read clearly for most color-blind visitors, because it isn't leaning on hue difference at all. But two colors that look very different to typical color vision (a mid red and a mid green of similar brightness, say) can still fail this ratio if their luminances happen to be close — hue alone never guarantees contrast.