Luminance
A measure of the perceived brightness of a color, weighted by how the human eye responds to different wavelengths.
What it means
Relative luminance is the specific brightness metric used in WCAG accessibility standards. It's calculated from a color's RGB values using a formula that weights green heavily (our eyes are most sensitive to green light), red moderately, and blue least.
The formula produces a value between 0 (black) and 1 (white). Two colors' relative luminance values determine their contrast ratio — the number that WCAG uses to decide whether text is readable against a background.
Why it matters in palette design
Every contrast check in PerfectPalette is built on relative luminance. When you see "4.5:1 — AA pass," that ratio comes from dividing the lighter color's luminance by the darker color's luminance. Understanding luminance helps you predict which color combinations will pass accessibility thresholds before you test them.
Common confusion
Luminance vs. lightness: Luminance is a physics-derived measure that accounts for human vision sensitivity (green > red > blue). Lightness is a color-model property. A yellow at HSL L=50% has much higher luminance than a blue at HSL L=50% because our eyes perceive yellow wavelengths as brighter. OKLCH lightness is designed to approximate perceptual brightness, making it closer to luminance than HSL lightness.
Example
Pure yellow (#FFFF00) has a relative luminance of 0.93 — nearly white. Pure blue (#0000FF) has a luminance of only 0.07. This is why yellow text on white fails WCAG but blue on white can pass: luminance, not lightness, determines readability.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.