Relative luminance
Relative luminance is a normalized measure of a color’s apparent brightness calculated from the weighted contributions of its linearized red, green, and blue components.
Math for Web Design
Relative luminance is a normalized measure of the perceived lightness of a color, computed from linearized red, green, and blue components and ranging from black at 0 to white at 1.
- How it is used
- Uses relative luminance to calculate WCAG contrast ratios for accessible text and color pairs.
- How deep it goes
- Descends through sRGB normalization, piecewise gamma correction, weighted summation, contrast calculation, and JavaScript implementation.
- Examples
- Uses pure blue against white, a JavaScript contrast calculator, and a CSS text-and-background compliance exercise.
- What you can do after
- Apply it via JavaScript to compute luminance and contrast ratios from RGB or hexadecimal colors.
Everyday Data Visualization
Relative luminance is a normalized measure of the light emitted or reflected by a color relative to a reference white.
- How it is used
- Supports accessible color choices for text, data visualizations, and other foreground-background pairings.
- How deep it goes
- Defines the contrast formula and thresholds, but defers luminance mathematics to external calculators.
- Examples
- Uses blue bars on light gray, comparing 1.93:1 without a border against 8.7:1 with a dark-gray border.
- What you can do after
- Apply it via an accessible-colors calculator to evaluate foreground-background contrast and adjust visual elements.
Read how Everyday Data Visualization explains relative luminance →
Related concepts
- contrast ratioused by · A contrast ratio is the numerical ratio of the higher relative luminance to the lower relative luminance of two colors.
- WCAGused by · WCAG is a W3C standard providing testable recommendations and success criteria for making web content accessible to people with disabilities.
- weighted sumuses · A weighted sum is an expression formed by multiplying terms by corresponding scalar coefficients and adding the resulting products.
- RGBuses · RGB is an additive color model that represents colors through separate red, green, and blue component values or intensities.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.