Color Luminance Calculator
Calculate relative WCAG luminance values for color contrast calculations.
Color Shades & Tints Generator
About Color Luminance Calculator
The WCAG Relative Luminance & Perceived Lightness Calculator computes exact W3C relative luminance ($L = 0.2126R + 0.7152G + 0.0722B$) after sRGB gamma linearization, calculating contrast ratios against pure black, pure white, and custom backgrounds.
How to Use Color Luminance Calculator
Step 1
Enter any Hex, RGB, or HSL color.
Step 2
Inspect the computed Relative Luminance value ($0.0$ to $1.0$).
Step 3
Review automated text color recommendation (White text vs Black text).
Step 4
Click "Copy Luminance Report".
Practical Use Cases for Color Luminance Calculator
WCAG 2.1 Success Criterion 1.4.3 Contrast Auditing
Calculate the exact relative luminance of brand colors to determine compliance with WCAG AA (4.5:1) and AAA (7:1) readability thresholds.
Dynamic Text Inversion (Light vs Dark Text)
Determine whether black or white text should be placed over a dynamic background by checking if relative luminance $L > 0.179$.
Input & Output Examples
Calculating Luminance for Pure Yellow (#FFFF00)
Color: #FFFF00 (Yellow)
Relative Luminance: 0.9278 | Contrast on White: 1.07:1 (Fail) | Contrast on Black: 19.56:1 (Pass AAA) | Recommended Text: Black
Key Features & Performance
- ✓Calculates W3C WCAG 2.1 Relative Luminance ($0.0$ pure black to $1.0$ pure white).
- ✓Displays gamma-linearized RGB component contributions ($R_{lin}, G_{lin}, B_{lin}$).
- ✓Computes contrast ratios against `#FFFFFF` and `#000000` with instant Pass/Fail AA/AAA badges.
- ✓100% Client-Side calculation.
- ✓1-Click Copy luminance score and report.
Key Terminology & Definitions
W3C Relative Luminance ($L$)
The relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white, following sRGB gamma expansion.
WCAG Contrast Ratio Formula
$\\text{Contrast Ratio} = \\frac{L_1 + 0.05}{L_2 + 0.05}$, where $L_1$ is the relative luminance of the lighter color and $L_2$ is the darker color.