Luminance Calculator

Calculate WCAG relative luminance, R/G/B channel breakdown, contrast ratio and automatic accessibility suggestions

Compare relative luminance between two colors, calculate WCAG contrast ratio and get automatic suggestions to improve accessibility.

Foreground Color

#3B82F6

Background Color

#FFFFFF

Luminance Comparison

#3B82F6

23.5%0.2355

#FFFFFF

100.0%1.0000

0.0 (Black)

1.0 (White)

R (21.26%) G (71.52%) B (7.22%)

Channel Breakdown

Foreground Color

R59→0.044×0.2126=0.0093

G130→0.223×0.7152=0.1597

B246→0.922×0.0722=0.0665

Σ0.2355(23.5%)

Background Color

R255→1.000×0.2126=0.2126

G255→1.000×0.7152=0.7152

B255→1.000×0.0722=0.0722

Σ1.0000(100.0%)

Contrast Ratio

3.68:1

Acceptable

Sample Text

Small sample text

WCAG 2.1 Levels

AA (Large Text)

3:1

AA (Normal Text)

4.5:1

AAA (Large Text)

4.5:1

AAA (Normal Text)

7:1

Suggestion to reach AA

Adjust to #1E6FF5

New ratio: 4.52:1

Reference Scale

BlackDark grayMid grayLight grayWhite

Grayscale Equivalent

rgb(60, 60, 60)Perceived Brightness: 23.5%

rgb(255, 255, 255)Perceived Brightness: 100.0%

The grayscale equivalent shows how the color's brightness is perceived without the hue.

W3C Formula

L = 0.2126 × R + 0.7152 × G + 0.0722 × BContrast = (L1 + 0.05) / (L2 + 0.05)

Based on the standard sRGB color space.

How it works

Relative luminance measures the perceived brightness of a color on a scale from 0 (absolute black) to 1 (pure white). It is the mathematical foundation of the WCAG contrast ratio, the international standard for web accessibility.

What does this calculator offer?

Relative luminance with exact value (0-1) and percentage
R/G/B channel breakdown — see how much each channel contributes to total luminance
Contribution bar — proportional red/green/blue visualization
Reference scale — relative position vs black, grays and white
WCAG contrast ratio with detailed AA/AAA levels
Auto suggestion — corrected color to reach AA or AAA, with apply button
Grayscale equivalent — brightness perception without hue
Swap and random color for quick exploration

The Formula: Gamma Correction and ITU-R BT.709 Weights

Relative luminance is not a simple average of R, G and B. It requires two steps:

Step 1: sRGB Linearization (gamma correction)

The RGB values we use (0-255) are in sRGB space, which applies a gamma curve to approximate human perception. Before calculating luminance, we must "undo" that curve:

If C ≤ 0.03928 → C_lin = C / 12.92
If C > 0.03928 → C_lin = ((C + 0.055) / 1.055) ^ 2.4

Where C is the channel value divided by 255 (0-1).

Step 2: Weighted channel contributions

The human eye is much more sensitive to green than red, and very little to blue. The ITU-R BT.709 weights reflect this:

L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin

Red
21.26%

Green
71.52%

Blue
7.22%

How is the contrast ratio calculated?

Ratio = (L_lighter + 0.05) / (L_darker + 0.05)

The range goes from 1:1 (no contrast) to 21:1 (black vs white). WCAG requires at least 4.5:1 for normal text (AA) and 7:1 for AAA.

Professional Tips

The Green Rule

The green channel dominates (~71%). Colors with high green (yellow, lime, cyan) will always have high luminance, even if they "look" dark.

Blue = nearly invisible

