What are the three channels of color?

The three channels of color are luminance, saturation, and hue.

What is the main function of luminance in color?

Luminance is crucial for detecting edges and fine details in images.

How does color deficiency affect color perception?

Color deficiency affects people's ability to see certain colors, particularly on the red-green axis.

What percentage of men are affected by red-green color deficiency?

Approximately 8% of men have red-green color deficiency.

How can visualization design accommodate color deficiency?

By adding redundancies like luminance differences or changing shapes, not relying solely on hue.

What are some examples of chroma channels?

The chroma channels include the red-green (a*) axis and the yellow-blue (b*) axis.

What visualization technique is safe for color-deficient vision?

Using a blue-orange color map is safer for color-deficient vision.

Coblis is a simulator that shows how visual encodings appear to people with color deficiencies.

Color (Ch 10) II, Visualization Analysis & Design, 2021

00:06:00

https://www.youtube.com/watch?v=yUsL6a1d9n0

Summary

TLDRThe discussion focuses on using color in visualization analysis and design, emphasizing three color channels: luminance, saturation, and hue. Luminance is critical for detecting edges and is achromatic, while the other two channels are chromatically oriented along red-green and yellow-blue axes. The topic also delves into color blindness, technically termed as color deficiency, affecting primarily the red-green axis in about 8% of men. They suggest accommodating color deficiencies in designs through techniques such as adding luminance differences and shape variations, not relying solely on hue. They highlight simulators like Coblis to test how visuals are perceived by those with color deficiencies and recommend safer color mapping methods, such as blue-orange, for those with color-deficient vision.

Takeaways

🎨 Color is decomposed into channels: luminance, saturation, and hue.
👁️ Luminance handles edge detection, crucial for visual clarity.
🟥 8% of men are red-green color blind, affecting their color perception.
🌈 Simulators can help visualize how those with color blindness see images.
👓 Incorporate redundancies in design, like luminance and shape variations.
🌀 Relying only on hue in design can lead to visual issues for color blind individuals.
🔍 Chromatic channels include red-green and yellow-blue axes.
🔄 Accommodate color deficiencies by not solely depending on hue differences.
🟠 Blue-orange color maps are safer for color-deficient viewers.
🔬 Utilize tools like Coblis to check visual encodings for color blindness challenges.

Timeline

00:00:00 - 00:06:00
The speaker explains the decomposition of color into three channels: luminance, saturation, and hue, emphasizing their roles in visualization—luminance and saturation for ordered data, and hue for categorical data. They discuss how luminance is essential for edge detection in human vision, citing Maureen Stone's example that highlights the significance of black and white contrast for perceiving edges, over changes in saturation and hue. This is crucial for designing visualizations where text legibility requires luminance contrast.

Mind Map

Frequently Asked Question

What are the three channels of color?
The three channels of color are luminance, saturation, and hue.
What is the main function of luminance in color?
Luminance is crucial for detecting edges and fine details in images.
How does color deficiency affect color perception?
Color deficiency affects people's ability to see certain colors, particularly on the red-green axis.
What percentage of men are affected by red-green color deficiency?
Approximately 8% of men have red-green color deficiency.
How can visualization design accommodate color deficiency?
By adding redundancies like luminance differences or changing shapes, not relying solely on hue.
What are some examples of chroma channels?
The chroma channels include the red-green (a*) axis and the yellow-blue (b*) axis.
What visualization technique is safe for color-deficient vision?
Using a blue-orange color map is safer for color-deficient vision.
What is Coblis?
Coblis is a simulator that shows how visual encodings appear to people with color deficiencies.

View more video summaries

Get instant access to free YouTube video summaries powered by AI!

Subtitles

Auto Scroll:

