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, %
 

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: 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).1
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.

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
 

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 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.

URL copied to clipboard
PLANETCALC, Relative luminance and contrast ratio

Comments