25

I have a case where a strong pink has already a reserved meaning ("missing data"), so red/purple/pink should not be used at all.

Additionally, colours should really distinct as it will be used on smartphone, including under a glaring sun.

And colours represent road quality on the map: with 5 distinct classes ( https://wiki.openstreetmap.org/wiki/Key:tracktype if anyone is interested in detail :) )

This is quite tricky to get working at all, but I also want to get it to be colourblind friendly.

How can I get such colour palette? Is there some standard solution or should I be simply trying various colours (I did it with another trickier case where abstract colour scale was poorly fitting)

I found already for example https://ux.stackexchange.com/a/133303/112863 (which does not work at all to show relationship between values as it was not at all intended for that) and https://ux.stackexchange.com/a/133319/112863 which conflicts with reserved colour

Current solution, of why I need to ban red/purple (bottom one is for "missing data")

enter image description here

Current solution, or why I definitely need to change this, even before taking colour-blindness into account. grade3 teal colour looks like a better than grade2 green

enter image description here

If there is some obvious standard solution that I would be happy to know about it rather than reinvent the wheel :)

10
  • 7
    Why use color coding at all? Your link to wiki.openstreetmap.org suggests there is already standard rendering using frequency coding. Why not use that? Aug 8, 2022 at 13:16
  • Does this answer your question? Visualisation of the state of roads on a map
    – Danielillo
    Aug 8, 2022 at 13:35
  • Not only red, you need to avoid blue and green as well since those are colors many people with color blindness won't see. It basically leaves you with yellows and browns, and yellow will blend with the green background. So I think what Slugolicious told you about using patterns rather than colors is the only way to do it
    – Devin
    Aug 8, 2022 at 14:05
  • @MichaelZuschlag I have not tried dash patterns or similar. Mostly for practical reasons: (1) it is rendered on top of usual map, so dashes would not fully work as road, as rendered on map below would be still visible (2) fully separate map design is possible but would be quite complicated to implement AND likely quite confusing AND increase maintenance cost. If not feasible with colour scheme, then alternative is to use poor colour scheme or throw away this feature entirely maybe I should try that again Aug 8, 2022 at 14:17
  • 1
    It is very common that a design gets implemented with accessibility as an afterthought. Trying to fix it is often just patchwork and will lead to other problems like a snowball effect. This question is a perfect example of it. The only way to solve this is to take a step back, figure out a better way to overcome the problem and work from there. Instead of forcing to move forward and only fix the color scheme. Therefore it is a good idea to consider other suggestions given here.
    – jazZRo
    Aug 10, 2022 at 9:19

5 Answers 5

36

It's not that complicated to create a custom color scheme, you have enough information to do it easily:

  • Five colors
  • Avoid warm colors close to red
  • Colorblind friendly
  • High contrast

And a fact that doesn't appear in the question but conditions the answer:

  • Must be on a colored background where green and beige are the main.

Starting from the visual spectrum (hue contrast) and sending each color to black and white (brightness contrast), we eliminate the areas to avoid:

basic scheme

The resulting schema is:

result

The color background overrides similar colors and columns close to white:

Background color

The scheme is reduced to these colors, where the left column, due to its low contrast, is translated to black:

result

The highest percentage of color blindness by type is deuteranopia, secondly, protanopia, which is very similar, and the rarest and most different case is tritanopia. Seeing only the most common:

deuteranopie

The result, seven well-contrasted colors plus black and white:

end

6
  • 2
    How you generated this initial colour list and later colour blindness simulations? Aug 8, 2022 at 16:02
  • 2
    Any vector app like Inkscape does it and there are many online color blindness simulators
    – Danielillo
    Aug 8, 2022 at 16:13
  • 10
    I love the process, but I'm not convinced by the green - in the deuteranopia simulation, it looks very similar to, and slightly darker than, the light red (second colour from top).
    – IMSoP
    Aug 9, 2022 at 13:29
  • 7
    It is perhaps pedantic, but I think worth noting that, while deuteranopia (red-green) is by far the most common form of color blindness, it is not the only form of color blindness. Aug 9, 2022 at 18:15
  • I think what appears in the final image, a palette going from ochre to blue, is quite good solution. :-) (But should be tested on target background.)
    – Pablo H
    Aug 10, 2022 at 13:04
