Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
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. –  Bart Arondson Apr 3 at 16:45
1  
It just came into effect in Ontario Canada. Here's the info: ellsworthmedia.com/aoda-compliance-impact-website –  Pdxd Apr 3 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. –  AmeliaBR Apr 4 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. –  AmeliaBR Apr 4 at 14:46

1 Answer 1

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.