30

I need to choose a palette of four colors that satisfies the following two conditions:

  1. Colorblind people can easily distinguish all four of the colors.
  2. People with normal color vision can unambiguously identify each of my colors with one of the names "green", "blue", "yellow", and "red".

For context, I'm making a video game version of a board game that uses standard Icehouse pieces. The shape, size, position, and orientation of the pieces are all relevant to gameplay, so I can't use any of them as a substitute for color. Also, each of the colors are referred to by name in the rules, so using colors that are ambiguous or unrelated to the original colors would be confusing to people familiar with the original board game.

Given the above, what's my best option?

Improve this question
17
  • 4
    Do you want to address all different types of color blindness or just some of them? en.wikipedia.org/wiki/Color_blindness#Classification
    – locationunknown
    Jun 1, 2020 at 5:46
  • 3
    For red-green colorblindness: just make sure one of red and green is a lot darker than the other.
    – usernumber
    Jun 1, 2020 at 11:32
  • 1
    Taking all kinds of color blindness is impossible, because different kinds of color blindness see differently.
    – Mołot
    Jun 1, 2020 at 13:11
  • 12
    You might want to factor in that colourblind people may not even pay attention to colour coding. I noticed this myself when playing breath of the wild. I had to read an online guide to realise the shrines are colour coded blue and yellow. I could see the colours but I guess I'm not used to using colour coding.
    – Keith Loughnane
    Jun 1, 2020 at 13:34
  • 2
    Do you need a hue, or a color? One common approach is to simply use different values or saturations for the different colors, which is what systems like cubehelix take.
    – Cort Ammon
    Jun 1, 2020 at 17:55

7 Answers 7

Reset to default
28

Would patterns work for your use case?

You could keep the shape, size, position and orientation the same for each one and have a 'colour blindness mode' where instead of colours to distinguish the items you use patterns.

For example blue could be parallel lines, red could be a pattern of dots, yellow could be a cross-hatch and green could be zig-zagged lines or wavy lines.

By doing this you can account for all of the different types of colour blindness (including monochromacy - complete colour blindness) in a way that does not depend on the orientation or size of an element (the biggest problem with patterns if they rely on scale).

Update

As pointed out in a comment if your game aesthetic allows why not use colour and a pattern, avoiding the need for an additional setting.

Just make sure that the pattern and the background have a high enough contrast ratio, ideally 7:1 but 3:1 is sufficient for WCAG AAA as it is a Graphical Object / User Interface Component (non text contrast).

Improve this answer
6
  • 22
    You could avoid the "blindness mode" by using both. Pattern with color: blue wavy lines, red dots...
    – Azepic
    Jun 1, 2020 at 10:02
  • yup valid point! If that is appropriate for the game aesthetic then 100% agree.
    – GrahamTheDev
    Jun 1, 2020 at 10:04
  • edited my answer to reflect your point.
    – GrahamTheDev
    Jun 1, 2020 at 10:08
  • 10
    This is a very common way of doing it in many physical board/card games. As someone with relatively minor colour blindness, I find it very helpful. For example, these "Ticket to Ride" cards are primarily distinguished by colour but have a small symbol in the corner: blog-cdn.daysofwonder.com/dow-uploads/2013/02/t2r-cards.jpg
    – neil
    Jun 1, 2020 at 12:35
  • 2
    @neil I dunno, I tried to play Ticket to Ride with my parents, who have no color-blindness I’m aware of, but they had great difficulty distinguishing the cards in the somewhat-dim lighting we were playing in. The game was immensely frustrating for them, which is a shame because they both enjoyed playing boardgames as a family and I wanted to introduce them to some better ones than the Clue and Monopoly we used to play. The symbols are there but it took a lot longer to match those, especially with routes that were far from where they were sitting.
    – KRyan
    Jun 2, 2020 at 13:05
11

Consider the following "color-blind friendly palette" enter image description here

I think this palette has colors that can be easily interpreted to be green (4th), yellow (5th), blue(3rd or 6th) and red (7th).

