Relative Luminance Calculator
Calculate the WCAG relative luminance of any color. Relative luminance measures how bright a color appears to the human eye and is essential for calculating contrast ratios and ensuring accessibility compliance.
Color Preview
#3B82F6
rgb(59, 130, 246)
Relative Luminance
0.2355 (Medium)
Range: 0 (black) to 1 (white)
Enter Color
Channel Contributions
See how each RGB channel contributes to the total luminance based on human perception weights.
Contribution: 0.0093 (3.9%)
Contribution: 0.1597 (67.8%)
Contribution: 0.0665 (28.3%)
Sample Colors
Click on any color to see its relative luminance value.
Luminance Scale
Table of Contents
What is Relative Luminance?
Relative luminance is a measure of how bright a color appears to the human eye. Unlike simple brightness calculations that treat all colors equally, relative luminance accounts for the fact that our eyes perceive different colors with varying sensitivity. We're most sensitive to green light, followed by red, and least sensitive to blue.
The relative luminance value ranges from 0 (pure black, no light) to 1 (pure white, maximum light). This measurement is defined in the Web Content Accessibility Guidelines (WCAG) and is the foundation for calculating contrast ratios between colors.
Understanding relative luminance is essential for creating accessible designs. It helps designers and developers ensure that text and visual elements have sufficient contrast against their backgrounds, making content readable for all users, including those with visual impairments.
The Formula
The WCAG relative luminance formula involves two steps. First, each RGB channel value is converted from the sRGB color space to a linear value. Then, these values are weighted according to human perception.
Step 1: Linearize RGB Values
For each RGB channel value (0-255), first normalize to 0-1, then apply gamma correction:
if (value / 255) <= 0.03928:
linearValue = (value / 255) / 12.92
else:
linearValue = ((value / 255 + 0.055) / 1.055) ^ 2.4Step 2: Apply Perception Weights
Combine the linearized values using weights based on human perception:
L = 0.2126 × R + 0.7152 × G + 0.0722 × BWhy These Weights?
The weights (21.26% for red, 71.52% for green, 7.22% for blue) reflect how the human eye perceives brightness. Our eyes have three types of cone cells, and we're most sensitive to green wavelengths, which is why green has the highest weight. This is also why pure green (#00FF00) appears much brighter than pure red (#FF0000) or pure blue (#0000FF) at the same intensity.
Why Luminance Matters
Understanding relative luminance is crucial for several reasons:
- Accessibility Compliance: WCAG uses relative luminance to calculate contrast ratios, which determine if color combinations meet accessibility standards.
- Better User Experience: Colors with appropriate luminance differences are easier to read and distinguish, reducing eye strain for all users.
- Inclusive Design: Users with low vision, color blindness, or other visual impairments rely on luminance contrast more than color differences to perceive content.
- Environmental Conditions: In bright sunlight or dim lighting, color perception decreases while luminance perception remains relatively stable.
- Print and Digital: Luminance calculations help ensure designs work across different media and display technologies.
How to Use This Tool
1. Enter Your Color
Use the color picker, enter a HEX code directly, or switch to RGB mode and input individual channel values. The tool accepts standard 6-digit HEX codes (with or without the # symbol) and RGB values from 0 to 255.
2. View the Luminance Value
The calculated relative luminance is displayed prominently, along with a category label (Very Light, Light, Medium, Dark, or Very Dark). The value is shown with 4 decimal places for precision.
3. Analyze Channel Contributions
See how each RGB channel contributes to the total luminance. This helps you understand why certain colors appear brighter or darker than expected based on their RGB values alone.
4. Copy Your Results
Click the "Copy Results" button to copy the color information and luminance value to your clipboard for use in documentation or other tools.
WCAG and Contrast Ratios
The Web Content Accessibility Guidelines (WCAG) use relative luminance to calculate contrast ratios between foreground and background colors. The contrast ratio formula is:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) Where L1 is the lighter color's luminance and L2 is the darker color's luminance. The 0.05 offset accounts for ambient light.
| WCAG Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (Enhanced) | 7:1 | 4.5:1 | N/A |
By knowing the relative luminance of your colors, you can manually calculate contrast ratios or use this value with our Color Contrast Checker to ensure your designs meet WCAG standards.
Frequently Asked Questions
Brightness is often a simple average of RGB values, while relative luminance accounts for how the human eye actually perceives different colors. Our eyes are most sensitive to green light, so green contributes more to perceived brightness than red or blue at the same intensity level.
The human eye has evolved to be most sensitive to green light, which peaks around 555nm wavelength. This sensitivity comes from the spectral response of our cone cells. In natural environments, green is often associated with vegetation and safe spaces, which may have evolutionary significance.
While there's no official cutoff, a luminance of 0.179 is often used as a threshold. Colors above this value typically need dark text for good contrast, while colors below it need light text. This tool uses a more detailed categorization: Very Dark (below 0.05), Dark (0.05-0.2), Medium (0.2-0.5), Light (0.5-0.9), and Very Light (above 0.9).
Yes! The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. For example, pure white (L=1) against pure black (L=0) gives (1 + 0.05) / (0 + 0.05) = 21:1, the maximum contrast ratio.
sRGB gamma correction is a non-linear transformation applied to color values to match how displays produce light and how humans perceive brightness. The formula accounts for this by first linearizing the RGB values before calculating luminance. The threshold of 0.03928 handles the linear segment of the sRGB transfer function.
This calculator works with solid (opaque) colors only. For transparent colors, you would need to first composite the color onto its background to determine the effective color, then calculate the luminance of that resulting color.
Pure red (#FF0000) has a luminance of about 0.2126, while pure blue (#0000FF) has only about 0.0722. This reflects how our eyes perceive these colors - red appears much brighter than blue at the same intensity. Pure green (#00FF00) has the highest luminance at about 0.7152, appearing brightest of all primary colors.
No, the WCAG formula specifically uses the sRGB color space, which is the standard for web content. Other color spaces like Adobe RGB or Display P3 have different gamuts and would require different calculations. Always ensure your colors are in sRGB when using this calculator.