I need help picking a color for colorblind people

Question

thanks for taking the time to help me out :)

I am having trouble deciding which color to pick. A bright yellow or a bright purple. It has to go with the teal I used because it represents my school, which will be my primary color. I have googled/asked people and found conflicting answers.

[edit] I have revised the purple color to the purple based on feedback from Reddit from people who are colorblind. My goal isn't necessarily to have everyone be able to identify the yellow or purple. My goal is to provide the best contrast between the teal and yellow or purple. [/edit]

I have read anarticle and it gives a list of combinations to avoid.

• Green & Red

• Green & Brown

• Blue & Purple

• Green & Blue

• Light Green & Yellow

• Blue & Grey

• Green & Grey

• Green & Black

I highlighted two of those combinations because teal is kind of green and kind of blue, which disregards both yellow and purple.

Here are the links to the color combinations using Google's Material color helper.

• https://material.io/color/#!/?view.left=0&view.right=0&primary.color=009688&secondary.color=FFFF00

• https://material.io/color/#!/?view.left=0&view.right=0&primary.color=0c9a9a&secondary.color=8E24AA

Of course any suggestions with different colors are welcome too!

Answer 1

First, a question: Are you targeting a specific type of color blindness? There are in fact different types of color blindness, ranging from total to partial. You can use online services or Chrome apps to simulate the different types and get an idea of how they differ. I'm mentioning this because some types of colour blindness are relatively rare (e.g. tritanomaly affects only 0.01% of males and females) and feedback from Reddit users won't necessarily cover all scenarios.

And now, my answer: If you're not too familiar with the specifics of color contrast and accessibility, the safest way to proceed, in my opinion, is to start from the colour you cannot change (your school's teal) and then use ColorSafe to create accessible web color combinations. The advantage of Colorsafe over other contrast checker tools is a better UX, e.g. the ability to adjust the different variables (i.e. font size, font weight, WCAG standard, etc.) in real time.

In terms of the output, as their website explains:

Accessible text colors are generated with WCAG Guidelines recommend contrast ratio of 4.5 for small text or 3 for large text which is 24px or 18px bold.

This means that you will have confidence that the colors you choose follow international standards.

For example, if your teal is a #0c9a9a, purples like #600060, #591D77 and #591D77 are all WCAG 2 AA Compliant (provided you use a 24px / 400 weight text).

You can find further information on the WCAG 2.0 guidelines regarding color contrast by reading the paragraph "1.4.3 Contrast (Minimum) - Level AA" of the WCAG 2.0 guidelines.

Answer 2

I'll speak from my own experience with colour-blindness. The colour combinations you've given are in fact the combinations, that colour-blind people have difficulty distinguishing, i.e. if you place yellow text on light green background, those people won't see the text at all.

Have a look at this pseudo-isochromatic cards: http://colorvisiontesting.com/ishihara.htm - it gets tricky at e.g. 5th plate - colour-impaired people see different number than those with perfect colour vision.

Nevertheless, if you place a text in any colour on a contrasting background (especially dark text on white background, like burnt sienna on light ecru), the colour-blind won't have any problems reading it. They might have problems identifying the colours names.

So the problems with given colour combinations may exist if you design a complicated logo or put too much colours next to each other. And if it is not a secret, what is your project concerning?

Answer 3

Use an authoritative contrast checker tool

WebAIM provides an excellent tool for identifying the contrast between two colors. It will tell you if either or both of your two colors have adequate contrast with the background color. This tool compares the luminosity of the two colors, the most foolproof way to ensure text is readable.

It's not enough simply to avoid problematic color combinations. You should assume full color blindness (monochromacy) when selecting website colors. If you do, you ensure legibility for all forms of color blindness/color deficient vision. Or, as Penn State University explains:

Generally speaking, a color scheme is considered legible if it can be read in grayscale/black and white mode.

http://accessibility.psu.edu/legibility/contrast/

Answer 4

Stick with Facebooks's palette of blues and grays, if it works for Mark Zuckerberg's color blindness, it can work for you!