Colour Contrast Chart for Colour Blindness
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
| Hex # | Original | Protanopia | Dueteranopia | Tritanopia | Grayscale |
|---|---|---|---|---|---|
| Black: #000000 Red: #ff0000 |
![]() |
![]() |
![]() |
![]() |
![]() |
| Blue: #000099 Red: #ff0000 |
![]() |
![]() |
![]() |
![]() |
![]() |
| Black: #00cc00 Orange: #ed561b |
![]() |
![]() |
![]() |
![]() |
![]() |
| Blue: #000099 Orange: #ed561b |
![]() |
![]() |
![]() |
![]() |
![]() |
| Green: #00cc00 Blue: #000099 |
![]() |
![]() |
![]() |
![]() |
![]() |
| Hex # | Original | Protanopia | Dueteranopia | Tritanopia | Grayscale |
|---|---|---|---|---|---|
| Black: #000000 Yellow: #ffff00 |
![]() |
![]() |
![]() |
![]() |
![]() |
| Black: #000000 Green: #00cc00 |
![]() |
![]() |
![]() |
![]() |
![]() |
| Hex # | Original | Protanopia | Dueteranopia | Tritanopia | Grayscale |
|---|---|---|---|---|---|
| Green: #00cc00 Yellow: #ffff00 |
![]() |
![]() |
![]() |
![]() |
![]() |
| Green: #00cc00 Red: #ff0000 |
![]() |
![]() |
![]() |
![]() |
![]() |
- 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 thisI 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 [...]












































