Colour Blindness

Many people cannot see red while some cannot distinguish green or blue. Here is what 90% of the population see when they look at colours on your site:

Here are the same colours as seen by many of the other 10%:

Some see only this or worse:

Here is the previous line with the HTML RGB colour values added followed by the first line with RGB values added:

Note the main difference is the first part of the HTML colour specification. The red component is reduced or missing.

RGB

The RGB colour is specified with red, green, and blue each occupying two characters. The three settings are preceeded by # to distinguish RGB numbers from colour names. A colour of #9345c7 means the red component is set to 93, the green component is set to 45, and the blue component set to c7. The components are hexadecimal and range from 00 to ff, or 0 to 255 in decimal. ff is the brightest setting and 00 is black.

5% of males can not see green

5% of the male population have a problem seeing green, a condition named Deuteranomaly. The following table attempts to show standard colours followed by the same colours with green reduced.

1% of males can not see red

1% of the male population have a problem seeing red, a condition named Protanomaly. The following table attempts to show standard colours followed by the same colours with red reduced.

Some women and men can not see blue

Some men and women have a problem seeing blue, a condition named Tritanopia. The following table attempts to show standard colours followed by the same colours with blue reduced.

What we see

Our eyes can detect white, red, green and blue. Our eyes have thin "rod" cells to detect white light and cone cells to detect colour.

Rod Cells

The rod cells are fast and sensitive. The rod cells work in dim light so we can see the shape of objects at night. There are lots of rod cells near the edge of our eye so we can see cars leaping at us from side streets. If you have no rod cells or they are damaged, you are blind to movement. Do not drive a car.

In HTML terms, rods can tell color="#000000" (black) from color="#ffffff" (white). As rods are faster than cones, let people read faster by keeping text as black on white.

Cone Cells

Red, green and blue are detected by "cone" cells. Cone cells are slow and insensitive. Cone cells do not work in dim moonlight. Cone cells are too slow to notice cars leaping at us from side streets. If you have no cone cells or they are damaged, you cannot tell distinguish normal traffic lights or tell which fruit is ripe. You are "colour blind".

In HTML terms, a person blind to red, color="#ff0000", would see black, color="#000000", and would see white, color="#ffffff" as cyan, color="#00ffff".

Many types of colour blindness

There are 3 cone types, red, green and blue. If your blue cones are missing, you cannot see the flashing blue light on a police car. Your rod cells will see a grey flashing light but it may not catch your eye as it will have to compete with a lot of other grey lights.

Most colour blindness is a reduced ability rather than total blindness. In HTML terms, a person partially blind to red, color="#ff0000", would see brown, color="#990000", and would see white, color="#ffffff" as a muddy blue, color="#99ffff".

The most common problem is seeing red. 12% of males have reduced or no sensitivity to red. Red lipstick looks a gothic black. "Passionate" becomes "kinky".

The common red problem is carried in the X chromosone so is inherited by males. There are lots of other problems across both sexes and they affect one person in 200.

Back in the 70s

Way back in the neolithic era of computing, IBM brought out new colour terminals. Red appeared pink. Blue appeared as a washed out pastel colour. IBM had added a little white to every colour so colour blind people could still read using their white sensitive rod cells. Around the same time traffic lights changed colour. Green became almost cyan so green insensitive people could see the light as blue

Solutions for your web site

These solutions apply to GIFs and PNG files as well. Any time you select a colour theme, consider the main colours in HTML RGB terms.

The HTML RGB colour specification matches our cone cells. When you want something to contrast, make sure the colours contrast in each part of R, G and B. In color="123456", you want contrast in the first 2 digits then the next 2 then the last 2. Each 2 digits can range from 00 to ff. If you want orange text on a green background:

the backround is #66cc33, the text #ff9933 and the difference is only #993300. A person with a problem seeing red would see the backround as #00cc33, the text as #009933 and the difference would be only #003300.

Consider making the green darker in the blue section by setting the backround to #66cc00. Consider making the orange lighter in the blue section by setting the text to #ff9966. A person with a problem seeing red would see the backround as #00cc00, the text as #009966 and the difference would be #003366.

The ideal is to get a contrast of 66 or more in at least 2 colour sections. Few people have problems with multiple colours and those people will have problems with just about everything except black and white. If you are producing a colour image for a safety warning that absolutely everyone must read, consider repeating the image in black and white or using black and white outlines.

Summary

The ideal is to get a contrast of 66 or more in at least 2 colour sections of your HTML RGB specification. If you are editing images, check the RGB values of the main colours.

A quick test is to copy the image on a monochrome copier or fax. Is the image still readable in black and white? If it is still readable, chances are your customer's rod cells can distinguish what his or her cone cells cannot.