# 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 ratio is 4.5:1

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

How do I figure this out in in Photoshop and Illustrator?

• Non-related to the question, but could you explain/link to an article that explains this law? I've never heard of a law dictating web design before, so I'm quite curious. Apr 3, 2014 at 16:45
• It just came into effect in Ontario Canada. Here's the info: ellsworthmedia.com/aoda-compliance-impact-website
– Pdxd
Apr 3, 2014 at 18:28
• Link to the actual regulation. It applies to any organization with more than 50 employees in Ontario and requires them to meet WCAG 2.0 Level A on all new websites starting this year, and to convert old websites by 2021. Apr 4, 2014 at 14:39
• Also: A reference on the WCAG site, which has links to the luminance formula, and calculators. As far as I can tell, both the W3 and Adobe use the sRGB colour space for calculating luminance values, so you should be able to just use the L values from your colour inspector to determine if the ratio is at least 4.5:1. Apr 4, 2014 at 14:46

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.

Personally, I test UI's using a contrast checker app, aptly named "Contrast":

You can check not just your files but anything on screen, including other websites — anything on screen!

It's not very practical to measure pure contrast ratios because it's taxing cognitively, numbers have to be compared in the mind like `5.2 > 4.5 ?` so apps invented an abstraction — scores based on letters, for example, Contrast Mac app would give "AA" for `4.5:1` at least.

https://usecontrast.com/guide

It's a paid Mac app but it doubles as a screen colour picker too: