Relative Luminance Calculator
Formats
You Might Also Need
The relative luminance calculator computes the WCAG relative luminance of any color — the linearised brightness figure every contrast ratio is built from.
What is Relative Luminance Calculator?
Relative luminance is the number underneath every accessibility verdict: the WCAG-defined brightness of a color after its sRGB channels are linearised and combined with vision's weighting — the green channel counting most, blue least. The relative luminance calculator computes that figure for any color you set, reporting the 0-to-1 value that contrast ratios are made from.
The definition deserves one paragraph of honesty, because the tool's whole value is computing it correctly.
- Luminance is not perceived lightness: it is a physically-rooted measure in which the channels are first linearised — undoing the gamma curve that display encodes apply — then combined with fixed coefficients approximating the eye's sensitivity.
- Skipping the linearisation is the classic error, and it silently corrupts every downstream ratio; the value here is the defined one, computed exactly as the WCAG formula prescribes, which is why the contrast tools that share this library agree with it to the digit.
What the raw number offers that ratios do not is the single-color view. Contrast is a relationship between two colors; luminance is a property of one — which makes it the right quantity for reasoning about a color in isolation: how much brightness headroom a surface has, whether two accents differ enough in luminance to be distinguishable by achromatopsia simulation, how a color will behave in the ratio maths before pairing it. The full conversion panel beside it shows the same color in every standard format — hex, RGB, HSL, OKLCH, LAB — so the luminance figure lands in context rather than in isolation.
Luminance is the number underneath every contrast claim, and reading it directly is sometimes the only honest way to answer a question. The definition is precise: linearise each channel from its gamma-encoded sRGB value, then weight the channels by their contribution to perceived brightness — roughly three tenths for red, six tenths for green and one tenth for blue. The weighting explains why parts of the guidance feel arbitrary until they are checked. Green carries so much brightness that a saturated green can be lighter than a mid grey, and blue so little that a deep blue sits close to black, and those are the surprises a ratio hides and a luminance value exposes. The practical uses are narrow but real: confirming that a hover state is genuinely darker than its resting state, ordering a ramp, or checking that a tinted surface is lighter than the one below it. Once the number is visible the palette's structure becomes obvious, because steps that are nearly the same show up as nearly the same value.
- As a wcag luminance of a color instrument, the tool is deliberately narrow: one color in, the defined luminance out, computed the way the specification says.
- For the two-color questions the number feeds, the contrast checkers and ratio calculator are one click away — but when the question is compute color luminance for a single value, this is the direct, linear rgb luminance value answer.
- Quoting the value in a review settles disagreements quickly, because two people arguing about which swatch is darker are usually arguing about perception while one number settles the physics.
How to use Relative Luminance Calculator
- Set the color whose luminance you need.
- Read the relative luminance value in the 0-to-1 scale.
- Feed it into contrast reasoning, or read the same color's other formats from the panel.
When to use Relative Luminance Calculator vs related tools
Use this when a single color's WCAG luminance is the question — headroom checks, achromatopsia reasoning, formula verification. Use the contrast checkers for two-color verdicts, and the perceptual lightness calculator when the question is perceived lightness rather than the WCAG figure. For a two-colour verdict the contrast ratio calculator turns the figure into a ratio, and the perceptual lightness calculator answers the appearance question that luminance alone does not.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.