Best color-blind friendly palettes (e.g. in Venn-diagram)

Question

There are some color-blind friendly palettes online. Nowadays, I think it is important that color-blind people can also read articles. However, for the Venn diagram, I have not found a suitable color palette for color blinds (either a 3 or 4 circle graph). Do you know any good color palettes that are color blind friendly?

Answer 1

This is just a helping hand and not an acceptable answer. But instead of trying to fit all the links in some comments, I preferred to post it as an "answer post", because it simply wouldn't fit. I am not an expert on this, but this question was so interesting that I tried to search and I came up with the information that follows below.

When I did read your question, immediately the first thing that came to my mind were the Web Content Accessibility Guidelines (WCAG). If you don't already know it, it includes guides and checklists towards creating an accessible web application (including preparing your app for users with color blindness disability). Those rules though are not limited to "web-only" applications.

These are some resources to read:

1. WebAIM's Designing for Color-blindness.
2. WCAG's Use of Color success criterion and some important related resources.
3. Color Universal Design paper (archieved?).

You can obviously navigate those entire domain names instead of just the sections of those links in the above list.

My first observation is that they all state that instead of only colors, you can/should also use different text and also shapes for each distinct element, but most importantly the colors you use should have a high contrast ratio from the others.

Sadly, I didn't find anything about overlapping elements (such as the circles in a Venn-diagram), but I probably didn't spend enough time searching. I also did not find any kind of list of colors for color blind people, but I found that there exist some color contrast checkers such as this one which is really easy to use and includes (for each color combination you choose) a fail/pass message according to WCAG, so I guess you can play around with it until you meet the requirement (ie 3 or 4 different colors, as you requested, but with sufficient contrast ratio with each other and with the background).

Since the problem size is so small (ie only 3 or 4 colors) I think you might be able to achieve it, but for big number of colors you should probably rely on text and shapes to achieve distinction between the elements.

Finally, if everything fails, you may also consider designing your app differently, such as plotting your data in a different diagram (such as Carroll diagram, which basically seems to me like a 4x4 table for your case, or even a Chord diagram where a size of 4 would be distinguishable in my opinion), or even not using a diagram at all (for example a text only representation).