The Effect Of Luminance and Contrast Ratio On Accessibility

Posted: 15 Dec 2014 05:30 AM PST

You know it’s important to contrast text with it’s background. Black text on a white background offers the most contrast. Light gray text on a light gray background, not so much. What exactly are you contrasting and how do you know when the contrast is enough?

title — Light shining through the window creates a great amount of contrast in the image.

Last week I began a look at the luminance component of color. I mentioned the way the rods and cones in our eyes work and that it means we’re more sensitive to light and dark than we are to hue and saturation.

We're better at seeing the relative differences between objects than their absolute values

Our sensitivity to light means the contrast in luminance between two colors is the most important part of being able to distinguish them. It also means luminance is an important part of accessibility. That’s where I’d like to pick things up today.

We’re better at seeing the relative differences between objects than their absolute values. There are all sorts of things we can contrast where color is concerned. Contrast in light and dark is the most effective, but we can also contrast other aspects of color such as:

Complementary colors (opposites on color wheel)
Temperature (cool/cold and warm/hot colors)
Saturation (pale and bright colors)

Contrast in luminance is the most effective, given our sensitivity to light and this is where we’ll focus our attention today. Before we can work with luminance contrast we need to answer two questions.

How can we determine the luminance of any color?
How much luminance contrast is necessary between colors?

How To Determine the Luminance of a Color

We want to be able to take a color with a known hex or rgb value and calculate how much luminance it has. Last week I mentioned that different hues have a natural luminance and that both hue and saturation affect luminance values.

That tells us that each of the three color components (red, green, blue) contribute to the overall luminance, but in different amounts. In other words

L = (X × R) + (Y × G) + (Z × B)

where L is luminance and R, G, and B are the red, green, and blue components of the color. X, Y, and Z are all constants. The question is what values of X, Y, and Z we should use to determine the contribution of each component to the overall luminance value?

There are several different possibilities and if I’m understanding correctly those differences come from the color space being used and whether or not there’s any gamma correction. Ultimately I came across three different versions of the formula.

L = (0.2126 × R) + (0.7152 × G) + (0.0722 × B)
L = 0.3 × R + 0.59 × G + 0.11 × B
L = sqrt(0.241 × R² + 0.691 × G² + 0.068 × B²)

The first is the formula if you’re working in either the RGB or sRGB color space. The latter two formulas take gamma correction into account and both result in a perceived luminance. The difference between the two is mainly the last formula takes a little longer to calculate.

Let’s try some numbers. Say you have a color #2ddd2a (45, 221, 42), which is a bright green. Each of the RGB components is out of a total of 255 so&hellp;

45 ÷ 255 = 0.1765 (red)
221 ÷ 255 = 0.8667 (green)
42 ÷ 255 = 0.1647 (blue)

Plugging these values into the luminance formulas gives us

L = (0.2126 × 0.1765) + (0.7152 × 0.8667) + (0.0722 × 0.1647) = 0.6693
L = (0.3 × 0.1765) + (0.59 × 0.8667) + (0.11 × 0.1647) = 0.5824
L = sqrt( .241 × 0.1765 ^2 + .691 × 0.8667 ^2 + .068 × 0.1647² ) = 0.6075

Hopefully I’ve done the math right. You can see all three values are close, if not exact. Rounding errors could account for some of the difference, but clearly the formulas don’t lead to the exact same result.

From what I’ve gathered the first formula is the most accurate when working in either RGB or sRGB color spaces. The middle formula is generally good enough and seems to be the one many people use. A few swear by the last formula.

I’ll use the middle formula for the remainder of this post, simply because it has fewer significant digits to calculate.

There are a couple of things to notice in all the formulas. The constants used to determine the contribution of each color component must add up to 1.0.

Also note that in each formula green contributes the most luminance and blue contributes the least. Or green is brighter than red is brighter than blue.

Contrast Ratio—How Much Contrast is Enough?

That answers one question. We have one left. Given the luminance values of two different colors how much should they contrast?

To answer, we first have to calculate the contrast ratio (CR) and then see what’s considered acceptable. The Web Content Accessibility Guidelines offers the following formula for the calculation.

CR = (L1 + 0.05) / (L2 + 0.05)

L1 is the relative luminance of the lighter of the colors and L2 is the relative luminance of the darker of the colors. Remember it’s lighter divided darker. I didn’t find a reason for the 0.05 constants, but I suspect it’s to prevent division by zero in the case where the darker color is #000 or rgb(0,0,0).

Let’s try an example and see what we come up with. Again, I’ll stick to the easiest of the three formulas and to save a little math I’ll use the luminance of the green from above as one of the values.

L = (0.3 × 0.3333) + (0.59 × 0.8667) + (0.11 × 0.1647) = 0.5824

Let’s contrast it with a dark red rgb(133,0,0)

L = (0.3 × 0.5216) + (0.59 × 0) + (0.11 × 0) = 0.1565

Plugging both values into the contrast formula leads to

CR = (0.5824 + 0.05) ÷ (0.1565 + 0.05) = 3.062

Now we know the contrast ratio between the red and green I’ve selected. Is it acceptable? Is there enough contrast? It depends on whether you’re after AA or AAA compliance and it also depends on the size of the text.

Level AA (regular sized text) requires a minimum ratio of 4.5:1
Level AA (large sized text) requires a minimum ratio of 3:1
Level AAA (regular sized text) requires a minimum ratio of 7:1
Level AAA (large sized text) requires a minimum ratio of 4.5:1

Large text is defined as being at least 18 point or 14 point bold text, however, there are exceptions. If a font is too thin or has unusual characteristics which make it harder to read, large might need to be larger than 18pt or 14pt bold.

The two colors I chose (bright green and dark red) would barely work for AA compliance if the text is large enough. Otherwise there isn’t enough contrast. In theory if one of these colors is the background, the other could be used as a heading that displays larger than 18pt.

Tools

You might be thinking, “I don’t want to do all that math every time I’m choosing a color scheme.” I’m with you. Fortunately neither of us has to.

I wanted to present the math to help both of us understand how all this stuff works, but there are tools that will do the math for us. With most, you add a color or two or three and the tool will let you know the contrast ratio.

Here’s a list of tools I found while researching for this post. You can find plenty more via your favorite search engine if these aren’t enough.

I don’t know that any one of the above is better than the others. It probably doesn’t matter and your choice likely comes down to personal taste. You should probably try to have more contrast than the minimum needed anyway, which would cover any differences between the tools above or any other you might decide to use.

Closing Thoughts

The luminance of a given color is its most important aspect when it comes to us seeing the details. For two colors to be easily distinguishable you want enough contrast in luminance between them.

You have three similar, albeit, different formulas to calculate the luminance of any specific color set with hexadecimal or RGB() values. All three will lead to similar, though different results.

Once you’ve calculated the luminance values for two different colors you can compare the luminance and see if there’s enough contrast between them. You can then turn to the Web Content Accessibility Guidelines (WCAG) 2.0 for how much contrast is acceptable.

Or you can find a tool and plug in your colors and let the tool do all the math. I’m sure most of us will prefer to use tools over the calculations. Still, it’s always good idea to understand where the tools you use came up with their calculations.

I have more more post in this series about luminance. I want to talk about working in grayscale and how luminance or a lack of it can contribute to our perception of depth. Well get to both next week.

Download a free sample from my book Design Fundamentals.

The post The Effect Of Luminance and Contrast Ratio On Accessibility appeared first on Vanseo Design.