Top
Web Design

Web Design for Color Blind Users

If you are not color blind, chances are you don’t think about this problem very often. People who live with colorblindness, on the other hand, have to think about it all the time. Before we get into ways for web designers to create better websites for color blind users, let’s spend a little time understanding color blindness better.

 

8% of men and 0.5% of women (of Northern European descent) are colorblind. This might make it sound like color blindness is a condition with identical symptoms between different cases. This is not the case. Color blindness has a whole range of color perception symptoms. For instance, some color blind people see almost normal ranges of color spectrum, while a small percentage see only in black and white.

 

Color blindness comes from a common flaw in the gene that causes the creation of color receptor Cones in the human eye. The cones are the color receptor bodies (rods detect blacks, whites, and shade contrasts). This gene is found on the X chromosome, meaning that for men (who have one X and one Y chromosome) if the gene on the one X chromosome is flawed, they will be color blind. Women have two X chromosomes, so if the gene on one isn’t working correctly, chances are that it is functioning properly on the other chromosome.

 

That’s why more men have color blindness than women. Color blind individuals usually have trouble telling certain colors apart, especially if they are at the same brightness level. One common sort of color blindness causes people to see greens, yellows, and oranges as basically the same color. The only way to distinguish them is to see that one color is lighter or darker than another (in terms of closeness to white or black, not saturation of the color itself). This last point offers clues about how to design for color blind users.

 

It is important for web designers to create websites that don’t use difficult colors right beside each other, especially if they are at similar levels of lightness/darkness. This is especially true of the color of text. Text that isn’t colored in a way that color blind people can see will be invisible, swallowed up by the background color is sits upon.

 

Variations in lightness and darkness are helpful, but there is another easy way to help color blind users navigate a website. Shapes and textures offer helpful clues when navigating a website. They offer clues that colors can’t, and which color blind users can perceive without difficulty. If you think that a color scheme may be problematic for a color blind user, consider altering the texture, not the colors.

 

If you are concerned about the usability of your website for color blind users, do some research on the topic. It is a surprisingly deep topic, and one that you will need to master if you are to create designs that become widely used. After all, if 8% (potentially) of your users can’t use your website, is it really a good website?

Daniel Bailey
  • David R

    Great article.
    I’ve recently tried to download and use the ColorOracle software for Windows. As I recall the release date was 2010, and the software would not run.
    I hope it’s been updated. Please check and ensure the link is as helpful as it once was.
    please add it to your list of articles on Accessibility: https://www.logoglaze.com/animated-video/

  • Mark Good

    I am a graphic designer in a Professional Logo Design USA company. In this article the writer has done a tremendous job by posting some precious matter for the young and inexperienced designers.