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

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

摘要

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.

心得

  • 🎨 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.

时间轴

  • 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

视频问答

  • 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.

查看更多视频摘要

即时访问由人工智能支持的免费 YouTube 视频摘要！
字幕
en
自动滚动:
  • 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.
标签
  • visualization
  • color channels
  • luminance
  • saturation
  • hue
  • color deficiency
  • red-green blindness
  • edge detection
  • simulation
  • design techniques