How the contrast ratio is calculated
WCAG defines contrast as a ratio between the relative luminance of two colours:
ratio = (L1 + 0.05) / (L2 + 0.05)
where L1 is the lighter colour's luminance and L2 the darker. Relative luminance is not simple brightness — each channel is first linearised to undo the sRGB gamma curve, then weighted: 0.2126R + 0.7152G + 0.0722B.
Those weights reflect how the human eye responds. Green contributes over seven times more to perceived brightness than blue, which is why pure blue text on black is almost unreadable while pure green on black is not.
Ratios run from 1:1 (identical colours) to 21:1 (pure black on pure white).
What the thresholds require
WCAG AA — the level most legislation and procurement standards reference:
- 4.5:1 for normal text
- 3:1 for large text (18pt / 24px, or 14pt / 18.66px bold)
- 3:1 for interface components and meaningful graphics — button borders, form field outlines, icons that convey information
WCAG AAA — a higher bar, required in some contexts:
- 7:1 for normal text
- 4.5:1 for large text
Purely decorative graphics, disabled controls, and logotypes are exempt.
The failure that appears on almost every site
Light grey placeholder and secondary text is the single most common contrast failure on the web.
#999999 on white gives 2.85:1 — a clear AA failure. #767676 on white gives 4.54:1, which passes. The visual difference between those two greys is subtle; the accessibility difference is categorical.
Placeholder text is particularly problematic because it is often styled at very low contrast and used to convey the field's purpose in place of a label. That combination fails for far more users than it serves.
Who this affects
Contrast requirements are frequently treated as a compliance exercise, which understates who they are for.
Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Millions have low vision from cataracts, macular degeneration, diabetic retinopathy, or simply age — contrast sensitivity declines measurably from around 40.
And situational limitations affect everyone: a phone screen in sunlight, a cheap monitor at an angle, a dimmed display saving battery, tired eyes at the end of a day. Adequate contrast improves usability broadly rather than serving a minority.
Things the ratio does not capture
Colour alone as meaning. A red field border indicating an error fails for users who cannot distinguish it. Pair colour with an icon, text, or pattern — this is a separate WCAG requirement.
Semi-transparent colours. Contrast must be computed against the actual composited colour, not the declared one.
Text over images. The ratio varies across the image. A solid scrim or text shadow is usually needed rather than relying on the average.
Font weight and size. The formula ignores both, though thin fonts are measurably harder to read at identical contrast. The newer APCA algorithm under development for WCAG 3 accounts for this; until it lands, the current formula is what standards require.
Frequently asked questions
What contrast ratio does WCAG require?
AA requires 4.5:1 for normal text and 3:1 for large text and interface components. AAA requires 7:1 and 4.5:1 respectively. Large text means 18pt/24px, or 14pt/18.66px bold.
Why does grey text so often fail?
Because the difference between passing and failing greys is visually subtle. #999999 on white gives 2.85:1 and fails, while #767676 gives 4.54:1 and passes - yet they look very similar in isolation.
Do icons and borders need to meet contrast requirements?
Yes, at 3:1 under WCAG AA, when they convey meaning. That covers button borders, form field outlines, focus indicators, and informative icons. Purely decorative graphics are exempt.
Does the contrast ratio account for font weight?
No. The current formula ignores weight and size beyond the large-text threshold, even though thin fonts are harder to read at the same ratio. The APCA algorithm being developed for WCAG 3 addresses this.