
How? Building maps for Vision Deficiency
A personal approach to making maps

I've been a cartographer and map designer for over 50 years, but it is only recently that I have started to consider accessibility as part of my decision making. Along with many others in the Mapping Industry, I am still trying to work all of this out and - an admission - not all of the maps I build, even now, are accessible! I try to do what I can, but it's a learning process for me as well.
Accessibility and Maps
A map is a subtle thing! More than just about any other graphic, a map requires a clear and consistent design across a large set of variables. It’s taken years of experience for those of us that build the complex reference maps that have been a large part of my working life to figure out what works.
Add in a requirement for Accessibility, and suddenly it gets a whole lot more complicated. For many years we used the excuse that a map was far too sophisticated to take that into account. To some extent that is still true, but, with the growing realization of how important it is, and the introduction of standards such as the Web Content Accessibility Guidelines (WCAG) , it needs to be addressed. These are my thoughts on this:
Note that I am talking about the visual aspects of using a map only. Much good work is being done in figuring out non-visual ways of accessing map information, but that is not where my skills lie.
The Standards
WCAG focuses on the accessibility of web pages, and in a visual context that means primarily the clarity of text against background. Map-specific issues are not addressed, but the key points to be aware of are:
- Color palettes should work for users with varying color vision deficiencies (color blindness)
- A contrast ratio of 4.5 to 1 is the target for a foreground against a background. This gives individuals with reduced vision more opportunity to interpret the map’s contents.
A contrast ratio of 4.5 for black/white text against a gray background
So how do we translate that into something that works for maps? More importantly, how do we build a map that can can reach a larger audience and work towards an ‘accessible’ solution?
The Tools
‘Colorblind Friendly’ Color Ramps
Many (unfortunately not all) of the color ramps available in ArcGIS Pro and ArcGIS Online are designed to be ‘colorblind friendly’. They are a good starting point.
Graphics Application
Whether you are building a map in ArcGIS Pro, ArcGIS Online, or some other software, it is good to have a graphics application open to play around with color and contrast. The opportunity to build a color gradient is a bonus. Graphics software like Adobe Illustrator is great. Otherwise, there are online resources available. As long as you are able to build colors in whatever mode you are working in (RGB/HSV/Hex/CMYK) you’ll be OK.
Color Vision Simulator
ArcGIS Pro has one built in (under ‘View’).
Online there are a number available. I've used two over the years. Color Oracle switches your whole display to a simulation of the three most common forms of deficiency, plus grayscale. Color Simulations (Windows only) is more sophisticated and allows you to examine part of the display rather than the whole thing. It does not consider Tritanopia however.
Color contrast ratio tool
Plenty are available online. I use this one .
Enhanced Contrast Basemaps
Esri’s Enhanced Contrast Basemaps were built with accessibility in mind (referring to WCAG’s success criterion), and to consider the map’s visual aspects as part of an intention to support more users. They are a possible starting point for your map. In themselves they don’t make your map accessible though. It’s going to depend on how you set up your information on top of them, and that may require additional effort.
This blog talks about that in some detail.
Enhanced Contrast and Enhanced Contrast Dark basemaps
Ultimately you may find that these basemaps are too busy and too strong for what you want to show, so approach them with some objectivity.
Color Vision Deficiency
In broad terms it is easy to apply this standard, but at the same time it can be infuriating. It puts limits on the color combinations that are available for building-in the subtleties that we are used to, and at first these seem to be stringent. But because it can be done, there is no excuse. None of us like to have our toys (in this case the full color palette) taken away from us but learn to live with it!
I started building color ramps for ArcGIS Online around 10 years ago, then started to accommodate color vision issues soon after. Early on it was difficult and time-consuming, but eventually I got used to it, and now I don’t think about it too much – it’s just part of my process. Over time, you will learn the color combinations that need to be avoided, and it becomes more automatic.
The Problem
Let’s assume you have perfect color vision (I do, although other aspects of my vision are beginning to reflect my age...). You should be aware that around 8% of the world’s population have some sort of color deficiency, so that is 8% of your potential audience. Most individuals with color vision deficiencies are not able to differentiate between red and green, and a smaller percentage of individuals cannot differentiate color at all.
This blog explores red-green color vision deficiencies in more detail.
The Process
You may get a good result starting with the color ramps available in ArcGIS Pro and ArcGIS Online. Most of the color ramps available are built to compensate for color vision deficiency, but don't take that for granted (ArcGIS Online identifies those that are ‘colorblind friendly’). Regardless, more work will be required.
If these don’t help, you may have to generate a new map palette:
Nothing magic here, but it can be tedious, and it's probably worth doing some of the work before you put the colors into the map. Create samples of the colors you want to compare, open them into a color vision simulator, then check them out. Once you are confident with the result, add them to your map symbols and check them in the simulator again. Sometimes, what looks good in your palette does not work as well when applied to the map
At the very least, make sure that you have enough separation for Deuteranopia (green deficiency), which is the most common form of color blindness. You should also check for Protanopia (red deficiency) and Tritanopia (blue deficiency) if you can.
Earthtones come in and out of fashion, but they are a particular challenge for color vision. Contrast can play as big a part in making them accessible as color value
Finally, you should check a grayscale view of the map. Good grayscale separation will make the map functional for those people that can’t see color at all (although it doesn't help with a divergent quantitative palette or ramp), and it gives you some insurance if you can’t satisfy the requirements of everything else.
Other Vision Problems
No two people are alike in this respect, and there are many potential issues with reading (in print or on screen) that the complexities of a map only exacerbate.
Visually, there is a limit to what you can do! There comes a point where you really cannot accommodate every issue, but there are some steps you can take to improve the experience for visually challenged users:
Increase Contrast
WCAG standards, in talking about web pages, call for a contrast ratio of 4.5:1 between labels and their background. By implication, the same should be true for other map symbols, but on anything but the simplest of maps this is not achievable.
A map functions best when there is an identifiable hierarchy between features. An Esri basemap, for example, has around 45 different categories (depending on how you define ‘different’). It is not possible to retain a 4.5:1 ratio between all symbols in this circumstance.
One thing that helps, at least as far as labeling is concerned, is to use label 'haloes'. I'm not a big fan of haloes ( see this blog ), but it does offer a solution for at least part of the map content. For WCAG compliance it seems to be acceptable to measure the contrast between the label and a 'halo' rather than the rest of the map symbolization.
Here is an example:
Imagery is a popular base for maps, but it presents unique problems. One of these is contrast. The background shifts from very light to very dark, sometimes within the length of one label. How do we handle that?
A simple black label is lost in this background, and is nowhere near that 4.5 ratio. A white label is better here, but it gets lost in some of the detail. It may get lost completely in larger light areas:
By sampling the dark green and adjusting it I can reach that ratio and apply it to a halo. The same halo helps to reinforce the white label. That means that it fulfils WCAG’s success criterion 1.4.3: Contrast Minimum .
I can get an even better result with white or black and a 50% transparency/opacity (it will be effective whatever the background):
I can improve clarity even more by lightening the imagery a bit (around 20%), then optimizing the haloes. I'm beginning to push the envelope a bit though, so I've had to use different halo colors for light and dark labels.
If I'm still not happy with the result, I can try using a bolder font:
Are we done?
So it should be possible to create a map that is in alignment with WCAG’s success criteria. That doesn't necessarily make it an 'accessible' map! Beyond compliance, you need to do what you can to open the symbolization up to everyone, and here are some more techniques you can try:
Be ruthless!
If your map is thematic, take a hard look at the content. With each symbol you include, ask yourself if it is essential to your subject. If not, and if it presents problems*, then remove it.
*In my discussion of planning I say that there is nothing wrong with including content for decorative purposes. This may sound like a contradiction, but the rule still applies: '...if it doesn’t compromise legibility or move the focus from the subject of the map'. Include the effects on accessibility in this calculation.
Group your symbols
Group symbols where you can. For example, do you really need those 6 colors of road to support your subject? If it's not vital to the understanding of the map, combine them into one color.
Mid-Tone Basemap, with the road categories set in a single color. This wasn't done just for accessibility, but you can factor it into your choice of basemap if it helps.
Add more distinctiveness if necessary...
Separating some symbols can be tricky. Polygon fills, for example, particularly if you are trying to use contrast and safe color to separate them, can very quickly use up the available palette.
If that is the case, consider adding patterns to some polygon fills. They don’t have to be (nor should they be) overwhelming – you can use them to reinforce a color or tint, and that may allow you to consider using colors that are closer together.
The Enhanced Contrast Basemap includes fine patterns on some of the fills to provide an additional signal.
... but don't overanalyze
Identify symbols that are distinct in ways other than contrast or color. If they are distinct, don't worry about trying to isolate them in other ways.
For example, the point symbols below are well-understood. As long as they can be picked-out easily from other map information there is no need to use color or contrast to further differentiate them. You can still use some color variation if you think it makes the map more interesting, but not in a way that detracts from the effectiveness of the symbol itself. It’s not critical to the functioning of the map, so don't make it so.
Standard and intuitive point symbols in a combined black/white circle that will be distinctive on any background. Adding color may make the map more interesting for the majority of users, but it's done in a way that doesn't change the impact of the symbol.
Beyond the Basics
We've established that creating a map that is 'accessible' is a bit of a moving target. Is there anything else we can consider?
Online Maps
Consider moving as much information as possible into pop ups. This is good practice anyway for online mapping. Here it gives you the opportunity to provide sufficient color contrast between the popup’s foreground text and background color without further customization of the map itself.
Two-Tier Maps
Can a map operate on two levels?
- First, identify the map symbols that are essential to the story of the map. Do what you can to increase the contrast between them, and against the map background...
- Then look at other symbols that help to provide a context but are not critical to the story,(basemap content for example). Retain this, but keep it subdued and part of the background. Make sure it does not conflict with the critical content but leave it there for users that are not visually challenged.
Example: Mangrove Forests
The dark green/dark areas on this map are mangrove forests. The basemap is the Light Gray Canvas, but water, parks, boundaries and larger cities have been adjusted so that they become part of the subject of the map:
Although they are not a key part of the story, the other basemap features are retained. They remain very much in the background:
Visually deficient users should be able to track the important aspects of the story. Other users will be able to see the background information to provide extra context.
Here is a link to the online version :
But I'm wrecking my map!
Taking this a step further, what happens when, in trying to accommodate these diverse groups of users, you feel you are compromising the message of the map for the majority?
Well, you should at least try to figure out a solution to this. It’s a situation you may have to come to terms with and defend.
So, it’s not easy, it can be frustrating, and (at least at first) it can be time-consuming. But stick with it! If you can learn how to build an effective accessible map, there is a percentage of your audience that will thank you for it.
This is the third of a series of 'How to' Story Maps looking at the ways I develop my work. The other sections are:
Andy Skinner, 2024