Relative Luminance Calculator
Calculate the WCAG relative luminance of any hex color. Used in contrast ratio calculations for web accessibility.
How to use this tool
- Enter a hex color code.
- The tool returns its relative luminance (0–1) per the WCAG 2.1 formula.
- Luminance 0 = absolute black; 1 = perfect white.
The WCAG relative luminance measures the brightness of a color on a scale from 0 (black) to 1 (white). It is the basis for computing contrast ratios.
Formula
Normalize each channel: r = R/255, g = G/255, b = B/255 (from hex input).
Apply piecewise gamma linearization to each channel:lin(c) = c / 12.92 if c ≤ 0.03928,
else lin(c) = ((c + 0.055) / 1.055)2.4
Combine with perceptual weights:L = 0.2126 × lin(r) + 0.7152 × lin(g) + 0.0722 × lin(b)
How it works
Relative luminance is the WCAG-standardized measure of a color's perceptual brightness, normalized so that absolute black is 0 and absolute white is 1. It accounts for the sRGB gamma curve (the non-linear encoding used by screens to efficiently use bit depth in darker tones) by linearizing each channel before applying psychophysical coefficients that reflect how sensitive the human visual system is to red (≈21%), green (≈72%), and blue (≈7%) light.
A common mistake is using the raw 8-bit channel values or the gamma-encoded normalized values (divided by 255 but not linearized) directly in the luminance formula — this skips the gamma correction step and overestimates the luminance of dark colors, producing inaccurate results that differ most noticeably in the shadow end of the tonal range.
Worked example
Relative luminance of white (#ffffff)
- Parse hex: R = 255, G = 255, B = 255; normalize to r = g = b = 1.0.
- Each normalized value exceeds 0.03928, so lin(1.0) = ((1.0 + 0.055)/1.055)^2.4 = (1.055/1.055)^2.4 = 1.0.
- L = 0.2126 × 1.0 + 0.7152 × 1.0 + 0.0722 × 1.0 = 1.0.
1
Common mistakes to avoid
- Confusing relative luminance (0 to 1 scale, WCAG) with perceived lightness (0 to 100% in L*ab or HSL) -- they correlate but are not the same value.
- Skipping the gamma linearization step when calculating manually -- simply dividing R/255 and using that directly overstates luminance for dark colors.
- Using luminance alone to judge contrast -- contrast ratio requires comparing two luminance values with (L1 + 0.05)/(L2 + 0.05); luminance by itself says nothing about a pair's readability.
Key terms
- sRGB
- The standard Red-Green-Blue color space used by most monitors and web browsers, which applies a gamma curve so that digital codes are not linearly proportional to physical light output.
- Gamma curve
- A non-linear input-output relationship between stored digital values and displayed light intensity; sRGB uses an approximate gamma of 2.2 to allocate more codes to perceptually important darker tones.
- Perceptual luminance weights
- The coefficients 0.2126 (red), 0.7152 (green), 0.0722 (blue) derived from human vision research, reflecting that the eye is most sensitive to green wavelengths and least sensitive to blue.
- 0.03928 threshold
- The linearization breakpoint in the WCAG formula; below this value a simple linear division by 12.92 is used instead of the power function, approximating the true sRGB transfer function near black.
Frequently asked questions
- What is relative luminance?
- Relative luminance is a linearized measure of brightness that accounts for how the human eye perceives each color channel. Green contributes the most (71.5%), blue the least (7.2%).
- How is it used?
- Divide the sum of two luminances to get the WCAG contrast ratio: (L1+0.05)/(L2+0.05).