This video is available to students only

Color tips

We talk about a few tips & tricks for choosing effective, accessible colors for our data visualizations.

Color tips#

Here are a few tips to keep in mind when choosing individual colors or a color scale.

Contrast#

contrast example

Make sure that your colors have enough contrast with their surroundings in all cases. If you're using Chrome, there is a great tool to check that your colors have enough contrast right in your dev tools. Learn how to use it in the Appendix.

Color blindness#

color blindness example

Don't assume that your users can see your charts as clearly as you can. Almost 8 percent of males of North American descent have red-green color blindness. To make sure most people can encode the information from your color scale, stay away from scales where users have to distinguish between red and green.

Here's a simulation of what the above picture looks for people with red-green color blindness.

color blindness simulation example
 

This page is a preview of Fullstack D3 Masterclass

Please select a discussion on the left.