How to use Datawrapper's automatic colorblind check
Every 12th men and every 200th woman of Northern European descent has some kind of red/green color deficiency. They’re either colorweak or colorblind. If 500 people see your visualization, 24 of them might have problems reading it because of it.
To help you picking colors that can easily be distinguished by colorblind readers, you can simulate every chart, map, and table you create for three types of colorblindness. The tool also automatically warns you when readers with one of these types of colorblindness won't be able to tell your colors apart.
This article explains how to use Datawrapper's colorblind check.
How to use the colorblind check
You can find the colorblind check below every chart, map, or table you're creating in Datawrapper, as part of the Preview panel.
By default, the option None (simulation) is selected. To simulate how your color look like for people with certain types of colorblindness, click through the four buttons next to the None button. Here's what they'll show you:
- Deuteranopia is a form of red- green blindness (1% of males).
- Protanopia is a form of red-green blindness (1% of males).
- Tritanopia is a form of blue- yellow blindness (less than 1% affected).
- Achromatopsia (total color blindness) is very rare. But for most accessibility "get it right in black and white."
How to use the automatic colorblind check
As soon as you pick colors that colorblind people won't be able to distinguish (= that look too similar in any kind of colorblind simulation), Datawrapper will show a warning sign on the corresponding button for the colorblindness.
For example, if people with Deuteranopia won't be able to distinguish the colors in your chart, map, or table, Datawrapper will show a warning sign on the button right next to None – the button that simulates a view of a person with Deuteranopia if you click on it.
You will find that problematic colors are usually equally bright combinations of red and green, orange and green, yellow and pink or blue and green. Another common problem is putting either of these colors against a gray of the same brighness.
The fix the colors, choose different colors or make sure the colors vary enough in brightness. For maps with diverging color palettes where this isn't an option, you will need to avoid red-green, orange-green, blue-green and yellow-pink gradients altogether.
If you fix the color combinations in your visualization, the warning sign disappears.
The different kinds of colorblindness
Why are there different kinds of colorblindness? Well, we see color because photoreceptor cells (also called cones) in our eyes react to certain light waves. We have three types of these cells: They’re either especially sensitive to light waves that translate into red-ish, into green-ish, or into blue-ish. If one of these cell types is not working properly, you’re at least a bit colorweak. If it doesn’t work at all, you’re colorblind.
What do these greek words mean? The names of these types of colorblindness sound complicated, but they're really just the Greek words for first, second, and third, combined with the word for blindness ("an" = no/not, and "opia" = vision). So Protanopia means "first blindness": Prot(o) (like in "prototype"!) + an+ opia. Deuteranopia means "second blindness" and Tritanopia "third blindness". The order of the colors is the same as in RGB: red, green, blue. So the first one, Protanopia, is a red-blindness.
Here's how colorblind people see your colors:
As you can see, protanopia and deuteranopia are very similar, so people often say "red-green blindness" to both of them.
The Datawrapper colorblind simulator also simulates Achromatopsia. This is colorblindness in its literal sense: You can’t see any colors at all. None of your cones still work, just your sense for lightness remains. It’s extremely rare.