How much color gamut do displays really need? Part 2: How we perceive color

Last week I set out to define the ultimate consumer display experience in terms of color performance. I laid out some potential color performance design goals for an ideal display, suggesting that such a display should be both accurate and capable of creating an exciting, immersive experience that jumps off the shelf at retail.

Can we achieve both goals? To find out, let’s start by looking at how we perceive color.

Color Perception

The color of objects that our eyes see in nature is determined by three things: physical, physiological and psychological:

The color of objects that our eyes see in nature is determined by three things: physical, physiological and psychological.

The color of objects that our eyes see in nature is determined by three things: physical, physiological and psychological.

The physical component of our color perception is a constant based on the laws of nature. It is a combination of the quality of the illumination or light source, in this case meaning spectrum it contains, and the reflectance of the object. In the image above, the ball appears red to the eye because it is reflecting red light, while absorbing most the other colors from the light source.

The physiological part of our vision is also a relative constant that is based on the electrochemical processes of the eye. The back of the retina contains photoreceptor nerve cells which transform incoming light into electrical impulses. These electrical impulses are sent to the optic nerve of the eye and onto the brain, which processes and creates the image we see. And that’s where the psychological component comes in.

Let’s look at how each of these components might affect display color performance, starting with the physical, which ought to be something we can measure.

Physical

Fortunately, a guy named Pointer has done this for us. For his 1980 publication, Pointer measured over 4,000 samples and was able to define a color gamut of real surface colors, of objects found in nature. The result is commonly called “Pointer’s Gamut:”

Color gamut of 4,000 surface colors found in nature as measured by Pointer in 1980 against the color gamut of the iPhone 5.

Color gamut of over 4,000 colors found in nature as measured by Pointer against the color gamut of the iPhone 5.

This already seems like a great place to start. It immediately looks like a great fit our first ultimate color experience criteria which was accuracy. If we could accurately capture and reproduce all of the colors found in the natural world it would make for a much improved, more accurate ecommerce experience, for example.

But how important are those extra colors? Looking at Pointer’s gamut mapped against the color gamut of the latest iPhone in the chart above, you have to wonder if we really come across these deep cyans and reds in everyday life. Are they just infrequent, rare colors or something worth pursuing for our display?

Turns out we do. As an example, Pantone’s color of the year for 2012 was a deep emerald green that falls outside of both the iPhone’s gamut and the HDTV broadcast standard. This is an important and popular color that appears a bit too yellowish on your computer monitor when you are shopping for the perfect tie on Amazon. So there are some really important colors outside of what the iPhone can display today.

But, what about our second criteria, the lifelike, exciting, immersive experience we want to give consumers? Is the gamut of the natural world enough?

Physiological

If we look at the second component of the visual system, the physiological component, we’ll see that we can actually perceive a much wider range of colors. The cells in the back of retina can actually detect the entire range of the CIE diagram. That’s almost double the range of colors that Pointer found in nature:

Color gamut of the average human eye vs gamut of colors found in nature as measured by Pointer

Color gamut of the average human eye vs gamut of colors found in nature as measured by Pointer

This is starting to sound like a much more immersive experience. Maybe we ought to pursue the full color capability of the human eye just like the industry has done for high, “retina” resolutions.

It sounds great but it would be a tall order. It would take quite a lot of power, brightness and extra bit depth to even begin to think about covering a color space this large. There certainly would be a high price to pay in terms of design tradeoffs to get there. So are there any truly valuable colors contained in that extra space, similar to the Pantone color in Pointer’s gamut, that would make us want to go for it?

Psychological

This is where the psychological component comes into play.

Seeing is not passive. Our brains add meaning to the light that our eyes detect based on context and experience and memory. We are continuously and actively re-visualizing the light that comes out of our retinas.

This may seem hard to believe but this fun demo created by neuroscientist Beau Lotto does a great job of showing just how much our brains actively interpret and change what we see.

The color of the chips has not changed in the video above, just our perception of the color. What’s happening here is our experience is telling us that the color chip in shadow must actually be a much brighter color than the chip under direct illumination, so our brain is just making the correction for us on the fly.

Artists absolutely play on this psychological element of our perception of color, sometimes using totally unrealistic or hyper real colors to make us feel or experience something new or help tell a story. In fact, one of the most influential art instructors of the 20th century, Josef Albers, once said that, “the purpose of art is not to represent nature but instead to re-present it.”

