Relative luminance and contrast ratio
Two calculators evaluate the relative luminance and contrast ratio for given colors.
This page exists due to the efforts of the following people:
Anton
| |
 | Timur
|
This content is licensed under Creative Commons Attribution/Share-Alike License 3.0 (Unported). That means you may freely redistribute or modify this content under the same license conditions and must attribute the original author by placing a hyperlink from your site to this work https://planetcalc.com/7779/. Also, please do not modify any references to the original work (if any) contained in this content.
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
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.
Contrast ratio
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.
Comments