Color tips

[00:00 - 00:13] When I'm choosing individual colors or color scale, there are a few tips and tricks that I like to keep in mind for making sure the colors really pop. So the first tip is contrast.

[00:14 - 00:40] So if you're visualizing something and there's not enough contrast between your text or your data elements and the background of the page, it can be really hard for people, especially people with low vision to read the text or see the data elements. So making sure there's enough contrast is really going to make your chart readable, which is really the most important part of any chart.

[00:41 - 00:56] There are some contrast tools, at least in the Chrome Dev tools, that are really good to know how to use because then you can see if there's enough contrast between your colors without even leaving the browser. The second tip is to know about colorblindness.

[00:57 - 01:11] So almost 8% of people of males with North American descent are red, green colorblind, which is really the most common form of colorblindness. There are other forms, but they're a lot less common.

[01:12 - 01:40] So when you're creating a color scale, it's a good rule of thumb not to go in between green and red because it's going to be pretty hard for some people to distinguish the difference between certain colors. And also it's good to use a colorblind simulation tool because it's not really intuitive what exactly shades of red and green are going to be hard to distinguish.

[01:41 - 01:56] So this pair on the left is going to be really hard for people with red green colorblindness to distinguish versus the pair on the right. And we know that because we've simulated, we used a tool to simulate this red green colorblindness.

[01:57 - 02:08] So this kind of like orangey red in this green are almost impossible to tell apart. Whereas this pair on the right is going to be okay even for people with red green colorblindness.

[02:09 - 02:33] One example is if we use this red and green for a diverging color scale on a map, it's pretty much impossible to tell what is negative population growth and what is positive population growth. So for something like this, either stay away or have a second way that people can get that information.

[02:34 - 02:50] Our next step is about comparing colors. When it's important for the chart to have users compare one color to another, having larger areas of color and closer together areas of color is going to make that comparison a lot easier.

[02:51 - 02:59] So on the left we have these two swatches of color that are pretty far away. It's a little bit hard to tell which is more green, which is more blue.

[03:00 - 03:09] Whereas this pair on the right, they're closer together. It's going to be a little bit easier to do that comparison.

[03:10 - 03:31] The next tip is using semantic meaning when you can and when it's not going to upset anyone. It can be a little bit contentious when you have something like gender or sex and you don't really want to use pink for girls and blue for boys because that's a little bit antiquated.

[03:32 - 03:49] But there are some really nice applications of this. For example, if you want to visualize a color for a forest and a color for a sea, it's nice to take advantage of a lot of people associate the color green with the forest and the color blue with the sea.

[03:50 - 04:09] So if someone needs to go back and forth between a legend and the data elements , it's easier to keep in their mind because there's this meaningful association. The last trick I wanted to go over is don't forget that gray is a color and also use it to your advantage.

[04:10 - 04:24] The best chart isn't necessarily the chart with the most colors. If you have a single point that you want to make or a bar that you want to highlight, you can color that bar and make everything else gray and that bar is really going to pop.

[04:25 - 04:35] So there's one goal you want with the chart and that includes highlighting one bar. You can definitely use color to your advantage to highlight that one bar.