Luminance Calculator

Calculate the relative luminance of any color according to WCAG standard

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

#3B82F60.2355

#FFFFFF1.0000

0.0 (Negro)

1.0 (Blanco)

Contrast Ratio

3.68:1

Acceptable

Sample Text

Small sample text

WCAG 2.1 Levels

AA (Texto Grande)

3:1

AA (Texto Normal)

4.5:1

AAA (Texto Grande)

4.5:1

AAA (Texto Normal)

7:1

Suggestion to reach AA

Adjust to #1E6FF5

New ratio: 4.52:1

Grayscale Equivalent

rgb(60, 60, 60)

rgb(255, 255, 255)

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, from 0 (black) to 1 (white).

Why is it important?

Luminance is the basis for calculating WCAG contrast ratio. Two colors with similar luminance will have low contrast.

Formula

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

Where R, G, B are linearized (gamma corrected) values.

💡 Practical Use Cases

Case 1: Choose text color

Your background is #F3F4F6 (light gray). What text color to use?

→ Background luminance: 0.92 (very light)
→ You need text with L < 0.18 for good contrast

Case 2: Compare "bright" colors

Why does yellow seem brighter than pure blue?

→ Yellow #FFFF00: L = 0.93
→ Blue #0000FF: L = 0.07
→ Green in yellow contributes high luminance

Case 3: Debug contrast issues

Two colors look different but have low contrast.

→ Compare their luminances
→ If similar, you need to adjust one of them

Frequently Asked Questions

Are luminance and brightness the same?

Not exactly. Luminance is a perceptual measure that considers how the human eye perceives different wavelengths. Green contributes more than red, and blue less.

What luminance should I aim for text?

For good contrast, combine colors with significant luminance difference. Dark text (L<0.2) on light background (L>0.8) or vice versa.