Blue only contributes ~7%. Pure blue (#0000FF) has luminance 0.07, almost black. Never use dark blue as text on a dark background.

Use the grayscale test

Convert your design to grayscale to verify visual hierarchy. If two elements merge in gray, their contrast is insufficient.

Gamma matters

Without linearization, the calculation would be wrong. A mid-gray (#808080) has luminance 0.216, not 0.5. Gamma correction is essential.

Practical Use Cases

Case 1: Choose readable text color

Your background is #F3F4F6 (light gray, L = 0.92).

→ You need text with L < 0.18 for ratio ≥ 4.5:1 (AA)
→ For AAA (7:1), you need L < 0.10

Case 2: Why does yellow look brighter than blue?

→ Yellow #FFFF00: L = 0.93 (R: 0.21 + G: 0.72 + B: 0.00)
→ Blue #0000FF: L = 0.07 (R: 0.00 + G: 0.00 + B: 0.07)
→ The channel breakdown explains it: yellow's green contributes 10× more

Case 3: Debug insufficient contrast

Two colors look different (red vs green) but fail WCAG.

→ #FF0000 (L = 0.21) vs #00AA00 (L = 0.22) → Ratio: 1.04:1
→ Nearly equal luminances = zero contrast, despite different hue

Case 4: Dark mode design

Dark background #1E293B (L = 0.024).

→ For AA normal text: need L ≥ 0.30 → light text like #94A3B8
→ For AAA: need L ≥ 0.50 → lighter text like #CBD5E1

Case 5: Validate brand palette

Your brand uses primary blue and accent yellow.

→ Compare luminances of all pairs in your palette
→ Identify which combinations work for text and which are decoration-only

Luminance vs Other Metrics

Metric	Range	Usage	Perceptual
Relative luminance	0 – 1	WCAG contrast	Yes (weighted)
HSL Lightness	0% – 100%	Color adjustment	No (min/max avg)
HSV Value	0% – 100%	Max saturation	No (max channel)
OKLCH Lightness	0 – 1	Modern color (CSS 4)	Yes (uniform)

Frequently Asked Questions

Are relative luminance and brightness the same?

No. Relative luminance (WCAG) is a perceptually weighted measure: green contributes 71.52%, red 21.26%, and blue only 7.22%. "Brightness" is a simple average or the max channel, without considering human eye sensitivity. That's why pure blue (#0000FF) has luminance 0.07 but HSV brightness of 100%.

What is gamma correction and why does it matter?

RGB values (0-255) are in sRGB space, which applies a gamma curve (~2.2) to approximate how we perceive brightness. Before calculating luminance, you must "linearize" these values by undoing the curve. Without this step, a mid-gray (#808080) would be calculated as 0.5 when its actual luminance is 0.216. Linearization is essential for correct results.

What luminance should I aim for accessible text?

It depends on your background. For light backgrounds (L > 0.8): use text with L < 0.18 for AA (4.5:1) or L < 0.10 for AAA (7:1). For dark backgrounds (L < 0.05): use text with L > 0.30 for AA or L > 0.50 for AAA. The key is maximizing the luminance difference between text and background.

Why does the green channel weigh so much (71.52%)?

The cone cells in the human eye are most sensitive to green wavelengths (~555nm). The formula weights (ITU-R BT.709) reflect this biological sensitivity. That's why colors with high green content (yellow, lime, cyan) appear much brighter than colors with little green (blue, violet).

Can I use HSL Lightness instead of relative luminance?

Not for accessibility. HSL Lightness is a mathematical average of the max and min RGB channel values, ignoring human perception. Pure blue and pure yellow have the same HSL Lightness (50%) but radically different luminances (0.07 vs 0.93). WCAG requires relative luminance to ensure real readability.

What do the AA and AAA levels mean?

WCAG 2.1 defines: AA Large Text (≥3:1) for text ≥18pt or ≥14pt bold; AA Normal Text (≥4.5:1) for standard text; AAA Large Text (≥4.5:1) and AAA Normal Text (≥7:1) for maximum accessibility. The European Accessibility Act (EAA 2025) requires at least AA. AAA is recommended for critical interfaces like banking or healthcare.

Why can two "different" colors have low contrast?

Because WCAG contrast is based on luminance, not hue. A red (#FF0000, L=0.21) and a green (#00AA00, L=0.22) have nearly equal luminances → ratio 1.04:1, virtually no contrast. For good contrast, you need luminance difference, not just color difference.

How do I use the reference scale?

The reference scale shows where your colors sit in the 0-1 range, with markers for black, dark gray, mid gray, light gray and white. It's useful for seeing at a glance whether your colors are too close in luminance (low contrast) or well separated (good contrast). Your two color markers should be as far apart as possible.