Compute WCAG relative luminance

Calculate WCAG relative luminance for an sRGB color.

freeworks offlinenothing uploaded
ToolColor Luminance
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

sRGB channels are converted from gamma-encoded values to linear light, weighted by the WCAG coefficients, and summed to produce relative luminance from 0 to 1. The value feeds contrast calculations but does not itself express readability.

  • Linearization and perceptual weights make luminance comparable across sRGB colors.

Worked example

White Luminance
Calculate relative luminance of white
Input
											#FFFFFF
Output
												Color: #FFFFFF
Relative Luminance: 1.000000
Range: 0 (black) to 1 (white)

When to use this

Contrast checks, design tokens, and accessibility reports calculate luminance.

Edge cases

  • Raw 8-bit channel averages give the wrong luminance.
  • Transparent colors need compositing against a background first.
  • Wide-gamut values require conversion to the selected RGB space.

References