How the contrast ratio is calculated
A contrast ratio is not a subjective judgement. It is a fixed calculation on two colors, defined in the WCAG specification, running from 1:1 to 21:1. This walks through every step with real numbers, explains where the thresholds come from, and is honest about what the number does not capture.
Step one: normalise the channels
Take #2563EB. Its channels are 37, 99 and 235. Divide each by 255 so they run 0 to 1.
Step two: undo the display gamma
The numbers in a hex code are not proportional to the light a screen emits. sRGB stores values with a curve applied, so most of the precision sits where eyes are sensitive. To measure light, the curve has to come off. WCAG specifies the piecewise function: below or equal to 0.03928, divide by 12.92; above it, use ((c + 0.055) / 1.055)^2.4.
Step three: weight the channels
Eyes are not equally sensitive to the three primaries. Green contributes most of the perceived brightness, blue almost none. The specification fixes the weights at 0.2126, 0.7152 and 0.0722.
| Channel | Raw | Divided by 255 | Linearised | Weight | Contribution |
|---|---|---|---|---|---|
| Red | 37 | 0.1451 | 0.0185 | 0.2126 | 0.0039 |
| Green | 99 | 0.3882 | 0.1248 | 0.7152 | 0.0892 |
| Blue | 235 | 0.9216 | 0.8308 | 0.0722 | 0.0600 |
| Total | Relative luminance | 0.1532 | |||
Step four: the ratio
With both luminances in hand, the ratio is (L1 + 0.05) / (L2 + 0.05), lighter over darker. White is 1 by definition, so #2563EB on white is (1 + 0.05) / (0.1532 + 0.05), which is 5.17:1.
The 0.05 is a flare allowance. It stands in for the ambient light that reflects off any real screen and lifts the true black a little. It also keeps the arithmetic finite: without it, anything on pure black would divide by zero. It is why the scale tops out at 21 rather than at infinity.
Where the thresholds come from
The numbers are set by success criteria, not by taste. Success criterion 1.4.3 Contrast (Minimum), level AA, requires 4.5:1 for normal text and 3:1 for large text. 1.4.6 Contrast (Enhanced), level AAA, raises those to 7:1 and 4.5:1. 1.4.11 Non-text Contrast, level AA, requires 3:1 for interface components and meaningful graphics.
Large text gets a lower bar because bigger shapes survive lower contrast. WCAG defines it as at least 18 point, about 24px, or 14 point bold, about 18.66px bold.
WCAG 2.2 is a W3C Recommendation, most recently revised on 12 December 2024, and it carries all three criteria over from 2.1 unchanged. A checker labelled 2.1 and one labelled 2.2 compute the same value.
Five cases where the number misleads
| Pair | Sample | Ratio | Note |
|---|---|---|---|
| #767676 on #FFFFFF | Sample | 4.54:1 | The lightest grey that still passes AA on white. |
| #777777 on #FFFFFF | Sample | 4.48:1 | One step lighter, and it fails. |
| #FFFF00 on #FFFFFF | Sample | 1.07:1 | Yellow on white: a classic near-invisible pass attempt. |
| #0000FF on #000000 | Sample | 2.44:1 | Blue on black: passes nothing, looks worse than the number. |
| #1A9D5A on #D1344B | Sample | 1.40:1 | Green on red: fails every level, and would still be the worst possible pair for red-green color blindness even if it passed. |
The first two rows are worth staring at. #767676 on white is 4.54:1 and passes. #777777 is 4.48:1 and does not. One step of grey decides compliance, and no human eye can tell the two apart. That is the nature of a threshold, and it is a good reason to aim above the line rather than at it.
What the ratio does not model
- Hue difference. Two colors of similar luminance can be impossible to tell apart and the ratio will not warn you.
- Color vision deficiency. Nothing in the formula knows that green on red is the hardest pair for the most common deficiency. A green-on-red combination that did clear the threshold would still be a bad choice, and the number would say nothing.
- Font weight and size beyond the large-text cutoff. Thin 300-weight text at 4.6:1 is worse in practice than a bold face at 4.4:1, and the criterion cannot see the difference.
- Saturated blues on dark backgrounds, which read as blurred at small sizes whatever the number says.
APCA, the perceptual contrast algorithm discussed for a future version of the guidelines, addresses several of these with a different calculation and different thresholds. It is not interchangeable with the WCAG ratio and the two must never be mixed in one report. This site reports the WCAG number only.
Related
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.