How this calculator works
Contrast ratio uses relative luminance, a weighted sum of the linear red, green and blue components of a colour. Each 8-bit channel is first divided by 255, then linearised: small values are scaled by 12.92 and larger values follow a power curve of 2.4. The weights reflect human sensitivity, with green contributing most. The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, so it runs from 1 for identical colours to 21 for black on white. WCAG asks for 4.5 to 1 for normal text and 3 to 1 for large text at level AA, and 7 to 1 and 4.5 to 1 at level AAA.
Formula
linear channel = c / 12.92 when c <= 0.04045, otherwise ((c + 0.055) / 1.055)^2.4, where c is the 8-bit value divided by 255. relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B. contrast ratio = (L lighter + 0.05) / (L darker + 0.05).
Worked example
Black has a relative luminance of 0 and white has 1, so the ratio is (1 + 0.05) / (0 + 0.05) = 21. The mid grey #767676 has a relative luminance of 0.18116, so against white the ratio is 1.05 / 0.23116 = 4.542, which passes AA for normal text but fails AAA. A lighter grey, #777777, has a luminance of 0.18447 and a ratio of 4.478, which just fails AA for normal text while still passing for large text.
Advertisement
Frequently asked questions
What counts as large text?
WCAG treats text of at least 18 point, or 14 point when bold, as large. That is roughly 24 CSS pixels, or 18.66 pixels when bold, which is why headings can use the lower 3 to 1 threshold.
Is 21 the highest possible ratio?
Yes. Pure black on pure white gives 21, and no pair of opaque colours can exceed it because luminance stays between 0 and 1. A ratio of 1 means the two colours are identical.
Does this account for transparency?
No. It compares two opaque colours. If either colour has an alpha channel, composite it onto its real background first, then enter the resulting solid colour.
Does passing WCAG guarantee good readability?
No. Contrast is necessary but not sufficient: font size, weight, letter spacing and the viewer's display all matter. The ratio is a useful floor, not a full accessibility check.