Wikipedia:Coloring cartographic maps

This page provides informal assistance related to the use of colors in maps: including fill-colors for countries or provinces; as well as graphical overlay colors such as used for transit maps, exploration tracks, or battlefield movements. If the information in this page conflicts with any Wikipedia policy or guideline, the policy or guideline takes precedence.

This is an information page.

It is not a Wikipedia policy or guideline; rather, its purpose is to explain certain aspects of Wikipedia's norms or practices. It may reflect varying levels of consensus.

Shortcuts

Creating maps

Creating maps in SVG file format

Maps should be created with the SVG format, rather than photo/image formats such as PNG or JPEG. SVG is superior for maps because it is very easy to change or update the colors, lines, and boundaries in an SVG file. To edit SVG files, many apps are available, including the free and open source Inkscape app, which runs on most platforms.

Find blank maps to paint

Generally, you should start with a pre-existing blank SVG maps. Many SVG maps are available in Wiki Commons. It is easier to find blank maps using the "Category" feature of Wiki Commons rather than using the "Search" prompt. The text labels below (such as "Africa" under the sample maps) will take you to the relevant Wiki Commons category.

Note that many SVG maps do not support color-filling. There is no easy way to determine which support color-filling. The best way is to load the SVG file into the InkScape app, and see if it is possible to select (highlight) individual countries or regions: if you can, then you can fill them individually with colors. If you cannot select individual regions, then you cannot fill individual regions with specific colors.

You can find here more SVG blank maps in Commons.

Map data: quantitative vs qualitative

Before choosing a color palette, consider which sort of map you are creating:

Qualitative data - Data that indicates a one of several options. For example: Ethnic majority in each country; which political party has the majority in each province; Favorite beverage in each county; etc.
Quantitatively data - Data that has a magnitude or numerical measure. For example: population density; crime rate; GDP; etc.

The color palette you choose will be determined by which kind of map you'll be creating.

Choose the color palette

A color palette is a set of colors used in a map. ColorBrewer is an online tool (created by Cynthia Brewer) that generates useful color palettes for maps. Shown below are the names and color representations for many of the ColorBrewer palettes. The template {{BrewerColors}} can be used to display some BrewerColor palettes as rectangles of color.

Palettes that are consistent with accessibility guidelines

The MOS:COLOR guideline suggests that the colors should be chosen in a way that makes the map understandable even to color-blind users – of the color palettes below, the "Sequential" palettes are most likely to be consistent with the accessibility goals.

Sequential (1-9)

YlGn
YlGnBu
GnBu
BuGn
PuBuGn
PuBu
BuPu
RdPu
PuRd
OrRd
YlOrRd
YlOrBr
Purples
Blues
Greens
Oranges
Reds
Greys

Palettes that may not meet accessibility guidelines

The following palettes may not be consistent with the MOS:COLOR accessibility requirements. It is difficult to determine if specific palettes have accessibility issues, because there are several forms of color blindness. For example, the "RdYlGn" divergent palette will certainly cause accessibility problems for red-green color blindness.

Divergent (1-11)

PuOr
BrBG
PRGn
PiYG
RdBu
RdGy
RdYlBu
Spectral
RdYlGn

Qualitative (1-8/12)

Accent
Dark2
Paired
Pastel1
Pastel2
Set1
Set2
Set3

Filling a blank SVG map with colors

In the two examples that follow, we will use a blank map (SVG, as it could not be otherwise) of the world:

Qualitative data

This is the easy case, and here, as in the example in the worldwide distribution of military alliances, we will choose 4 colors:

With {{BrewerColors|Set1|4|a}}, that shows: #e41a1cff #377eb8ff #4daf4aff #984ea3ff

In fact, in the qualitative data the Brewer palettes are less necessary.

Once loaded this drawing in Inkscape, suppose you want to paint France of the indicated red color. That is why it is necessary to select it, and now, France, has like the other states, has been painted with a default gray color:

Go to the color palette (Fill and Stroke with Shift + Ctrl + F), where at the bottom (of the first page) you can see, which France has assigned a gray tone (b9b9b9ff):

Then you just have to change for the red color of the palette (e41a1cff):

This will allow us to paint the world map with these 4 colors. For those not very familiar with Inkscape, it is worth remembering that, to go faster, you can select several countries at the same time.

Preparing the code from the legend of the map

Using {{BrewerColorLegends}}:

The following template

{{BrewerColorLegends|Set1|4|
|--Not assigned to an alliance
| North Atlantic Treaty Organization (NATO)
| Union of South American Nations
| Council for Peace and Security
| Shanghai Cooperation Organization (SCO)}}

will show us what the legends will look like and show us the code to attach:

Not assigned to an alliance

North Atlantic Treaty Organization (NATO)

Union of South American Nations

Council for Peace and Security