14

I really suggest to go with a pattern, as most maps do. Here's the take of the Swiss federal mapping agency:

enter image description here

Taken from their complete signs document:

https://www.swisstopo.admin.ch/content/swisstopo-internet/en/online/maps-online/swisstopo-app/content/_jcr_content/contentPar/downloadlist/downloadItems/207_1645088578518.download/symbols_en.pdf

4
  • Bonus points for using a "standard".
    – Pablo H
    Aug 10, 2022 at 13:05
  • 1
    @PabloH This is by no means a standard, not even as in quotes. It's just what this specific agency has come up over the years. As swiss citizen I am accustomed to it and I can tell that it's really helpful the way it is. But that's all.
    – Marcel
    Aug 10, 2022 at 15:32
  • not sure if i could tell the difference between 10, 8, 6 meter roads to be honest unless next to each other Aug 12, 2022 at 12:45
  • @htmlcoderexe Right, but that's probably by design, as most of the time it does not matter, because they are similar in their use case anyway. All are intended for cars, and allow oncoming traffic, for usual cars.
    – Marcel
    Aug 12, 2022 at 15:20
10

Two things to consider:

  1. color contrast
  2. patterns

First, for color contrast, when colors are adjacent to each other, even if the person can't distinguish the actual colors, if there's enough luminoscity difference between them, they'll be able to tell that it's two different colors.

This is the concept behind two of the Web Content Accessibility Guidelines (WCAG):

  1. 1.4.3 Contrast (Minimum)
  2. 1.4.11 Non-text Contrast

And second, if you allow the user to have patterns instead of colors, then the actual color won't matter. For lines (streets), you can have dashed, dotted, a series of x's, etc. For park areas or other areas, various crosshatch patterns, horizontal lines, vertical lines, field of stars, etc.

4
  • that last paragraph seems like the perfect solution for the problem
    – Devin
    Aug 8, 2022 at 14:02
  • > First, for color contrast, when colors are adjacent to each other, even if the person can't distinguish the actual colors, if there's enough luminoscity difference between them, they'll be able to tell that it's two different colors. The problem is that it is a map. So even if only one of 5 (6 with unknown) colours is present is available, then it should be recognizable. And gaps between them are entirely fine anyway, and I prefer higher standard than "able to tell that it's two different colours" which is achieved (at least for noncolourblind people) Aug 8, 2022 at 14:20
  • "For lines (streets), you can have dashed, dotted, a series of x's, etc." I guess I should retry achieving this, though it may not be possible for technical reasons. Aug 8, 2022 at 14:21
  • 4
    "I prefer higher standard". I used WCAG as the standard which is about as high as you can get. A user will be able to distinguish the colors if you follow the luminoscity guidelines. Aug 8, 2022 at 20:16
6

There is no standard solution, but there are some guidelines. The rest is, frankly, art.

So you require six colors that:

  1. Represent a scale from low to high. This implies the colors should fit on some sort of single dimension themselves. It could be a scale of lightness, saturation, or hue (color spectrum), or a combination of these. Generally, a hue scale only works well if it uses part of the spectrum, not the full red-to-purple range (despite their popularity in weather maps).

  2. Are distinct in bright sunlight. This implies you use highest saturations you can to minimize “wash-out,” and you pick colors from all across the spectrum to maximize their color difference. To numerically compare the distinctiveness of your candidate colors, covert RGB values to Luv and calculate their Euclidian distance.

  3. Work well with users with color deficiencies. This implies you include lightness coding at least in combination with some other dimension. However, with five colors that can’t be all you use since users will have trouble identifying (in isolation on your map) more than three or four different levels of gray. When including hue, it’s better to distinguish colors with blues and yellows than greens and reds since red-green color vision deficiency is far more common than blue-yellow.

  4. Avoid reds and purples. And blues too In addition to using red and purple for other codes, you appear to be using blue for rivers, so blue shades are out. Well, there goes half the spectrum.

  5. Be consistent with user expectations and associations. That is, the colors should be consistent with their meanings. In your case, coding the quality of tracks, we need each successive color to suggest a less robust, softer, poorer quality, and more natural (i.e., not modified by humans) surface given your map backgrounds.