00:00:00
Let's continue talking about Visualization Analysis and Design through color.
00:00:08
So, in the previous segment about color,
00:00:10
we talked about this core idea that we decomposed the monolithic idea of color
00:00:15
into these three channels of: the magnitude channels of luminance and saturation - good
00:00:20
for ordered data - and the identity channel of hue - good for categorical data.
00:00:24
But, let's think a little bit more about what happens with these three channels.
00:00:30
And we're going to think about this in the context of what people often call
00:00:33
color blindness. Technically it's color deficiency. Not that people can't see
00:00:38
any color at all, but that they see fewer colors than color normal people.
00:00:45
So this idea of luminance - an important characteristics
00:00:49
of luminance is that this is how the human visual system detects
00:00:54
edges. The only way to see edges is through luminance. That is the fine grain detail.
00:00:59
So, here's a great example from Maureen Stone, who I've gotten a lot of my color examples from.
00:01:05
And notice how in this photograph of a realistic scene, it's the luminance
00:01:09
information - the black and white - that gives you all the edges. And if we take that away,
00:01:13
and only have the changes of saturation and hue, notice how it's these big lumpy blotches.
00:01:19
We're really not seeing any sort of fine-grained edge structure.
00:01:24
So the implication of that for visualization design is,
00:01:26
remember anytime you're dealing with labeling, legible text requires luminance contrast.
00:01:32
And we'll come back to that.
00:01:35
In the context of color deficiency, what's useful to know is that what your brain,
00:01:40
your entire visual system, and brain actually does even before it hits the brain back in the optic,
00:01:46
before the optic nerve, is that what we perceive is split into three channels.
00:01:52
There's a luminance channel that has no, what we normally would think of as color information,
00:01:57
it's only black and white. It's achromatic. That's where we're doing all that edge detection
00:02:02
and then there are two channels.
00:02:05
We're going to call those chroma channels,
00:02:06
and think of these as axes along which we can detect changes. And one of these
00:02:12
we're going to call that a* is the red-green axis, and then b* is the yellow-blue axis.
00:02:19
And the punch line is that what we call colorblindness,
00:02:22
is that we don't have much acuity in one of those axes. In particular 8% of men are
00:02:30
color deficient along that red-green axis. There's actually two flavors:
00:02:34
one sort of more about the red, and one sort of more about the green. It is possible but much
00:02:39
more rare to have color deficiencies along the blue-yellow axis and that is not sex-linked.
00:02:47
So what are the implications of this color blindness?
00:02:51
It's not that people are only seeing black and white, but what can we do as vis designers?
00:02:57
So a key thing is you can check what a visual encoding looks like with the
00:03:02
simulator. Notice how in this picture at the top,
00:03:06
it's a naturalistic scene and we are able to distinguish between the red and green.
00:03:11
Because wait, red/green colorblind I thought that means they can't see the difference?
00:03:15
That in this picture although there are differences of red and green,
00:03:19
that is not the only difference. There's also some luminance, and maybe even saturation difference.
00:03:24
And the simulator lets you see that.
00:03:26
My current favorite one is the Coblis one on the url is right up above me.
00:03:32
I want you to notice in this visualization though in the lower left corner.
00:03:37
So notice how the heat map is not easily distinguishable for the deuteranopes and
00:03:43
the protanopes - those are the the two flavors of red green color blindness.
00:03:48
So although the naturalistic image had these differences in luminance, in a constructed image,
00:03:54
where we explicitly constructed it to have just these differences in hue and
00:04:00
no changes in luminance, because we are trying to show with an ordered color ramp - actually
00:04:06
a diverging color ramp what's happening - this is exactly where we run into problems.
00:04:13
So what can we do? If possible don't just encode by hue alone.
00:04:18
You can have redundancies. For example, if there is domain specific semantics where
00:04:23
you really do want things to be red and green - for example in finance this has domain meaning
00:04:28
then you can in addition to these hues,
00:04:32
also have differences of luminance, in order that you're guaranteed
00:04:35
that they are still visible even by someone with color deficiencies like we see in the upper right.
00:04:41
Another example of what you can do, looking over in the lower
00:04:45
left, is notice how we can redundantly encode both the shape. We could change the shape;
00:04:52
we could vary the luminance; we don't have to only have hue differences of just two round buttons
00:04:58
identical except for hue. So always think about when it would make sense to redundantly encode.
00:05:05
So that you can have your cake and eat it too, where you can have the full spectrum of colors
00:05:10
for people with color normal vision, but also accommodate those with color deficient vision.
00:05:16
So color deficiency really reduces color to just two dimensions,
00:05:21
but that doesn't mean there's no color at all. So if you look and here we've got the normal
00:05:27
vision, then we've got those two flavors, protanope and deuteranope of the red-green,
00:05:31
and then the much more rare tritanope blue-yellow deficiencies.
00:05:35
And notice how we are still able to see certain amounts of color change.
00:05:40
And so, if you're going to do some sort of a color map. one of the safer ones to do
00:05:44
when you're designing for color deficient vision is that blue orange one. because
00:05:49
those differences are preserved by both of the red-green color deficiency mutations.