Improve this answer
10
  • 6
    In particular, when I put that image through filters that simulate protanopia or deuteranopia, 4 seems awfully similar to 7.
    – Joseph Sible-Reinstate Monica
    Jun 1, 2020 at 18:39
  • 11
    As someone with a strong case of protanomaly, I can tell you that colors 4, 5, 6, and 7 are distinguishable for me, at this size and distance. 4/5/6 would be distinguishable at basically any size/distance, as would 5/6/7... but 4 and 7 would be hard to tell apart if they were very small (think like 16x16 pixels) and it's harder to tell the farther apart they are.
    – Ben P.
    Jun 1, 2020 at 18:46
  • 3
    It's also probably harder to tell apart quickly. If you're making a time-based color game, showing 4 and 7 on the same screen is probably going to add an unintended challenge.
    – Brian
    Jun 1, 2020 at 19:55
  • 2
    Hm. It's hard to say without actually trying that, but I'm guessing it would be hard.
    – Ben P.
    Jun 1, 2020 at 20:29
  • 8
    Note also that I struggle with naming colors, even as an adult. If you showed me this palette and asked me to name #6, I would probably tell you "purple".
    – Ben P.
    Jun 1, 2020 at 20:32
11

As a colourblind person - thank you. And may the inventors of the colors of LEDs(*) burn in hell for eternity. (since everyone is taking this comment too seriously, I am removing it and let everyone go to Valhalla whether they invented the LED or not :)

Having this off my chest, I would suggest to give your users a choice.

You will not cover all the types of colourblindness in one go (what I see as different colours may be the same for someone else, and vice-versa). On the other hand we can of course see a difference in colors, when we can.

In other words, you see

[color1] [color2] [color3]

I see 

[color1] [color2] [color2]

Someone colorblind will see 

[color1-ish] [color2] [color3-ish]

as different "colors" (maybe not the ones you see - but different).

So you may have several palettes of 

[green] [blue] [yellow] [red]

and let the user choose the one where all fields are different to them.

(*) the small round lamps which indicate the status on electronic devices - each of them can have several colors (which I do not discriminate)

