Colorblindness and Web Development

There’s nothing like the feeling of accomplishment right after nailing your first awesome hover transition between two colors. It feels like you’re unstoppable, and like some sorcerer supreme of CSS.

But the reality of it is that when it comes to colorblindness accessibility none of those fancy hover animations really matter.

Roughly 1 in 12 men have a form of colorblindness, and 1 in 200 women have it as well. Although it is a small it is a small percentage of people who are diagnosed with this condition, it is important for web developers to consider this in our design as we strive to create websites that are accessible for every one.

When it comes to colorblindness there are four different types of colorblindness. The first being Protanopia, which is a condition when the red cones in the eye do not detect enough red light.

The next is Deuteranopia that is another form of red-green colourblindness, but this time it is a lack of green cones.

The third is Tritanopia, which is a lack of blue-yellow cones,.

There is also a form of colorblindness Achromatopsia, which is a total lack of all colors and pretty much puts a grayscale over everything that the person sees.

Looking at the above photos of what Facebook would like using a colourblindness filter that anyone can use at, one can see the differences in how they are viewed. One thing in particular that I have noticed is that it is a little difficult distinguishing between what is just regular text and what are anchor tags.

As front-end web developers we can solve some of these issues and keep our code accessible for those that are colour blind. We can start by having dark overlays over images with text on them, and keeping strong contrast to a minimum. With text keeping it simple with white font over dark backgrounds and dark font over light backgrounds is the best one can do.

Observing the following picture one can see that certain colour combinations produce very similar results.

It is important as front web developers that we are aware of these issues so we can address them when we need to. We need to know what our target audience is when producing a site, and consider these practices if the site is intended for everyone. In a perfect world every website will would be accessible for everyone, but sometimes there are times when clients or designers will not budge on set colours or style. We can also use those times to educate those who are not aware of it.