6

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?

4
  • 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
  • 1
    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.
    – AmeliaBR
    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.
    – AmeliaBR
    Apr 4, 2014 at 14:46

2 Answers 2

3

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.

0

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

contrast app in action

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:

contrast Mac app

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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