About Color Blindness and Some Tools

Whenever I have to tell people that I’m colorblind, it sparks their curiosity, especially since I’m a designer. They are baffled by the idea of someone that can make things look pretty but can’t see color.

But that’s because the term “colorblind” is pretty misleading. I still see colors; I just don’t see as many colors. This causes me to confuse hues; for example, I think that something is green when it’s actually orange. I just recently found out that the Golden Gate Bridge is red — even though I lived in SF for some time!

The truth is that I don’t even know what I’m missing out. I don’t have an ON/OFF switch that allows me to see the difference. You can live your life with color blindness normally, with some hassles here and there. Some people even go all of their life without knowing they have this condition — like my mom, who just found out recently. Lol.

Not gonna lie, it gets irritating in some instances. For example, when you are trying to read some text that is over a background with a color that doesn’t create enough contrast. Or when vital information, like in a graph, depends too much on color to be understood. And user interfaces can be frustrating when they only use color to denote a state, a notification, or a necessary action.

So, as a designer, having this condition has helped me design stuff more obviously. It’s my secret superpower, yo! It has also sparked my interest in how to design for accessibility. So I put together a list of cool tools that might help you too!

But first, let’s talk about colorblindness a bit.

I have protanopia, which is a type of red-green color blindness. A defect in the light-sensitive cone cells causes it. This condition allows me to tell about 20 hues apart from each other. Usually, people can distinguish around 100 different tones.⠀

Blue-yellow color blindness is less common. It makes it hard to tell the difference between blue and green, and between yellow and red. Complete color blindness (seeing in grayscales) is extremely rare. Most people are not actually “color blind” but “color deficient.”

Oh, also, contrary to popular belief, dogs are not colorblind. Lol.

Color Tools!

If you’re interested in designing UIs with colors that take into consideration people with different abilities, here's a list of tools that might help you.
 

WhoCanUse

A tool that helps you understand how color contrast can affect people with different visual abilities.
 

Khroma

I freaking love this tool. Khroma uses machine learning to determine which colors you like and creates limitless palettes for you to discover, search, and save. I have been surprised by the combinations in gives you — leading me to try combos that I would’ve never thought of. It can also filter out combinations that don’t have proper contrast ratios.
 

ColorBox

ColorBox is a color tool to produce color sets in a custom number of steps, editing the values with an easing curve. How cool and nerdy is that? It also gives you a preview of how the text would look on top of the color. Made by Lyft Design — read more about it here.
 

Gradienta

Beautiful gradients that you can download as CSS code, SVG, or JPG. Great for adding lightweight, colorful, responsive backgrounds. This is an open-source side project by designer Shahadat Rahman. This tool is not about accessibility, but… I mean… come on, gradients are cool!
 

Happy Hues

A site with curated color pallets that allows you to see them applied in context. A great page built by Mackenzie Child without any code using Webflow, yo!
 

Stark

Stark is a tool that allows you to check the color contrast ratio of your text. This is to see if your colors meet accessibility compliance. The cool thing is that it works right on your design tools as a plugin!
 

Color Safe

A web app that allows you to test hues and see them in context. You can get beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
 

Color Oracle

A free color blindness simulator app that shows you in real-time what people with common color vision abilities will see. It applies a full-screen color filter, independently of the software in use.

What about you? Do you know of any cool tools? Do you have a similar condition or know someone that does?

BTW, I wrote a comic about the different questions I get when I have to tell people I have colorblindness. Read it on Instagram!