Color! Imagine a world without color! It would be like living back in the world of the 1950s when everything was black and white. At least on TV. Today people take color for granted. Well, most people do. But our eyes are unique sense organs that allow us to perceive the color of different objects as,…well as color. As a child, I often wondered what I would see if somehow my eyes would be exchanged with those of someone else. The ability to see through someone else’s eyes perhaps would solve my nearsightedness, but what else might it affect? I now know that eyes are made up of special light sensors called rods and cones. The rods are photoreceptors that interpret the intensity of light and are activated in low and dim light. That is how we see at night and keep from bumping into things, most of the time. The cones contain photopigments or color-detecting molecules that allow us to interpret color. There are three different types of cones, each with a different photopigment sensitivity: red, green, and blue. You might recognize these colors as the same three colors we use to define a colors on a website by using the RGB value of a color. In fact, these three colors make up all of the colors we can display on a computer screen, well over 16 million colors. Each of the three primary colors on a computer screen has a value from 0-255. For example, red is (255,0, 0), but so is (128,0,0). Each is just a different intensity of red. When there is enough light, the cones in your eye see an apple as red because the red photopigments are stimulated. However, when the light dims, the cones cannot respond and only the rods can detect light. Since they respond to the intensity of the light only, they see the apple in a shade of gray.

Why is this important to your website and why was my younger self interested in what I would see through someone else’s eyes? The answer is that sometimes the cones of a person’s eyes are not correctly formed. Some may even be absent. In these cases, a person will not see all colors the same way as you and I see them. Well, I don’t know about you, so the way I see them. It is these defects in the cones that result in color blindness. As with all things, the degree of color blindness is not as simple as being able to see some colors, but not others. In fact, there are degrees of color blindness depending upon the severity of the damage to the photoreceptors in the cones for each of the three colors. Thus, color blindness can range from hardly noticeable to severe.

There are three basic types of color blindness. The first is Deuteranopia. People with this type have difficulty telling the difference between red and green because the green cone receptors are not functioning correctly. This is the most common type of red-green color blindness. The degree to which these people can tell the difference between red and green varies. However, you can imagine in a world where traffic lights use red and green to indicate whether it is safe to drive through an intersection, this can make driving a challenge. Yet think about how often red and green are used on a website to indicate bad versus good values. This type of color blindness is genetic-based and affects 6% of the male population, but less than a half percent of the female population. Therefore, this condition is probably due to a defect in the X-chromosome which men have only one while women have two which reduces their risk.

The second is Protanopia. This type indicates a problem with the cones that perceive longer wavelengths like red. It is also a type of red-green color blindness, but this one affects the red cone receptors. This creates many of the same problems as a person with Deuteranopia. This defect affects about 1% of males and less than 0.025% of females. This means that the defect is probably related to the X-chromosome as well. This defect also poses a serious driving risk and will affect the perception of websites that use red and green to indicate bad and good data values in charts.

The third is Tritanopia. People with this condition have problems with cones that perceive shorter wavelength light like blue and therefore have difficulty discerning the difference between blue and green, purple and red, and yellow and pink. In fact, most colors for these people appear less bright. This defect is not sex-related like the other two. Fortunately, it is the rarest of the color blindness types.

So, why do we need to know this? Most websites typically use only 4-6 colors. If you were to pick 2 or more colors that fall into one of these color-blind types, users with that type may have difficulty viewing your site or perhaps understanding it. How can you know if your colors pose a problem? There are several tools available on the Internet. However, the one that I recommend is Colour Contrat Analyser 2.5.0 from The Paciello Group. There may be newer versions, but I like this one because it works fine and has a smaller footprint than some of the newer ones. Other benefits are that it is free and it is available for PC and Mac computers. We will talk more about this tool next time. However, today I want to show one of the alternate screens that many people who use the tool have may have never looked at. Under the Options dropdown menu is an option to show color contrast for color blindness. The image below shows the results for color blindness between red and green.

If you have normal vision, you may think that the red text on the green background is perfectly legitimate. And based on the contrast ratio, it is. (Do not worry about the contrast ratio numbers for now. I cover that in the next post.) However, notice the contrast between the text and background for those with Deuteranopia, the most common type of color blindness. The text here is noticeable more difficult to read and this fact is reflected in the lower contrast ratio number.

So, in answer to my childhood question, if I could see through your eyes, I may not see the world the same way. Definitely, colors could be different. Next time I will explain how to use the contrast ratio numbers calculated by this tool to make sure your website colors are legible for everyone and thus ADA compliant.

Bonus Fact: Researchers into color blindness report that as many as 12% of females have four cone types rather than just three. They believe the extra cone type gives these individuals the ability to see as much as 100 times more colors than the rest of us. No wonder they say that their husbands have no eye for color fashion.