Relative luminance and contrast ratio

Two calculators evaluate the relative luminance and contrast ratio for given colors.

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.

PLANETCALC, Relative luminance

Relative luminance

Color in RGB form

Digits after the decimal point: 2
Color
 
Relative luminance, %
 
Save the calculation to reuse next time, to extension embed in your website or share share with friends.

Relative luminance calculation

Each color component value in RGB form C8= {R8 - red, G8 - green, B8 - blue} is an integer between 0 and 255.
Firstly, convert color components to real values in range 0..1:
Csrgb = C8/255, where C8 = { R8, G8, B8 }

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

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

The coefficients in the formula above reflect human eye sensitivity to the particular color component: human eye senses green component most luminous, red one - a bit less and 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).1
The contrast ratio shows how easy a human recognises text or image on 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.

PLANETCALC, Contrast ratio

Contrast ratio

Color in hex format

Color in hex format

Digits after the decimal point: 2
Contrast ratio
 
Color 1
 
Color 2
 
Save the calculation to reuse next time, to extension embed in your website or share share with friends.

Button screenshot
Button screenshot
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 impaired 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. 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.

Comments