Relative luminance and contrast ratio

The following calculator gives the relative luminance of the color in RGB form. White color has 100% relative luminance, black - 0%, all other colors - something between.

Relative luminance

Color

Color in RGB form

Calculation precision

Digits after the decimal point: 2

Calculate

Color

 

Relative luminance, %

 

 Link  Save  Widget

Relative luminance calculation

Each color component value in RGB form C₈= {R₈ - red, G₈ - green, B₈ - blue} is an integer between 0 and 255.
Firstly, convert color components to real values in range 0..1:
C_srgb = C₈/255, where C₈ = { R₈, G₈, B₈ }

Then find linear RGB value for each color component C = { R,G,B }:
C = ((C_srgb+0.055)/1.055)^2.4 , when C_srgb > 0.03928
or
C = C_srgb/12.92, when C_srgb <= 0.03928

Using linear color components C={R, G, B} one may get the relative luminance by:
L = 0.2126R + 0.7152G + 0.0722B¹

The coefficients in the formula above reflect human eye sensitivity to the particular color component: the human eye senses the green component most luminous, the red one - a bit less and the blue component is the least one of three.

Contrast

Knowing the relative luminance, you may easily calculate the contrast ratio of a colored text by the formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 - relative luminance of text and background color (L1>L2).¹
The contrast ratio shows how easily a human recognizes text or image on a colored background. To be easily readable, the text color and background color contrast ratio must be 7:1. The contrast ratio must be at least 4.5 for the big text or logo images.

Contrast ratio

Color 1

Color in hex format

Color 2

Color in hex format

Calculation precision

Digits after the decimal point: 2

Calculate

Contrast ratio

 

Color 1

 

Color 2

 

 Link  Save  Widget

As follows from the calculation results with default input values, the calculate button color selection is wrong for this site since the contrast ratio is 2.84. People with vision impairment can hardly recognize the inscription on the button. In my defense, I want to say that the choice of colors was made not by chance. The pocket calculator, which I had in 2008, had the same orange button with a white inscription =. Perhaps we change the site design again in nearest future to address this issue.