How bright light from a surface or screen is, weighted by the eye's sensitivity to each wavelength.
Measured in candelas per square metre. WCAG's relative luminance is the Y value of a colour on a 0–1 scale; the eye is far more sensitive to green than to blue, so a pure blue has low luminance despite looking vivid.
Luminance is not the same as lightness. Lightness (L*) is a perceptual scale; equal steps in luminance do not look like equal steps.
Pure sRGB blue has a relative luminance of about 0.07, pure green about 0.72.
Contrast ratios, readable charts and greyscale printing all depend on luminance difference, not hue difference.
Luminance is the luminous intensity leaving a surface per unit of its projected area in a given direction, in candelas per square metre. A luminance meter, or a spectroradiometer weighted by the eye's daytime sensitivity curve, reads it directly from a screen or a lit wall. For a colour written in sRGB, the relative figure that WCAG uses is calculated instead: linearise each channel, then take 0.2126 of red, 0.7152 of green and 0.0722 of blue, giving 0 for black and 1 for the display's white.
| Colour | HSL lightness | Relative luminance | CIELAB L* |
|---|---|---|---|
| Blue #0000ff | 50% | 0.072 | 32.3 |
| Red #ff0000 | 50% | 0.213 | 53.2 |
| Magenta #ff00ff | 50% | 0.285 | 60.3 |
| Lime #00ff00 | 50% | 0.715 | 87.7 |
| Cyan #00ffff | 50% | 0.787 | 91.1 |
| Yellow #ffff00 | 50% | 0.928 | 97.1 |
All six are 50% light by HSL. Their luminance runs from 0.072 for Blue to 0.928 for Yellow, a factor of 13. The green primary alone carries 0.715 because the eye's sensitivity peaks in the green part of the spectrum. Photographed in black and white, this row of equally 'light' colours would run from near-black to near-white.
How this was calculated: WCAG relative luminance: each sRGB channel is linearised and the three are weighted 0.2126, 0.7152 and 0.0722, the weights the standard takes from the sRGB primaries.
A chart distinguishes its series by hue alone, with all the colours at similar luminance.
Printed in greyscale, photocopied, or seen by a reader with a colour-vision deficiency, the series merge. Giving each a distinct luminance keeps them apart when hue is lost.
Blue is used for small text or thin lines on a dark background.
Pure blue carries so little luminance that it is close to black as far as contrast is concerned, as the table shows. Links in dark themes need a much lighter blue than the same links on white.