Monet's The Poppy Field, near Argenteuil

Monet’s The Poppy Field, near Argenteuil

So, whether it’s Monet using saturated and contrasting colors with equal luminance to trick our brains into seeing poppy flowers sway in an imaginary breeze in a 19th century painting or modern films which sometimes rely on the wider gamut capabilities of color film and digital cinema projection to create uniquely cinematic experiences for audiences.

Movies like “The Ring,” for example, which used a deep cyan cast throughout much of the film to create tension and help tell a scary story. Or Michael Bay’s “Transformers” movies, which use deeply saturated oranges, reds and teal greens to create an exciting, eye-popping palette appropriate for a summer blockbuster sci-fi movie about giant robots:

Wide color gamut in movies

There’s certainly a place for wild, unexpected colors in art. But, as we go through some of these examples, I think we’ll actually find that there is a huge range of expression possible within the gamut of surface colors that Pointer measured. The full range of gamut detectable by the human eye, while exciting to think about, is not really necessary to deliver both accurate and pleasing (engaging) color to our visual system.

So where does that leave us?

In my next post I’ll look at existing wide color gamut standards and content delivery mechanisms to see both what we can do today and what’s next for wide color gamut displays.

Smartphone displays continue to get sharper- how much resolution do we really need?

Last week DisplaySearch put out a new report on the current trend towards ever higher display resolutions. High resolution displays now make up most of the market for handhelds and 300+ ppi “retina-class” resolutions are coming on strong:

Smartphones and handheld devices are moving rapidly to high resolution. 200+ ppi will account for 54% of unit share in in 2013, with 24% of unit share to be 300+ ppi. Even higher resolution panels in the FHD class will emerge. 400-500 ppi FPDs are expected to hit the market with fast shipment growth in 2013. (source: DisplaySearch)

Not exactly earth shattering news. The display industry began rapidly moving towards higher resolutions the moment Apple first unveiled the retina display with it’s iPhone 4 in 2009. What is interesting here is that the trend shows no signs of abating, even as resolutions approach or surpass the acuity of the average human eye.

Highest resolution smartphone from 2009 to 2013 as a percentage of what the human eye can detect

Best performing smartphones in terms of display resolution from 2009 to 2013. Shown as a percentage of what the average human eye can detect.

The HTC One is leading the charge this year at 468 ppi. According to Dr. Ray Soneira of DisplayMate, that’s already equivalent to Apple’s retina display for eyes with 20/20 vision at a distance of just 7.4 inches from the eye- much closer than an average user will typically hold the device.

The question is- just how noticeable are additional increases in resolution beyond 400-500 ppi going to be for consumers? In my view, resolutions above 530 ppi will be wasted on the vast majority of users. Unless you have near perfect vision and hold your phone excessively close to your eye, you just won’t be able to see the difference. Still, device makers seem intent on pushing resolution as far as they can- some manufacturers I spoke with at DisplayWeek 2013 even talked about 4K smartphones!

It’s a shame because there are many other display performance characteristics that would benefit users. They may sound like less exciting specs but color performance, sunlight readability (a combination of reflectance, brightness and color saturation), and efficiency would all improve usability much more than another 50 or 100 ppi in resolution.

Color and Visceral App Design

Visceral refers to the gut, rather than the mind. Our brain may try to talk us out of jumping off a cliff, but as soon as we take that first step into the void, our guts take over. We respond with a rush of emotion and we can’t help but scream from terror or euphoria. It’s a purely visceral reaction. […]

So here’s my theory: I believe that introducing visceral elements into an app will take it past the point of just being awesome. It will make your app speak to the subconscious, built-in affinity that humans have for the physical properties I mentioned before.

That’s Rob Foster, co-founder of Mysterious Trousers, defining his theory about the importance of visceral elements in application design. The whole piece is well worth reading, especially if you are interested in design or have ever wondered just why Angry Birds is so unbelievably addictive.

In the quote above Rob is talking about the power of little kinetic events in applications like the bounce you get when scrolling to the bottom of a page on the iPhone or the satisfying little “pop” noise you hear when creating a new task in Clear. His point is well made, getting the details of these visceral elements right can clearly take an app from just useful to a truly engaging and even addictive experience for users.

