Relative Luminance
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/relative-luminance/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/relative-luminance/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/relative-luminance/)Use the native HTML custom element.
The luminance of a color normalized to a scale from 0 (black) to 1 (white), used as the basis for calculating contrast ratios.
Relative luminance is calculated from sRGB values using the formula L = 0.2126R + 0.7152G + 0.0722B (after linearizing each channel). The coefficients reflect the human eye's different sensitivity to each color: we perceive green as brightest, then red, then blue. This is the measure used by WCAG accessibility guidelines to determine contrast ratios between text and background colors. A higher relative luminance means the color appears brighter, and two colors with similar relative luminance will have poor contrast regardless of how different their hues are.
Try It Out
Related Articles
Multi-Brand Color Architecture: One Codebase, Many Themes
Build multi-brand color architecture with CSS custom properties and design tokens. Support white-label theming from a single codebase with Tailwind integration.
Generating Colorful OG Images with Next.js and Satori
Generate dynamic Open Graph images with Next.js and Satori. Create color-aware OG templates with gradients, brand colors, and responsive designs.
Is White a Color? Light, Pigment, and Perception
Is white a color or the absence of color? Explore the science of light, the pigment world, and how white is used in design — from #FFFFFF to warm whites.
Dynamic Color Theming in React: Beyond CSS Variables
Implement dynamic color theming in React using CSS variables, context providers, and Tailwind CSS. Build user-customizable themes with runtime color generation.
Color Accessibility Checklist for Web Developers
A complete color accessibility checklist for web developers covering WCAG contrast ratios, color-alone reliance, focus indicators, testing tools, and automated checks.
JavaScript Color Manipulation: Libraries and Techniques
Master JavaScript color manipulation with chroma.js, culori, and tinycolor2. Parse, transform, and generate colors programmatically for web applications.