Do you want to switch to English?

No
Yes

Möchten Sie auf Deutsch umstellen?


Nein
Ja

Vous souhaitez passer au français?

Non
Oui

¿Quieres cambiar a español?

Si
No
X

See the World Differently: a Guide to Colorblind-friendly Maps

Best practice Tips & tricks June 24, 2024

In today’s constant flow of information, companies are competing for the attention of every viewer. However, many of them overlook the accessibility of design and miss out on the significant part of the audience. Are your maps easy to read? Let’s check it in this article and learn how to make Colorblind-friendly maps!

This statistic will surprise you

Colorblindness affects 8% of men and 0.5% of women. In total, there are about 300 million colorblind people in the world, which is equivalent to half of the total population of Europe.

In addition, clear colors enhance image clarity for people with other visual impairments (2 billion people, according to WHO). This becomes especially relevant in the context of the aging population, as a rising number of individuals faces vision changes.

Cheat sheet on colorblindness

“Colorblindness” is a vision disorder that reduces or completely eliminates the capacity to differentiate colors. Types of colorblindness are sorted by prevalence:

1. Green (deuteranomaly).
The most common type of colorblindness.

2. Red (protanomaly).  

3. Blue (tritanomaly). 

3. Monochromacy 
Perceiving the world as black and white.

N.B. People with colorblindness not only find it challenging to recognize these colors, but also the shades that contain them. For example, if a person cannot perceive red color, blue and purple may appear identical since purple incorporates a red hue. 

Image source: Rutgers Information Technology

No color blacklist

There is a common belief that you should not use red and green together for accessible design. However, this advice is not exhaustive. It’s not the color that’s important, but the hue and how it interacts with the other components of the design. 

The bad news is that we can’t tell you which colors to avoid. The good news is that you don’t have to change your favorite or brand colors, you just need to accompany them with the right elements. You can use the browser extensions to simulate different types of vision and test your design. You can also use one of the palette generators, such as Adobe to create an accessible palette.

Ways to make your map accessible

Mapcreator offers detailed map style customization, so we can help you adapt your styles in many ways. The main rule is that color should not be the only clue. Some other elements and effects should make the objects of your map sharp and recognizable. Let’s look at a few examples below, all achieved with Mapcreator.

1. Attention to similar shapes
Maps, unlike pie charts, contain a geometry as a visual clue. For example, you are unlikely to confuse roads and buildings with similar colors because they have distinct shapes. At the same time, it is better to confirm that the colors of rivers and roads differ, since both are line-shaped objects. 

The choropleth maps deserve special attention. This is a case of a map where the geometry itself cannot convey information to the reader. 

2. Contrast 
The most effective way to make the image readable is to increase its contrast. Look at your map with a black and white filter and make sure the colors are distinguishable. People with reduced color sensitivity are able to discern dark and light shades. To show the difference and importance of contrast in maps, below you can find two good and bad examples of contrast in maps. Although in coloring the contrast for both maps seems perfectly fine in regular vision, with colorblindness you can see how hard it is to see the roads or any details on the map.

Bad example in regular- and colorblind vision:

Good example in regular- and colorblind vision:

3. Stroke
If you cannot change the colors to more contrasting ones, add a stroke of a darker or lighter color. Outlining text, roads, buildings and other elements with an additional color will help highlight them.

Example without stroke, for both regular- and colorblind vision:

Example with stroke, for both regular- and colorblind vision:

3. Texture and patterns
Another way to make map elements more distinguishable is to add texture or patterns. In the examples below you can clearly see how sometimes, even colors like blue and green, can become one puddle for those who are colorblind. The usage of pattern can here be seen to distinguish the park area from the water area.

Example without pattern, for both regular- and colorblind vision:

Example with pattern, for both regular- and colorblind vision:

4. Icons 
You can also add icons to make the map clearer. As you can see in the example below, the colorblind vision blurs the red and green into one muted color. Here, arrow in the map can help to have two areas stand out, ensuring that the story can be understood that people from these areas are for example migrating.

5. Text
Text can effectively highlight the main message of your map, but it should be visible. If you do not want to use a text outline, ensure that the colors of the text and background comply with the WCAG standard. You can use  this website to see if it is better to use light or dark color for your text.

Try it out for yourself!

We hope this article inspires you to create accessible maps. Let these recommendations become not a set of restrictions for you, but opportunities to look at your design from a different perspective and take care of your audience.

Register