Normally, you’d also be concerned with maintaining a minimal light-dark contrast with all possible backgrounds. Fortunately, it looks like you outline the tracks with thin dark lines so you get good contrast almost regardless of the track color and background.

Nonetheless, you see you’re under some pretty strict requirements that are somewhat mutually exclusive. Trying to balance them all the best you can is the art part. Here’s one way to do it:

Starting with Requirement #1 and #3, lets go from dark to light through the grades. Given you’ve light backgrounds, darker tracks will contrast better and thus appear more robust, so let’s make Grade 1 darkest and Grade 5 lightest, thus fitting with Requirement #5. Using our full range of brightness you have L-values (in Luv color space, not HSL) of 0, 25, 50, 75, and 100. That makes Grade 1 black (0 0 0) and Grade 5 white (255 255 255), so two colors down, three to go.

Now for hues. For Requirement #2, we’ll work our way around the color wheel, picking three colors as far apart radially as we can. However, we’ll only use the Brown/Orange - Yellow/Olive - Green portion of the color wheel since Blue-Purple-Red is out due to Requirement #4. For Requirement #5, I’ll guess that brown (suggesting gravel or dirt) will be associated with higher quality tracks than green (suggesting a grassy or traceless track), so let’s try brown – olive – light green for Grades 2 through 3.

For the exact colors, we’ll max out the saturation for Requirement #2. To give an added boost for Requirement #3, we’ll make the “green” slightly bluish green. We’ll test them in a color-deficiency simulator to see how they do.

Here’s what I came up with as a starting point for you:

Grade 1: 0 0 0

Grade 2: 98 49 0

Grade 3: 105 127 0

Grade 4: 0 210 140

Grade 5: 255 255 255

Which look like this:

enter image description here

Brightness and color distances (about 25 and about 60 respectively in Luv space between adjacent pairs), aren’t great, but about as best as you can do with 5 colors and only half the color wheel.

Putting it though a color vision deficiency simulator shows it’s not a bad start, but could use some tweaking.

Simulated Protanopia Simulated Deuteranopia Simulated Tritanopia Simulated Monochromacy

You probably can do somewhat better by calculating the exact magenta and blue (and red?) Luv's you plan to use, and getting the 5 colors far from them specifically around the color wheel (at least 50, and ideally closer to 100), rather than banning the entire half of the spectrum.

For more on using color codes, see my Breaking the Color Code post, which also includes details on computing Luv values from RGB.

You stated in your comments that color-coding is your only option. For the benefit of other readers, this example should make it clear how hard it is to get good color codes. Ideally, you’d use some other graphic code for this. Your link to Track Types includes standard symbology using frequency coding (which you can’t use, but others could). Weight coding (line thickness) would also be an obvious candidate, maybe combined with frequency coding. Either or both would make coding that better fits all your requirements.

0

Have you tried ColorBrewer? It is a tool to select/construct palettes for several purposes, with several possible constraints.

Here is an example 5-colour (allegedly)-colourblind-safe palette:

An example colour palette

2
  • 2
    I expect the top 2 would conflict with the background, and the second from the bottom would conflict with rivers.
    – Drake P
    Aug 10, 2022 at 14:26
  • @DrakeP Fair point. It's just an example of using the tool cited. It might work when combined with some style/pattern for the lines (roads). In OP's context probably any colour-only solution will come up short.
    – Pablo H
    Aug 10, 2022 at 17:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.