While Rob’s piece focused on the impact of animation and sound, I wondered how color might factor into visceral application design.

Color choice is not just about beautiful graphics- it can also have a powerful physiological effect on us. We have a measurable response to aggressive colors like red, which may even cause a spike in testosterone levels. In fact, recent studies suggest that that the color of a uniform can affect the outcome of an Olympic wrestling match and onscreen colors can even influence how much you pay for something on eBay.

As mobile display technology improves, with more lifelike color and wider dynamic range, application designers may find that color becomes an even more powerful tool to elicit visceral responses from users.

Color of the year for 2013 falls outside sRGB gamut

Pantone Emerald 17-5641

Pantone recently announced their color of the year for 2013, a deep shade of emerald green that they call “Emerald 17-5641.” It’s a great color but there’s a catch- most displays cannot accurately show it.

Based on data from Pantone’s website, I was able to plot the color in CIE 1931 (xy). As you can see in the chart below, Pantone’s color is well outside the sRGB/rec.709 color gamut standard used by most HDTVs, the new iPad/iPhone and many desktop monitors. These devices will be stuck showing a version of Pantone’s emerald green that’s less saturated and probably a bit more yellow than the real thing.

Pantone Emerald 17-5641 vs sRGB, Adobe RGB 1998 and DCI-P3 color gamuts in CIE 1931

This is a perfect example of a popular real-world color that falls outside of the sRGB/rec.709 gamut. Unless you have a monitor that’s able to show wider color gamuts, like the DCI-P3 or Adobe RGB standards, you are missing out on a great color.

So you bought a 4K TV, now where is the 4K content?

Content is king. One of the biggest challenges for emerging display technology is content availability. Whether it’s 3D, 4K or wide color gamut, these new features simply aren’t worth much without access lots of great, optimized content.

As new 4K TV’s begin hitting store shelves this year, they are entering a content vacuum.

Standards bodies like the Consumer Electronics Association (CEA) and International Telecommunication Union (ITU) are still working out the precise definition of marketing terms like Ultra High Definition TV (UHDTV). Proposed standards could include support for eight million pixel resolution, extremely wide color gamut and 3D content. But, today, there is almost no content out there that takes full advantage of all of the exciting capabilities of the new sets.

And, unlike the transition to HDTV, there’s no government-mandated switch on the horizon to force broadcasters to get on board.

CIE 1931 rec.2020 vs rec.709

At least one set-maker is taking it upon themselves to solve this problem by delivering both the 4K content and hardware. Sony announced last week that it will loan a 4K Ultra HD video player loaded with UHD content to buyers of their new 84” UHD television. The selection of 4K content on this player is fairly limited for now, but as more titles are released, this approach could help drive adoption of high resolution and wide color gamut formats.  I wouldn’t be surprised if other set makers started following suit, though Sony does have an inherent advantage, owning a movie studio.

Shopping for a tablet this holiday season? Don’t forget to look at color performance

If you have been researching the perfect tablet to give to a loved one this holiday season, you’ve probably read a lot about display quality. Tablet display size, resolution and aspect ratio have been discussed at length this year, which is really no surprise, since the quality of the display has the biggest impact on how we enjoy content on these devices.

What is surprising though is that color performance, one of the biggest differentiators among the current crop of tablet displays, has been largely glossed over by the mainstream gadget press.

The Verge’s tablet comparison tool, for example, gives great info about pixel density, aspect ratio and touch capabilities, but color performance is nowhere to be found:

Color is being ignored in spite of the fact that there are tremendous differences in the color performance of each of these devices that directly impact the consumer experience on each.

So why are we overlooking a feature that, unlike many of the features we focus on these days, presents a real difference between devices?  I see a couple reasons. First and foremost, thanks to Apple’s marketing of the Retina display, pixels-per-inch has become the spec du jour in today’s device wars.  Device makers are focusing their marketing efforts on pixel count above anything else.

Aside from current trends, I believe there’s also a macro reason to why color has been left out: color performance is just hard to compare. There is no universally accepted spec that can sum up color performance across devices.

Take the three popular tablets above. We could add a “color gamut” row to the chart, measuring against sRGB, which would look like this:

From this information, a shopper could gather that the Nexus 7 and Kindle Fire HD have about the same color performance and both outdo the iPad mini. That is an accurate assessment, but it’s not the whole story. If we look at those color gamuts plotted in CIE 1976, some important nuances become apparent.