Shanghai Cooperation Organization (SCO)

 {{legend|#b3b3b3|Not assigned to an alliance}}
 {{legend|#e41a1c|North Atlantic Treaty Organization (NATO)}}
 {{legend|#377eb8|Union of South American Nations}}
 {{legend|#4daf4a|Council for Peace and Security}}
 {{legend|#984ea3|Shanghai Cooperation Organization (SCO)}}

Finally, modifying the code:

[[File:Military_Alliances_BrewerColors.svg|270px|thumb|left|
 {{legend|#b3b3b3|Not assigned to an alliance}}
 {{legend|#e41a1c|North Atlantic Treaty Organization (NATO)}}
 {{legend|#377eb8|Union of South American Nations}}
 {{legend|#4daf4a|Council for Peace and Security}}
 {{legend|#984ea3|Shanghai Cooperation Organization (SCO)}}]]

the result will be:

Quantitative data

Suppose we want to make a map of the world on the Human Development Index, with 4 progressive categories: Low, Medium, High and Very high. With {{BrewerColors|Blues|4|a}}, you get: #eff3ffff #bdd7e7ff #6baed6ff #2171b5ff

With these colors we will paint the blank map:

Preparing the code from the legend of the map

Using {{BrewerColorLegends}}, the next template {{BrewerColorLegends|Blues|4|15em|Low|Middle|High|Very high}} will show us how the legends will remain and show us the code to attach. We have chosen a 15em column width unlike the previous one since the text of each element is very short:

Low

Middle

High

Very high

{{div col|colwidth=15em}}
 {{legend|#eff3ff|Low}}
 {{legend|#bdd7e7|Middle}}
 {{legend|#6baed6|High}}
 {{legend|#2171b5|Very high}}
{{div col end}}

Finally, once the code is copied to the image footer:

Accessibility for color-vision impairments

Accessibility guidelines for maps

The MOS:Accessibility guideline applies to all pages in the English Wikipedia, including maps contained in articles. That guideline includes MOS:COLOR, which aims to make WP accessible to readers with color-vision impairments. Applying MOS:COLOR to textual information or tables is relatively straightforward, but applying it to maps can be complex, due to need to balance accessibility with other cartographic design objectives.

Color issues in maps are encountered most commonly in the fill colors used for countries, states, etc. But it also applies to graphical overlay lines, as seen in transportation maps such as subway lines, or military battle maps, Which often use color to designate force movements and troop dispositions.

Resources

These resources that may be of help:

This academic paper gives excellent guidance on how to design maps to avoid accessibility issues.^[1]

This Talk page discussion discusses some of the difficulties in applying MOS:COLOR to maps

Wikipedia:Maps for Wikipedia (shortcut WP:MAPS) provides information on how to generate new maps

ColorBrewer online tool; see also Template:BrewerColorLegends, and Template:BrewerColors to create maps.

Tools to identify accessibility issues

Tools are available to evaluate maps and identify potential accessibility issues, such as:

Online tool to help identify color accessibility issues: : https://www.terrific.tools/color/color-blindness-simulator

Firefox browser: Firefox, hit Ctrl-Shift-I - the accessibility menu allows you to simulate various kinds of colour blindness as well as contrast loss. See https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/simulation/

Free software app to create new maps: QGIS

Mitigating accessibility issues

To resolve color issues in maps, some general tips are:

Rely on lightness shading of a single hue (white/pink/red), rather than multiple hues (red/blue/green). Generally, the ColorBrewer "Sequential" palettes are preferred over the other styles (see #Choose_the_color_palette above).
Supplement the color with textual labels.
To distinguish lines in graphic overlays: use line styles (dotted/dashed/solid/etc) rather than colors. If colors must be used, rely on lightness shading rather than multiple hues.
Avoid naming colors, especially in captions ("Red indicates the union army"); better is to use the legend template to graphically identify colors with a small color sample

Approaches to graphical overlays

Graphical overlays are lines and shapes drawn on top of a map, such as transit lines or battlefield movements. According to the Jenny and Kelso journal article (referenced above) here are some approaches to addressing accessibility issues:^[1]

Poor - Colors only, vary hue randomly
Okay - Colors only, vary hue in a way that supports accessibility
Okay - Colors only, single hue, vary lightness
Good - Colors and textual labels (colors: single hue, vary lightness)
Better - Colors and line patterns (colors: single hue, vary lightness; Line patterns: solid/dashed/dotted/dot-dash/etc)
Best - Colors and textual labels and line patterns (colors: single hue, vary lightness; Line patterns: solid/dashed/dotted/dot-dash/etc)

Examples

Graphical overlays that may not meet accessibility guidelines

Examples of maps that may not be compliant with MOS:COLOR, because the color schemes may not convey all the data to readers with color-vision impairments.