Colour Contrast Chart for Colour Blindness

May 28, 2007 · Filed under Accessibility, Colour, Experiments

The chart below documents different colour combinations and how they are simulated with different types of colour blindness. Feel free to suggest colour combinations, I will keep adding more as I think of them.

*** Last Updated: June 03, 2007

Two Colour - High Contrast
Hex # Original Protanopia Dueteranopia Tritanopia Grayscale
Black:
#000000
Red:
#ff0000		 Black and Red: Original image Black and Red: Protanopia simulation Black and Red: Dueteranopia simulation Black and Red: Tritanopia simulation Black and Red: Grayscale simulation
Blue:
#000099
Red:
#ff0000		 Blue and Red: Original image Blue and Red: Protanopia simulation Blue and Red: Dueteranopia simulation Blue and Red: Tritanopia simulation Blue and Red: Grayscale simulation
Black:
#00cc00
Orange:
#ed561b		 Black and Orange: Original image Black and Orange: Protanopia simulation Black and Orange: Dueteranopia simulation Black and Orange: Tritanopia simulation Black and Orange: Grayscale simulation
Blue:
#000099
Orange:
#ed561b		 Blue and Orange: Original image Blue and Orange: Protanopia simulation Blue and Orange: Dueteranopia simulation Blue and Orange: Tritanopia simulation Blue and Orange: Grayscale simulation
Green:
#00cc00
Blue:
#000099		 Green and Blue: Original image Green and Blue: Protanopia simulation Green and Blue: Dueteranopia simulation Green and Blue: Tritanopia simulation Green and Blue: Grayscale simulation
Two Colour - Medium Contrast
Hex # Original Protanopia Dueteranopia Tritanopia Grayscale
Black:
#000000
Yellow:
#ffff00		 Black and Yellow: Original image Black and Yellow: Protanopia simulation Black and Yellow: Dueteranopia simulation Black and Yellow: Tritanopia simulation Black and Yellow: Grayscale simulation
Black:
#000000
Green:
#00cc00		 Black and Green: Original image Black and Green: Protanopia simulation Black and Green: Dueteranopia simulation Black and Green: Tritanopia simulation Black and Yellow: Grayscale simulation
Two Colour - Low Contrast
Hex # Original Protanopia Dueteranopia Tritanopia Grayscale
Green:
#00cc00
Yellow:
#ffff00		 Green and Yellow: Original image Green and Yellow: Protanopia simulation Green and Yellow: Dueteranopia simulation Green and Yellow: Tritanopia simulation Green and Yellow: Grayscale simulation
Green:
#00cc00
Red:
#ff0000		 Green and Red: Original image Green and Red: Protanopia simulation Green and Red: Dueteranopia simulation Green and Red: Tritanopia simulation Green and Red: Grayscale simulation
Pages related to this page, or using this information:
Colour Blindness and Graphs

If you spot any errors in this data, or can suggest anything to test that I have not included in the above tables, please add a comment below.

Comments

Lachlan Hardy says: May 29, 2007 @ 11:35 am

This is an awesome idea, Scott. And it’s going to be a brilliant reference. Why the hell doesn’t this exist already?

We’ve obviously been slacking off. Way to turn it up a notch!

Daniel says: June 2, 2007 @ 7:30 am

Cool idea Scott. Out of my red-blind perspective I would say: Don’t take the red-black combination, because red looks darker for red-blind people and is coming closer to black as you might think. And the low contrast (yellow-green) is definitely a bad choice. You need to have some high contrasts. Colorblind people tend to differentiate colors more on brightness (and maybe saturation) than on hue.
Maybe you can also take into account the confusion lines of the different types of color blindness. They can give you some hints on which color are bad choices and which are better.

How to Color Charts Respecting Color Blindness » Color Blindness viewed through Colorblind Eyes » Colblindor says: June 2, 2007 @ 11:06 pm

[...] Scott from Standardzilla tries to go a more elaborate way. He is looking for good color combinations and analyzes the color contrast as well as the simulations of different color vision deficiencies. Introducing his thoughs with Color Blindness and Graphs and analyzing it at Colour Contrast Chart for Colour Blindness. [...]

Daniel says: June 2, 2007 @ 11:13 pm

Scott, this are nice samples. As a red-blind fellow I tell you: Black-Red and Green-Yellow are both bad choices. Red looks darker to a red-blind and therefore comes closer to black. You have to lighten it up. And green yellow just often looks so similar, unless you stick with a dark-green hue.

Standardzilla says: June 3, 2007 @ 7:44 pm

@Daniel - thanks for input. I am thinking this is not accurate so far so I am going to have to think about another way of approaching this problem.

Issues right now are:
- am I covering all major colour blindnesses?
- is the simulation accurate enough for me to judge alone?
- is there another way to test this

I will have a bit of a think about this

Daniel says: June 3, 2007 @ 10:12 pm

Scott - I’ll try to answer your question from my point of view:
- yes, you’re covering all of them. That’s fine.
- if the simulation is accurate enough is hard to tell. I can only say what I see: Protanopia (which I suffer from) and Original look pretty the same to me.
- the best way definitely would be to have some people involved in it who can judge it by their eyesight. But the tool you are using is definitely a good start.

An other point which comes to my mind is, if you are showing this the wide rectangles beside each other is one thing. But if they are used inside a chart with smaller lines is something different. Sometimes I can’t distinguish color, because they are “to small” for my eye. You might need some example charts to really judge it. But that sounds like getting more and more complicated…

Eileen says: June 16, 2007 @ 5:38 am

If you update in the future, could you show the effects of the blue-yellow combination? thanks

Sable says: July 12, 2007 @ 12:42 pm

This is SOOO cool! I’m always looking for information on color vision defiencies. Although I am not colorblind, I am fascinated with the words “protanopia”, “deuteranopia”, and “tritanopia”; they sound so interesting. Keep up the good work!

NÃ¥r skal man ta hensyn til de fargeblinde? hos IAllenkelhet - Fagblogg om brukervennlighet skrevet av NetLife Research says: December 10, 2007 @ 7:12 pm

[...] Kontrast-kart for fargeblinde [...]