Relative luminance is the foundation of every WCAG color-contrast check. It converts a color into a single number that represents how much light it emits to the eye, so two colors can be compared objectively for legibility.
How it works
Each sRGB channel (0–255) is first divided by 255, then linearized with the WCAG piecewise gamma transform:
c_srgb = channel / 255
c_lin = c_srgb / 12.92 if c_srgb <= 0.03928
c_lin = ((c_srgb + 0.055) / 1.055) ^ 2.4 otherwiseThe three linear channels are then combined with the Rec. 709 luminance weights:
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_linThe result L ranges from 0 for pure black to 1 for pure white.
Using it for contrast
Once you have the luminance of a foreground and a background color, the WCAG contrast ratio is (Llighter + 0.05) / (Ldarker + 0.05). A ratio of 4.5 or higher passes AA for normal text, and 3 is enough for large text. Note that luminance is not the same as HSL lightness: it is perceptually weighted toward green, so a saturated green will read far brighter than a saturated blue of the same nominal lightness.
Why the gamma linearization step matters
sRGB is a gamma-encoded color space, meaning the numeric values stored in a file (0–255 per channel) are not proportional to physical light intensity. The encoding compresses the light information in a way that matches the non-linear sensitivity of CRT monitors and, by convention, human display devices since. If you skip linearization and directly apply the luminance coefficients to the raw sRGB values, you get a number that looks roughly right for bright colors but is significantly wrong for dark ones. The WCAG spec requires the piecewise linearization specifically to produce a perceptually accurate luminance measure for accessibility checking.
The perceptual weights: why green dominates
The coefficients 0.2126, 0.7152, and 0.0722 reflect the spectral sensitivity of the human eye under normal lighting (photopic vision). The cone cells responsible for color vision are most sensitive to wavelengths in the green range, less sensitive to red, and least sensitive to blue. This means a pure blue (#0000FF) has a relative luminance of only 0.072 — close to black in perceived brightness — while a pure green (#00FF00) is nearly 0.715, much closer to white. This is why blue text on a white background needs a large font size to pass WCAG contrast requirements even when it “looks” readable.
Practical contrast checking workflow
To check whether two colors meet WCAG contrast requirements:
- Compute relative luminance (L1) for the lighter color and (L2) for the darker one
- Apply the contrast ratio formula:
(L1 + 0.05) / (L2 + 0.05) - Compare against the threshold for your use case:
| Text type | AA minimum | AAA minimum |
|---|---|---|
| Normal text (under 18 pt) | 4.5:1 | 7:1 |
| Large text (18 pt+ or 14 pt bold) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | — |
A common pitfall is checking the foreground color against the page background but forgetting to check against card or component backgrounds that the text also appears on.
Luminance versus perceived lightness
Relative luminance as defined by WCAG is a linear measure of physical light emission. HSL’s L (lightness) and HSV’s V (value) are simpler geometric transforms of RGB that do not account for perceptual weighting — they treat all three channels as equal contributors. This is why the HSL lightness of pure green (#00FF00) and pure blue (#0000FF) are both 50%, yet their WCAG luminances differ by a factor of ten. Design tools sometimes label their lightness channels as “luminance” loosely; if accessibility is your goal, always use the WCAG formula rather than a tool’s informal brightness readout.