#
Luma: Apple & Perceived Brightness
Rec. 709 (ITU Recommendation BT.709) is the international standard for HDTV. The luma calculation from this standard provides a way to convert RGB color values into a perceived brightness value that closely matches human visual perception.
Human eyes are more sensitive to green light than red and to red light than blue. Rec. 709 luma coefficients account for this by weighting each color channel differently. The weighted sum produces a single brightness value that represents how bright a color appears to the human eye.
#
Luma Formula
Y = ( 0.2126 × R ) + ( 0.7152 × G ) + ( 0.0722 × B )
#
JavaScript Implementation
function selectThemeWithLuma(bgColor) {
// remove leading #
let hex = bgColor.replace(/^#/, '');
// parse RGB components from hex
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
// calculate Rec. 709 Luma using standard coefficients
const Y = 0.2126 * r + 0.7152 * g + 0.0722 * b;
// threshold at midpoint: 127.5
// Y ≤ 127.5 = dark background, use light text
// Y > 127.5 = light background, use dark text
return Y <= 127.5;
}
#
Key Characteristics
#
No Gamma Correction
Unlike relative luminance in W3C Accessibility Guidelines, the ITU calculation of luma applies coefficients directly to gamma-corrected RGB values for simplicty (no complex gamma correction) and efficency (fewer operations per calculation).
#
Output Range
- minimum: 0 → luma value for black
#000000 - maximum: 255 → luma value for white
#FFFFFF - midpoint: 127.5
#
Threshold Decision
Using the midpoint as the threshold:
- colors with luma ≤ 127.5 are considered dark → use light/white text
- colors with luma > 127.5 are considered light → use dark/black text
#
Example Colors
#
References
- ITU-R Recommendation BT.709
- W3C Accessibility Guidelines: relative luminance
- Wikipedia: Luma
- Apple Developer: System-Defined Color Spaces