Improve this answer
11
  • 8
    @Beejamin: yes the colors of LEDs (the round lamps which indicate the status) on electronic devices. I never know when they are red, orange or green because the colors are very close to me. I once flashed a router FIVE TIMES because it was failing every time. Then my brother walked by, asked me what I was doing and he told me that the led is actually green... OTOH when I was a kid, a doctor told my father that I would never be an engineer and work in science. Dr Stupid, if you hear me, stop telling this to children because some will listen to your nonsense. Signed: engineer and PhD in physics
    – WoJ
    Jun 2, 2020 at 12:33
  • @Beejamin: aaaah, I made a typo, I meant OF LEDs of course. Updating that. Also the doctor from the previous comment told this because of colorblindness (as a deterrent to working in science)
    – WoJ
    Jun 2, 2020 at 12:33
  • 7
    The colors of LEDs (at least older ones) were a technical limitation, rather than a design decision. Red, yellow/amber, and green were originally the only colors they could produce. Blue and white came later, making full-color LED displays possible. (Interestingly, you can use this fact to date scifi - e.g. in Star Trek TNG, any time they open up Data's head to show his positronic net, it has a bunch of blinking LEDs, all red, yellow, and green, because those were the only colors available at the time.)
    – Darrel Hoffman
    Jun 2, 2020 at 16:45
  • 4
    @WoJ The colors of LEDs have nothing to do with it. As you said yourself, the problem isn't the color, it's that electronic devices that use the LEDs don't always rely on position. And as Darrel Hoffman pointed out, the colors of LEDs themselves weren't chosen for their color. Blaming the LED inventors is like blaming neon light inventors for the specific colors of neon lights.
    – MiniRagnarok
    Jun 2, 2020 at 18:55
  • 3
    @WoJ So you would like to see all the designers who chose to merge different signals in one LED indicator (charger: green - fully charged, green blinking - almost there, amber - 2/3, amber blinking - 1/3, red - empty) in hell rather the ones who invent the actual LED.
    – Crowley
    Jun 2, 2020 at 22:51
6

While it is commendable to be considering this factor, you also have to think about the bigger picture here. That is, you are trying to make a game that you want as many people as possible to be interested in playing.

As you have said yourself the four colours you have listed are already an established set that your target audience is not only going to be familiar with, but probably fairly expecting that they are the same.

With that said, stick with the original 4 colours as default.

Now, if you are wanting to put in the extra effort to support colour blindness, which you appear to want, then don't cut any corners and do it the right way. Make it a user option to be able to select a colour palette. Either have a few different preset options for the different types of colour blindness, or go over the top and let the user select their own 4 colours.

Using patterns probably isn't going to look aesthetically pleasing to the majority of your users, so don't shoot yourself in the foot by putting off the many, just the please the few.

So that leaves the question: what about the rules not matching up?

Well if the rules are physically printed and/or in a single non-dynamic electronic document then there isn't much you can do. Which is all the more reason to stick with the original colours as default.

However, if you the rules are built in to your game UI, then it shouldn't be too much effort to make the instance of "colour name" variable: in both visual colour and display name. Basically, if the user has selected a different palette, then reflect that selection everywhere that the colour is referenced in the UI.

In short, these kind of scenarios should always be optional. Don't put your application at a disadvantage by forcing the same usability rules on all users.

Improve this answer
5

In science/data science, the viridis color palattes have become pretty popular over the last few years for creating colorblind friendly figures. It's targeted for R programmers, but here's a link to a really good article on the topic: The Viridis Color Palettes

No palette will suite every form of colorblindness, but these provide a handful that are meant to be relatively aesthetically pleasing while still accommodating the 2 or 3 most common forms of color blindness. When creating figures where I need 2-4 discrete colors, I pick colors equidistant along the color scales. More than that, and I start considering incorporating other things like shapes to help distinguish things. To make things a little easier (and for posterity), I'm attaching a modified version of the image showing their color palettes; the circled/numbered regions show roughly where you would pick your colors from: enter image description here

So, for example, with the "inferno" one, non-colorblind users might interpret the colors as "yellow", "orange", "purple", and "black".

And depending on the other aspects of what's being drawn, sometimes I find I can't have the colors too light or too dark, in which case I just crop one end or the other of the color palette slightly, and then take my colors from equidistant points along that, but again, you have to be careful, because if the points along the palette are too close, they start to become hard to distinguish as discrete colors.

And as mentioned before, consider having a setting for choosing palettes. This gives you the most flexibility to make sure everyone finds the game aesthetically pleasing.

Edit: Going back and rereading the question, I realize now I missed that OP probably meant they wanted to specifically retain those 4 colors and just find variants that are colorblind friendly

Improve this answer
1

These 4 very basic colors are rather distinguishable for most color-blind people. It is the half-tones and nuances that most color-blind people fail to distinguish.

(if you think about the RGB color model, most common types of color-blindness are either cross-talk between R and G signal, or rare types that are missing R, G and/or B signal)

If you need to add options in order to widen the audience, it is the yellow (that is R+G) that you can change to purple (R+B) or cyan (G+B) in order not to crowd the R to G band.

Improve this answer
4
  • I can't change yellow to purple or cyan without breaking my other requirement.
    – Joseph Sible-Reinstate Monica
    Jun 1, 2020 at 17:43
  • Then again, the yellow is the usual offender in the color-blindness. It simply tends towards red or green. Changing it to something completely different, you can still keep the names of the other 3. It is less than nothing and you may (or may not) adapt other things.
    – fraxinus
    Jun 1, 2020 at 17:50
  • 4
    I would disagree strongly that you can guarantee that "red" and "green" are distinguishable by all users, particularly red-green colorblindness. Certainly some shades of red are always seen as red to me, and tge same for green. Nevertheless there's a decent sized band of colors where I can't be sure which one they are, or even if there's any color at all in the swatch. Pale green is gray to me. Most green traffic lights, to this day, look white to me.
    – Ross Presser
    Jun 1, 2020 at 23:50
  • @RossPresser I don't quarantee anything. There is a lot of variants of color blindness and almost all of them may be weaker or stronger. I just say that if one is at all able to distinguish between "pure" (as in rgb model) red and green, yellow (a mix of red and green in the same rgb model) may be harder to tell apart from red and/or green. The OP said that the game uses transparent colored blocks, so no intensity/saturation differences can be used, only hues.
    – fraxinus
    Jun 2, 2020 at 6:45
1

@musefan has the best answer!

The patterns idea sounds good, but looking at the game and knowing how it works, it will make things more complex.

Use the original colours so players recognise them, but have a prompt when the game is first used giving the option for different colour palettes. Set up colour palette alternatives using a plugin like Sim Daltonism or similar to help and leave it to the user to decide.

Then at some point you can see which palettes users are using the most.

Improve this answer

Your Answer

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

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