Color Luminance Calculator

Enter RGB values (0–255) to calculate relative luminance, WCAG contrast ratios against white and black, and the best accessible text color.

Created by Luis GonzalezLast updated: May 9, 2026

How to Use This Calculator

1
Enter Red Value
Input the red channel value of your color, from 0 to 255.
2
Enter Green Value
Input the green channel value of your color, from 0 to 255.
3
Enter Blue Value
Input the blue channel value of your color, from 0 to 255.
4
Review Your Results
The calculator instantly displays the relative luminance, hex code, contrast ratios against white and black, and a recommendation for the best text color.

Example Calculation

A web developer needs to determine the relative luminance and optimal text color for a specific shade of blue (RGB 100, 150, 200) to ensure WCAG compliance.

Red (0–255)

100

Green (0–255)

150

Blue (0–255)

200

Results

0.3034

Tips

Luminance Dictates Text Readability

The primary purpose of luminance is to ensure readability. Dark colors with low luminance require light text (white or light gray), while bright colors with high luminance require dark text (black or dark gray) to meet WCAG contrast guidelines.

Luminance is Not Perceptual Lightness

While related, luminance is a technical, linear measure of brightness, whereas 'perceptual lightness' (like the 'L' in Lab or LCH color spaces) is designed to align more closely with how the human eye perceives brightness. For contrast ratios, the linear luminance is used.

Test on Various Displays

Luminance can be perceived differently across various display types and calibration settings. Always test your color combinations on a range of devices (e.g., mobile, desktop, different brands) to ensure consistent readability and contrast for all users.

Unveiling Color Brightness: The Relative Luminance Calculator

The Color Luminance Calculator is a crucial tool for web developers, designers, and photographers, providing a precise measure of a color's relative brightness. By inputting any RGB value, it instantly computes the color's luminance, its hexadecimal code, and essential WCAG contrast ratios against both white and black backgrounds. For example, a medium blue (RGB 100, 150, 200) has a relative luminance of approximately 0.3034, indicating a mid-range brightness that will likely require white text to meet WCAG AA contrast standards.

Optimizing Image Brightness for Various Media

In photography and digital media, luminance is a fundamental aspect of image quality, affecting exposure, dynamic range, and overall visual impact. A well-managed luminance range ensures that details are preserved in both highlights and shadows, providing a natural and pleasing image. For instance, in HDR (High Dynamic Range) content, luminance values are pushed far beyond traditional SDR (Standard Dynamic Range) displays to create more impactful visuals, requiring careful calibration. Photographers adjust for luminance in their editing workflows using tools like tone curves and exposure sliders to ensure their images translate well across different screens and print media in 2025.

The Standard Luminance Equation

Relative luminance is calculated using a weighted sum of the linearized red, green, and blue components of a color. This weighting reflects the human eye's varying sensitivity to different wavelengths of light, where green light is perceived as significantly brighter than red or blue light of the same intensity. The formula ensures a standardized measure of brightness for contrast calculations.

Luminance = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

R_linear, G_linear, and B_linear are the red, green, and blue channel values after a gamma correction (linearization) process, ranging from 0 to 1.

💡 When preparing images for print, understanding how color values translate to physical output is key. Our Print Size at 300 DPI Calculator helps ensure your images are appropriately sized for high-quality reproduction.

Calculating Luminance for a Medium Blue

Let's calculate the relative luminance for a medium blue color with RGB values Red = 100, Green = 150, Blue = 200.

Linearize RGB Values: Convert each 0-255 RGB value to a 0-1 linear value using a standard gamma correction function.
- R_linear (100) ≈ 0.150
- G_linear (150) ≈ 0.320
- B_linear (200) ≈ 0.590
Apply Luminance Formula:
- Luminance = (0.2126 × 0.150) + (0.7152 × 0.320) + (0.0722 × 0.590)
- Luminance = 0.03189 + 0.228864 + 0.042598 = 0.303352

The relative luminance is approximately 0.3034.

Calculate Contrast vs White (L=1.0):
- Contrast = (1.0 + 0.05) / (0.3034 + 0.05) = 1.05 / 0.3534 ≈ 2.97:1
Calculate Contrast vs Black (L=0.0):
- Contrast = (0.3034 + 0.05) / (0.0 + 0.05) = 0.3534 / 0.05 ≈ 7.07:1

For this blue, white text (2.97:1) fails WCAG AA (4.5:1), while black text (7.07:1) passes WCAG AAA (7:1). Thus, black text is recommended.

💡 To ensure efficient output in your creative workflows, consider how various parameters impact the final product. Our Print Speed & Quality Trade-Off Calculator helps balance different priorities.

WCAG Guidelines for Color Luminance

The Web Content Accessibility Guidelines (WCAG) heavily rely on relative luminance to define contrast ratios, which are critical for text readability and overall digital accessibility. WCAG 2.1 Success Criterion 1.4.3 requires a minimum contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text (18pt regular or 14pt bold) to achieve Level AA compliance. For enhanced accessibility (Level AAA), these ratios increase to 7:1 and 4.5:1, respectively. These regulatory thresholds ensure that content is perceivable by individuals with low vision, color blindness, or age-related visual impairments, making luminance a cornerstone of inclusive design practices in 2025.

Frequently Asked Questions

What is relative luminance?

Relative luminance is a standardized measure of the perceived brightness of a color, ranging from 0 (for absolute black) to 1 (for absolute white). It represents the light emitted or reflected by a surface, adjusted to human perception, and is a critical component in calculating color contrast ratios for web accessibility (WCAG). It is a linear value, not directly proportional to human perception of brightness.

How does luminance relate to WCAG contrast ratios?

Luminance is the foundation for WCAG contrast ratios. The WCAG 2.x guidelines define contrast as the ratio of the relative luminance of the lighter of the two colors to the relative luminance of the darker color. This calculation ensures that there is sufficient difference in brightness between text and its background, making content readable for individuals with low vision or color vision deficiencies. A minimum ratio of 4.5:1 is required for normal text at AA level.

Why are some colors more luminous than others with similar RGB values?

Some colors are inherently more luminous due to how the human eye perceives different wavelengths of light. Green light, for example, is perceived as much brighter than red or blue light of the same intensity. The luminance formula accounts for this by weighting the green channel (0.7152) much more heavily than the red (0.2126) or blue (0.0722) channels. This means a color with a high green component will often have a higher luminance even if its overall RGB sum is similar to a red-heavy color.

What is the significance of the best text color recommendation?

The 'best text color' recommendation (black or white) is based on which of these two colors provides the highest WCAG-compliant contrast ratio against the background color being analyzed. If a background color has high luminance (e.g., yellow), black text will provide better contrast. If it has low luminance (e.g., dark blue), white text will be more readable. This helps designers quickly choose a text color that meets accessibility standards.