July 13, 2020
Bridget Cogley
Comments Off on 3 Lies about Color (and what you can do about it)

3 Lies about Color (and what you can do about it)

Can’t get enough color myths? Me either!

Instead of baking sourdough bread, I’m sampling my color talk at all the TUGs. Trust me, it’s well fermented and ready for showtime. Want a color talk for your TUG? Count me in.

Besides the intuitiveness of red-yellow-green or that love is always red, here are some other lies we’ve been told!

You see what I see*

The asterisk here recognizes some people are colorblind or have other identified reasons for seeing something different. Some of us learn about colorblindness and this variation the hard way. For me, it was after I printed out a beautifully color-coded FAQ sheet using brand colors for a marketing intern that was colorblind. Our brand colors at the time? Blue, green, and orange. Guess which 2 I picked for comparison’s sake….I trust you are smarter than me.

Known differences aside, the story that gets sold is perception is otherwise universal. Except, the internet proves this notion wrong time and time again.

Image of a dress that sparked a lot of color research. Some say it's black and blue, others gold and white. Often known as "The Dress"

Which image best matches what you see?

This dress set off a firestorm of research. Rarely do these experiments happen in the wild. It highlighted just how varied our perceptions are and also the stickiness of those perceptions. One suggested part of the difference goes to how the brain interprets lighting in the image. Another leans towards the checkerboard image.

Checkboard illusion.
A and B are the same color.

This doesn’t just happen with 3-dimensional objects or lighting effects. It also happens with 2-dimensional forms.

Nested rectangles show the Chubb illusion. The inner rectangle that's placed on a lighter background looks darker than the other inner rectangle on a darker background.

Both inner rectangles are the same color, though it’s hard to believe it.

The same rectangles as above, but one inner rectangle encroaches on the other, breaking the illusion.

This same effect plays out in charts.

Chubb illusion shown with a treemap.

Some of these have the same color value. Can you guess which ones?

Here’s the same data (axes and labels intentionally hidden) where size and color from the treemap are preserved for easier comparison between the two charts. Depending on your task and intentions, a scatterplot provides greater efficiency and accuracy.

Scatterplot with the same data. Relationships between values are a bit clearer.

How to address this color lie: try different charts, particularly if the data in color is important.

Complementary colors play nicely

Or, in other headlines, there’s a reason these colors end up in comic books…

Comic book style BAM with are these fun to read? Colors selected because they are painful.

Complementary colors complete each other, creating black/brown on conventional mediums and white with lighting effects. This effect helps create chromostereopsis, particularly with red and blue.

Does this hurt your eyes? It should. Is it floating? Thank chromostereopsis the effect that gives you 3D.Written twice (green on one side, blue on the other) on top of red. It is painful.

Chromostereopsis is an awesome effect when you want things to jiggle or feel like they’re slightly popped off the page (think comic books or 3D movies). It’s a far less fun effect when you’re trying to understand your data. People who wear glasses to correct nearsightedness will be more affected by this than others.

Chromostereopsis recreated on blue with ared dots in a scatterplot.
As someone with glasses, this glows. Painfully so.

The wildest part of all? Chromostereopsis can even be recreated on grey.

Chromostereopsis recreated on grey with a scatterplot and tons of bright colors.
Shoutout to Marian Eerens for inspiration

If you’re working with red and blue as colors, be mindful of where they land. Test drive them if chromostereosis doesn’t affect you as much.

How to address this color lie: avoid overlapping complementary colors.

We notice bright colors

Want someone to see something? Make it bright! This myth gets sold a lot these days, especially since attention is waning.

We notice bright colors.Red and green shape highlight this point.

The challenge – as these myths have shown – is that what we think is true often isn’t the whole truth.

We notice difference.Black and white shape highlight this point.

Our eyes are attuned to those “out of place” items. Both the white and black shapes stand out in the image above.

We notice RELATIONAL contrast.Slide is bright green, but what stands out are intermittent shapes.

Here, we notice all kinds of things are out of place.

Bright green scatterplot with black data points. The gridlines are slightly lighter and it's easier to see the data.

Despite being bright, the data here can still be seen. Part of this relies on pushing the gridlines back. Here’s what happens if we don’t.

Bright green scatterplot with black data points. The gridlines in black make this hard to see.

With too much black, the green becomes blinding. This also comes into play with Web Content Accessibility Guidance.

Ratio of Lighter: DarkerAAA = 7:1 for readable textAA= 4.5 for readable textNOPE on grey highlights an example not in adherence

We want the right amount of contrast between our elements. Too much and we invoke pain and make it hard to see (as with all things, there are caveats here). Too little and yes, it’s also hard to see. For more fun, toss in computer screen variances and it’s very hard to anticipate what others see. Test your colors for accessibility and make sure elements like gridlines are pushed back.

How to address this color lie: test differences and be aware of relational contrast.

Now that your eyes are exhausted, have some visual tricks set to music.

More Posts Like This One