By measuring the percent of sRGB, we know how much of that overall color standard the device can reproduce.  However, displays usually produce more of one color than another and that information is completely lost with this measurement.  The Nexus and Kindle have significantly deeper blue than the iPad mini, most likely due to a narrower blue color filter like the one found in the third and fourth generation iPad. This accounts for most of the difference in sRGB coverage between the iPad mini and the other two devices.

Take a look at the other two primaries and it gets more interesting. In the image on the right that zooms in on green, we see that the Kindle Fire has the deepest green of the three, followed by the iPad mini and the Nexus.

For reds, though, it’s different again, with the Nexus having the deepest reds followed by Kindle and then iPad.

If we ever want to make color performance a real differentiator in consumer choice, we need to develop a new universal standard to easily compare color across devices, taking into account all of these nuances.

Color is a complex story to tell, but small differences in color performance are just as noticeable to consumers as pixel density in everyday use. Next time you find yourself at a retailer who carries all three devices, try googling test patterns and look at the differences. You might be surprised.

iPad Content Creation gets more Colorful with FiftyThree’s Paper app

App developer FiftyThree recently updated one of my favorite creativity apps for iOS, Paper, with an impressive new color-related feature. If you are not familiar with Paper, it’s a sketchbook app capable of making the work of even non-artists like me look gallery worthy with an intuitive and responsive interface.

The new feature, which FiftyThree calls “the biggest leap forward in color controls in the past 40 years,” is a color mixer that allows you to create a wide array of colors within the app just as you would in real life. They say they put a lot of time and effort into making the new mixer feel natural. The Paper color mixer works just like finger painting as a kid, mixing yellow and blue in the Paper app mixer produces green.

The new color mixer, shown at the bottom of this screenshot, lets you mix multiple colors to achieve a much wider palette in the new version of Paper.

This is a great feature that expands the content creation capabilities of an already exceptional app. But, as great as this app is, it’s still limited by the color capability of the device it’s installed on. Even the latest iPad, which can produce 100% of the sRGB color gamut, still only shows about 1/3 of the visible color spectrum.

The experience you will have mixing and creating colors on today’s tablets just will not be nearly as dynamic or visceral as making a physical painting. Not until better, wide color gamut technology is adopted in displays will the digital color experience match the stunning world of color we live in.

How does ink thickness change the appearance of printed color?

We typically focus on color as it relates to displays here at dot-color, but I came across a fascinating post about color in the print industry from John the Math Guy that I had to share. In this post, John takes a close look at how ink looks at different thicknesses and uncovers the reasons for some seemingly unconventional color-naming habits in the print industry.

What happens when we double the amount of ink on the paper? …it would seem that the thick layer of magenta is a lot closer to red. The plot below shows the actual spectra of two magenta patches, one at a larger ink film thickness than the other. The plot leads one to the same impression – that a thick layer of magenta is closer to red in hue than a thin layer.

Chart shows different spectrums of thick (red line) and thin (blue line) layers of magenta ink.

Read the whole thing here:  http://johnthemathguy.blogspot.com/2012/09/why-does-my-cyan-have-blues.html

 

Updated: How does the iPhone 5’s color saturation measure up against Apple’s claims?

Commenter William thankfully double checked our math and we’ve corrected a small error in our % NTSC calculation.

We finally got our hands on an iPhone 5 yesterday. I tried asking Siri if she really has 44% more color saturation but she wouldn’t give up the goods, so I went with plan B and aimed our PR-655 spectroradiometer at the phone to find out just how impressive the screen really is. A lot has already been written about this display, but not much empirical evidence has been published about the color performance. How does the screen actually stack up to the marketing claims?

In short, Apple did an exceptional job improving color saturation and display quality in general, but the unit we measured just missed the 44% more color saturation claim.

Measuring Up

The iPhone 5 has significantly more color saturation than the 4S.

The 44% more color claim for the iPhone 5 is the same claim Apple made for the new iPad. As with the iPad, increasing the color performance of the iPhone 4S by 44% of NTSC 1953 gamut, measured using the CIE 1931 color space, would result in color saturation matching the sRGB color standard.  Using these standards as the goal posts, we measured the iPhone 5 at 70% of NTSC 1953 in CIE 1931, a 39% increase from the iPhone 4S, which measured at 50%. That’s 5% less of an improvement than Apple’s 44% claim and just 99% of sRGB (measured against the sRGB primaries).

