Why Luminance Is The Key Component Of Color

Posted: 08 Dec 2014 05:30 AM PST

In his book Interaction of Color, Joseph Albers tells us that color is almost never seen exactly as it physically is. All color judgements are relative. How a color appears is affected by the colors of the objects around it.

He further tells us that few people are able to distinguish the difference in light intensity when comparing different hues. We’re good at distinguishing light and dark in a single hue, but not across hues. You can see for yourself in the image below, where both square A and square B are the same medium gray (#787878).

Chessboard Square Illusion — Despite looking very different, squares A and B are the same medium gray. The image on the right connects them with a strip of the same color.

For the next few weeks I want to talk about light and dark. I want to explore how we see light as a component of color and what it means for accessibility. I’ll close the series with some thoughts about working in grayscale. Let’s start with why we’re so much more sensitive to light than color information.

Rods and Cones

Our eyes perceive light and dark as well as different color information through rods and cones. Each has different function and together they allows us to see three components of color.

hue
saturation
some measure of light and dark

Rods are responsible for seeing in low light (scotopic vision). To do this they need to be very sensitive to light and dark. However, they have a low visual acuity, making it difficult for rods to determine spatial relationships.

The details we see are carried mostly by the information we perceive about light and dark

Fortunately spatial acuity is a major property of our cones, which are active when more light is present (photopic vision). Cones are responsible for sensing color information (hue and saturation) and the central fovea of the eye is mostly cones.

We have three types of cones, S-cones (red), M-cones (green), and L-cones (blue) for short, medium, and long wavelength. Is it any wonder we see color in terms of three primary colors?

Rods are more plentiful than cones. While cones may be concentrated in the central fovea, overall the eye has close 20 times as many rods as cones. That means our eyes are much more sensitive to the luminance component of color than the chrominance component.

We also have a tendency to disregard some of the hue and saturation information. In fact, the details in what we see are carried mostly by the information we perceive about light and dark.

Here’s a good example of the importance of luminance. If you click through you can see an image with the luminance removed and then another version of the same image with the color information removed. It should be clear, which image shows more detail. Hint: it’s the second one with luminance and without color.

Luminance, Lightness, Brightness, and Value

I’ve used the word luminance a couple times now and should probably define it along with some other words that refer to light and dark in color.

Light hits surfaces, illuminating them. The surfaces reflect some of the light, which will then contribute to the illumination of other surfaces. A certain amount of all this light will eventually strike the eye.

Luminance is a measure of the intensity of light that reaches the eye. Its unit of measure is candela per square meter (cd/m2), which you don’t really need to know. What’s important is it’s an absolute measure of the intensity of light.

Brightness and Value are the same thing. They’re the perception of an object’s luminance. It’s how our eyes see the intensity of light. Brightness or Value is perceived luminance.

Lightness is the brightness relative to the brightness of a similarly illuminated white. It’s perceived brightness or brightness with color information removed.

Influences on Luminance

Studies going back to the 19th century show that our perception of lightness (or brightness) don’t scale linearly with luminance. Our perception varies for example when the same color is placed against a different colored background.

That means something other than light alone affects our perception of luminance and we can look to our rods and cones for a reason why.

Day and Night Luminance

We make use of our cones more during the day when light is plentiful and our rods more at night when light is scarce. That leads to different levels of day and night luminance.

During the day the amount of bright light is too much for our light sensitive rods so our cones determine luminance during the day. Information from all three types of cones is combined meaning the perceived luminance is dependent on both light intensity and the specific wavelength of that light.

At night the situation is reversed. Our cones don’t have enough sensitivity for the lower light and it’s our rods that determine luminance. It’s also somewhat dependent on both the intensity and wavelength of the light.

In either case the combination of light intensity and wavelength causes us to see some some wavelengths (hues) as brighter or darker than others. We perceive different luminance in the same object depending on how much light there is in the environment.

Simultaneous Contrast

It’s not only light in the environment that affects luminance. When colors are side by side they interact with each other and their interaction changes our perception of them. The effect is called simultaneous contrast.

The colors themselves aren’t any different, but our perceptions of them are. Each object casts a shadow with it’s complementary color. Red casts a somewhat green shadow for example. When placed against another color the other color will appear to have more green than it does.

The Affect of Hue and Saturation on Luminance Values

If you keep the saturation across different colors constant and convert the hues to grayscale, each color shows a different amount of luminance. Blue is the least luminant and yellow is the most. Every color has its own natural luminance levels.

Saturation also affects luminance. If you reduce the saturation of a pure color to 0% the result is a 50% grey with a 50% value for luminance.

For hues with a natural luminance above 50%, decreasing the saturation also decreases luminance. On the other hand for hues below 50% natural luminance the opposite happens and luminance increases as saturation is decreased.

Ultimately perceived luminance is affected by both the hue and saturation of the specific color as well as those of nearby colors. It’s also influences by how much light is present in the environment.

HSL, HSB/V, and RGB

Let’s take this all back to how we usually set colors in graphics editors and code. Hopefully after reading everything to this point you have a better idea of the differences between HSL, HSB, and HSV. In all three

H = Hue (measured from 0 degrees to 360 degrees)
S = Saturation (measured from 0% to 100%)

It’s the L, B, and V that differ.

B/V = Brightness/Value which measure the perceived luminance from 0% to 100%. Both are the same.
L = Lightness, which measures the perceived luminance relative to the perceived luminance of white from 0% to 100%

Hopefully the definitions are familiar. I’m mentioning them again, because I have trouble remembering which is which. A quick way to remind yourself is to remember the irony that lightness does not equal light.

HSB/V is measuring the amount of light
HSL is measuring the amount of white

Typically when coding we work with either RGB (rgb(), rgba(), or hexadecimal values). We don’t have to. The CSS3 color model includes hsl() and hsla() both of which have very good browser support. Even if they didn’t, preprocessors would let us work in hsl(a) and convert to something browsers do support.

However, browser support is very good. It’s better than the srcset attribute and picture element and other responsive image stuff I’ve been talking about the last month or so. IE8 and below have no support. Everything else fully supports both hsl() and hsla().

You can also covert between the different color models as long as you understand there is no perfect conversion. Below are a couple of example conversion tools, though plenty more exist.

At the start of this post I mentioned how we aren’t good at determining which color is lighter or darker. There are a couple of tricks you can use to look at a composition and determine contrasts in value or color.

Squinting can help you see contrasts in value, but not contrasts in color. As you squint, color information will disappear. Squinting lets in less light which activates your rods over your cones.

To see color while luminance fades you can try to defocus your eyes. It’s a little harder to do. You want to focus on a point a few inches in front of your face. You can hold you finger a few inches in front of your face and focus on it. Then hold that focus after you remove your finger. You should still make out color information in whatever you’re looking at.

Closing Thoughts

I hope everything above wasn’t too technical. The main thing I wanted to get across was that color can be broken up into chrominance (hue and saturation information) and luminance (brightness/value or lightness information)

Because of the way the rods and cones in our eyes work, we’re more sensitive to luminance than we are to chrominance. It’s difficult for us to tell which of two colors is lighter or darker when information about hue and saturation are present.

In part that’s because both hue and saturation influence luminance so when color information is present in an object or in nearby objects it changes our perception of the amount of luminance. How much light is in the environment changes out perceptions as well.

Our increased sensitivity to luminance suggests we should understand luminance if we want to improve our skills with color. It also tells us luminance will provide the key to creating color schemes that are accessible and pass WCAG standards.

That’s where I want to take things next week. I want to continue talking about luminance, through less about what it is and more how to calculate it and what the numbers mean in regards to accessibility.

Download a free sample from my book Design Fundamentals.

The post Why Luminance Is The Key Component Of Color appeared first on Vanseo Design.