A number from 1:1 to 21:1 describing how different two colours are in lightness, used to judge whether text and interface elements can be read.
WCAG defines it as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colour. Normal text needs at least 4.5:1 and large text 3:1 for level AA; graphical objects and interface components need 3:1.
It measures lightness difference only. Two colours of very different hue can have a contrast ratio near 1:1 and be hard to tell apart for many readers.
Black on white is 21:1; mid grey #777777 on white is about 4.48:1, just short of AA for body text.
It is the testable core of accessible colour in digital products, and the reason hue alone never carries meaning safely.
Each colour's sRGB channels are converted to linear light and combined into a relative luminance, weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. The ratio is the lighter luminance plus 0.05, divided by the darker plus 0.05. With black at 0 and white at 1, the added 0.05 caps the scale at 21:1 where a plain ratio would run to infinity. The W3C's guidance is that computed values are not rounded, so a pair at 2.999:1 does not meet a 3:1 requirement.
| Text on background | Contrast ratio | WCAG 2.2 text level |
|---|---|---|
| Charcoal on Cream | 9.53:1 | AAA |
| Grey on White | 3.95:1 | Large text only |
| Slate Grey on White | 4.05:1 | Large text only |
| Red on Green | 1.28:1 | Fails |
| Yellow on White | 1.07:1 | Fails |
Charcoal has a relative luminance of 0.056 and Cream 0.961, so the ratio is (0.961 + 0.05) ÷ (0.056 + 0.05) = 9.53:1. Grey on White reaches 3.95:1, short of the 4.5:1 that body text needs. Red on Green, as different in hue as two colours get, scores 1.28:1: hue contributes nothing to the calculation.
How this was calculated: The WCAG 2.2 formula applied to the catalogue HEX values, with the lighter colour's luminance on top; the levels are those of success criteria 1.4.3 and 1.4.6 for normal-size text.
A brand's mid-tone colour is used as a button background with white text.
Many saturated oranges, greens and light blues fail 4.5:1 against white, and the formula rates black text higher even where white looks more natural. The fix is a darker step of the brand colour for buttons, not a judgement call per screen.
Placeholder text, input borders and disabled-looking labels are set in pale grey.
Text needs 4.5:1 and the boundary of a control needs 3:1 against its surroundings. A fashionable light grey meets neither on a white page, and the form becomes hard to use for anyone with reduced contrast sensitivity.