While 5% less might seem like a big deal, getting to 99% of sRGB is a major feat and will result in tremendously noticeable color improvement in the phone. Additionally, color filters are notoriously difficult to manufacture. Slight variances in performance like this are common and most likely outside the range of a just noticeable difference for the average person.

If you want to know more about NTSC, CIE and sRGB, and why we are using standards from the 1930s, I have written extensively about this issue in the past.

How did they do it?

Much like they did with the new iPad, Apple significantly improved the color filter performance of the iPhone 5. Based on our experience, this type of improvement typically means that the display requires 20-30% more power to operate at the same brightness. Considering that the display is already a major source battery drain on the phone, this further underscores the engineering effort Apple made to keep battery life about the same as the 4S.

Let’s take a quick look at the changes in each of the red, green and blue color filters, starting with white, which is all three filters turned on:

Looking at the white spectrum of the iPhone 5, we see that the new color filters are very similar to those of the new iPad. Compared to the 4S, the peaks are slightly narrower, which improves color purity. In order to meet sRGB, they also moved to deeper reds and blues.

As with the new iPad, the biggest difference between the 4S and the 5 is in blue. Apple moved the peak to a deeper blue but, more importantly, they narrowed the filter so less green light leaks through. The green leakage causes blue to look a bit “aqua” on the 4S.

Retinal neuroscientist Bryan Jones looked at both displays under his stereo microscope earlier this week. His close-up shots really show off the difference in blue filters.

Apple again chose a slightly deeper wavelength of green which is less yellow and eliminated some of the blue leakage that had been muddying the green on the 4S.

The change here is subtle but as with the other filters, the peak is narrower, deeper in the red and leakage is reduced. One difference worth noting is that, while we are seeing less peak leakage in the red filter, there had been relatively broadband leakage across yellow, green and into blue that has been largely eliminated.

Conclusion

In all, it’s an exceptionally well-calibrated and accurate display for any kind of device, especially a smartphone. Apple has gone to great lengths to design a screen that brings the vibrancy of sRGB to the palm of your hand.
If you are not familiar with color filters or the inner-workings of LCDs in general this great live teardown by Bill Hammack is well worth watching: http://youtu.be/jiejNAUwcQ8

Seeing red: can color change your spending habits?

Color can have a powerful physiological effect on us. This should come as no surprise to anyone who’s ever been wowed by a Monet or a Rothko. But color can affect us in ways you never imagined. Recent studies suggest that that the color of a uniform can affect the outcome of an Olympic wrestling match and onscreen colors can influence how much you pay for something on eBay.

In one study, researchers found that Olympic wrestlers wearing red won as much as 60% of the time, even against evenly matched opponents (who wore a different color).

US Wrestler Jake Varner (red) on his way to defeating Valerie Andriisteve of Ukraine in the 96-kg freestyle wrestling gold match in London. Credit: The ASSOCIATED PRESS

Similarly, in a Journal of Consumer Research study on the impact of color on consumers who buy items on auction sites like eBay, authors Rajesh Bagchi and Amar Cheema found that “red background color induces aggression through a feeling of arousal and it increases aggression relative to blue or gray backgrounds. This causes individuals to make higher bids in auctions but lower offers in negotiations.”

Why? The exact mechanism remains a mystery but researchers see some evidence that aggressive colors like red may actually cause a spike in testosterone levels.

I find it particularly fascinating that color choice did not specifically correlate to the price someone paid for an item. Instead, the colors drove more or less aggressive behavior, which lead participants to either seek the best deal possible against a salesperson or to beat out competing bids in an auction.

It got me wondering how retailers might be using color to influence purchasing. A quick survey of some popular online shopping destinations yielded potentially interesting results. Since product background is not always in the control of the retailer, I looked at the “add to cart” areas of three popular online retailers: Apple, Amazon and eBay.

All three employ a lot of blue, a calming color, in their ‘add to cart’ areas. Apple uses a shade of green, another calming color, for the “add to cart” button. Amazon lists the price in a dark red, while Apple uses a lighter shade to accentuate free shipping.

Next time you find yourself shopping either online or brick and mortar, take note of the colors around you – you may be surprised by how far your environment is being manipulated to get you to pay more.