: How to determine exact contrast ratio Because of the recent Web accessibility Law in my region, I need to ensure I'm designing with an appropriate contrast ratio. WCAG says the value of this

@Gail6891361

From that page, there is a link to a contrast calculator

And looking at the source, we can generalize:

RsRGB = Red Component / 255
GsRGB = Green Component / 255
BsRGB = Blue Component / 255

Calculate luminance
R = is (RsRGB <= 0.03928) then RsRGB/12.92 otherwise ((RsRGB + 0.055)/1.055)^2.4
G = is (GsRGB <= 0.03928) then GsRGB/12.92 otherwise ((GsRGB + 0.055)/1.055)^2.4
B = is (BsRGB <= 0.03928) then BsRGB/12.92 otherwise ((BsRGB + 0.055)/1.055)^2.4

Luminance is (0.2126 * R + 0.7152 * G + 0.0722 * B)

getContrastRatio {
L1 = Luminance of color1;
L2 = Luminance of color2;
round((max(L1, L2) + 0.05)/(min(L1, L2) + 0.05)*10)/10;
}


The code is embedded in that page, you can bookmark it or you can save it locally in case the page goes down.

Vote Up Vote Down