Site design and Color Blindness

[Blackicicle]

Quite a while back, I remember reading somewhere or hearing from someone that 30% of all men are color blind. Actually I can't really remember the exact figure but I remember it was ridiculously high.

I'm not quite sure, which color(s) if any can't be seen by color blind people but for some reason, I have it in my head that is greens and blues.

My question is: Does anyone take this matter into consideration when choosing the colors to work with in the development stage of the website building process?

I will do a little research on the subject, but if anyone knows anything about this then please add your imput.

[Niko Holopainen]

Hey blackicile, hope this helps.

In my current site this was not taken into account but for the now performed reconstruction accessibility in general and issues like color blindness have been taken into account.

I think the percentage is one half of that (around 16% of males, may vary on geographical location) but this is just a hunch - I can't remember the facts.

Color blindness doesn't prevent the colour blind person from seeing colors (red, yellow, mainly) - instead the colors blend into the background with varying intensity, depending on the color blindness. Many people are actually unaware if they are partially color blind and it's usually discovered during driving license vision tests, military enlistment tests etc.

Ya. I ramble again. Back to the issue at hand.

Designing for possibly partially color blind audience doesn't actually require that reds and yellows aren't used. What it requires is that contrast between text and background is relatively high (eg. when using light grey background, don't use dark grey text but black instead). Since even colorblind-red will see the contrast, the color doesn't disappear - it fades into the surrounding color.

In a similar manner, slightly deviating from the subject - the site I'm working on has been designed bearing accesibility in mind: page navigation is simple (6 part main menu+side menu of only a couple objects), it's at most <30kb and will load on mobiles, braille etc. quickly but without the css formatting (then again, so will everyone else's). I've yet to implement the key navigation but that too will come.

Last but least, the obvious accesibility issues: caption and headers on tables, title tags on non-main navigational (e.g. none in the main navigation which is mostly repeated on every page) links, links with readily discernible appearance (I use darker color with "hover" effect of underline but may resort even to underlines).

I'll post a review request when the reconstruction is done in a couple weeks.

[eightfifteen]

30%, eh? THat explains alot of the sites out there.

[Blackicicle]

Lol Sorry eightfifteen I was just estimating. :)

Thanks for the info NikoH, very insightful, I hope to see the site you're working on soon.

[Niko Holopainen]

Here's a quickie Google find, as always one should reference several sources since the credibility can't be accounted to (at least it's hard for me to distinguish an US based "authority" from another).

http://www.hhmi.org/senses/b130.html

[Jekyl]

As a color blind guy who also does some web work, here's my take on it.....

I am technically Red/Green blind. This is the most common form of the 'handicap'. My taste leans towards very contrasting colors - yellow on black, that sort of thing. I can tell you that red fonts on a black background are very difficult for me to read.

Generally summed up, if you're interested in making sure the 30% (? !) can see your site well, I would recommend staying away from dark fonts on dark backgrounds. To us CB folks, green, purple, red and brown are considered dark colors.
Code accordingly. Hope this helps!

John

[jaca]

Jekyl said it before I could. Yes red and green are the most common colours. I've known men who are partial and red and green is common. Some are totally colour blind.

When I desing I stay away from that combination. I also try have a good contrast for those who have real problems.

I have worked on sites that I did not design, and there are a good number of people that will not take advice on the issue of colour blindness. One site I worked on was red/green/yellow. Sorry Jekyl!

[G[dot]com]

Try this test to find out for yourself how color blind people see it any URL:

http://colorfilter.wickline.org/

It also explains that there are different types of color blindness. Hope it helps,

Gi

[Blackicicle]

You don't have to answer if you don't wish to... and although this is a bit off topic I would just like to know Jekyl... How did you find out you were color blind?

The link you posted NikoH: http://www.hhmi.org/senses/b130.html
Was a very good read. After reading it, I decided to google "tests for color blindness" and "detecting color blindness" as it would be interesting to find the methods used by the professionals.

I came across (amoung others):
http://www.toledo-bend.com/colorblind/Ishihara.html
http://www.archimedes-lab.org/colorblindnesstest.html
http://www.psych.utoronto.ca/museum/holmgren.htm

The testing methods used on some of those sites listed above. I've actually seen before (On optical illusion sites) but I had no idea that they had a real world purpose.

Again... Knowing that I'm trailing way of track here, I'm particularly interested in the article on the site that was posted dealing with "Blindness to Motion" where the woman would pour her coffe and

the column of fluid flowing from the spout appeared frozen, like a waterfall turned to ice

I didn't even know that this was possible. Anyway thanks all for the replies and info.

[MartyS]

When it comes to color blindness there are 2 kinds because of the 2 kinds of receptors in the eyes -- red/green and blue/yellow. Men are more apt to be color blind than women, and red/green receptors (cones) are more apt to be defective than the blue/yellow.

In the U.S. they have designed traffic lights with this knowledge in mind because the reds have other colors mixed in and the red is always on top as another visual reminder.

[doubleplus]

I, too, am color blind. However, the true term should be "color weak." It is extremely rare for a human to be totally color blind - everything in shades of silvery-gray. But, that's how dogs see, so if you're designing a site for dogs, use black and white for best results. :)

I found out I was color blind in kindergarten. They were using color-coded letters to teach reading, and they decided I had a learning disability. But my mom would not accept that and took me to the doctor, who gave me the round groups of dots with the numbers and letters inside test.

As a web designer and graphic designer, this is a true disability. I am always asking my wife and sons, "can I borrow your eyes?" so they can confirm my color selections. Many a time they have said, "Yuk!!" So I depend on others.

About the traffic lights - I can't tell the difference between the red and yellow lights. I know the one on top is for stop, but if it's a single light like in front of fire houses, I have no idea if it's red or yellow...

About web surfing, I don't hold it against someone if their site is not color friendly for me - I'm used to it. Rarely, though, if ever, has it caused me to be unable to see what I needed to.

[TheWebDoctor(tm)]

There are many great resources on the Internet that cover color blindness.

The two most helpful sites available, of course on my favorites list for the subject, are http://www.vischeck.com/index.php and http://newmanservices.com/colorblind/default.asp.

Of course the my top favorites would be http://www.w3.org and http://www.tracecenter.org/world/web/.

If you would like to know if you are color blind you can check this site. http://www.toledo-bend.com/colorblind/Ishihara.html

Some statistics show approximately 8% of caucasion males are color blind. I haven't seen any statistics for males of other races. However, most statistics don't break it out and simply use an aggregate percentage.

Statistics for females indicate that no more than one-half a percent are color blind.

To understand how color blindness affects individuals there are a few tests you can perform using the first set of links above. The rarest form of color blindness is mono-chromatic which removes all colors and provides the person with varying shades of grey.

When I consult with organizations concerned with accessibility, color is an important issue. My recommendation is to use the web-safe colors. Web-safe colors used to mean that browsers would be able to see the colors. Now, it's more people can distinguish differences in colors. However, as long as you ensure you have a high degree of contrast between your background and foreground colors you'll do fine.

I hope this helps.

[Webworks7]

According to http://www.vischeck.com/vischeck/, one in 20 people have some sort of color vision deficiency. The deficiency is far more common in men than in women.

I do take this into account when designing my sites. I don't mean that I try to make things look "good" to colorblind users, but I do use text and backgrounds that have high contrast and I try not to make my sites color-dependent.

For example, I don't include an image map of the U.S. and say things like, "Click on the green states for exciting news!" Another thing I avoid is using color to give directions to the user, for example, "Click on the red button to submit the form." To avoid confusion, I am more specific, such as, "Click on the oval, red button on the left to submit the form," or I label the buttons and don't even mention the colors. When I am making maps, I try to select colors that can be distinguished by colorblind users, or use a combination of colors and patterns (hatching) to mark important features on the map.

Vischeck has a colorblindness simulator http://www.vischeck.com/vischeck/vischeckURL.php that I find quite useful. Another quick check, although less accurate, is simply to print your Web pages on a black and white printer and review them objectively. Does everything still make sense in black and white? Would you be able to follow all directions and use all of the navigation if you were seeing the site for the first time?

[venividi]

I've always tried not to use red and green fonts since I've found out that one of my clients has problems with these colors unless they are 'pure'. So from time to time I ask him to please go to the site I am building and tell me if the pages are clear to him. I am now aware that htis is not enough. However I've always tried to use safe colors for my backgrounds and fonts, but I was concerned about visitors with old monitors.
I also try to use em units instead of pixels or points as much as I can
I think we should pay more attention to this matter: being 'perceived' correctly is much more worth than having a cool site.

Valeria

[McFox]

The simple solution to determining how your website looks to someone who is color blind is to take a screen-shot with a graphics program (photoshop, paintshoppro,,) and render it to grayscale.

You will immediately be able to see which, if any, colors are lacking sufficient contrast; not just for those who are color-blind but also for other types of visual impairment.

McF

[ellar]

Thanks Gi for the original site you listed where you can see what your page will look like through the eyes of the different forms of colour blindness people suffer from.

This is really useful and plan to check out all the index pages I create through this little filter tool.

Thank you

[Andilinks]

Yes Gi, I found that site helpful too.

My own site passed the color-blind test, only minor non-essential things disappeared or dimmed.

This is for doubleplus:

As an aid to those people who can't decide whether colors look good together, whether it be from color-blindness or even just insecurity, there is an online color-picker that will display 16 colors that will go well with any one entered.

You may still want to run your work past your families' eyes but you'll probably hear "Yuk" less often.

http://www.colorschemer.com/online.html


Andi

edited: spelling error

[benwalsh]

a news article just raised this question and stated that 30% of all men are colour blind.
so I have come looking for an answer
I have always favoured navy text on light background, but have also used red on black.
can we cut to the chase. which colours are best, and worst?

[benwalsh]

[Keimos]

I thought I would just add my bit.

As some of the people replying are colour blind listen to what they are saying!

like the last example, but if you are not colour blind it does not prove anything. I can see it as I am not afflicted (can see the lighter green over the darker green) But that is also to do with the background.

Fact: As Mentioned before. Red/Green is recognised as the most common form of colour blindness. Which is why electricty wires are patterned so that there is a lesser chance of mistake. Yellow colour blindness affect less than 1% of individuals.(so we are told) I am not a great believer in stats as they can be manipulated to suit.

Having what most people call the anti site. Dark Blue background with yellow text I chose this to be the negative of most sites.People remember because of the colours and at the same time I have never had a complaint about the information being unreadable.

As there are some colour blind people involved in this discusssion please put me in my place or advise me otherwise. The site has passed 90% of the accessibility tests. Time and third parties dictate full compliance.
www.keimos.co.uk

All thoughts most welcome for the moment as we are in the process of re-design.

[webiff]

Well according to color combination our team have designed a Portal for all visitors who want to stay with cool colors and we have put all light gradient color in every section of this portal for further study of our color combination i would like to let you visit few sections of Apnahyderabad.com

1. Fashion Section http://www.apnahyderabad.com/fashion/
(Orange Color Scheme)

2. Health Section
http://www.apnahyderabad.com/health/
(Green Color Scheme)

3. Education Section
http://www.apnahyderabad.com/education/
(Light Blue Color Scheme)

4. Fun Section for KIDS
http://www.apnahyderabad.com/fun/
(Yellow with white Color Scheme)

5. Mobile Section
http://www.apnahyderabad.com/mobiles/
(Dark Orange Color Scheme)

6. Web Directory Section
http://www.apnahyderabad.com/web_directory/
(Malaysia Color Scheme)

well these are just few section i have mentiond.

We would like to get feedback from you about these webcolor schemes. http://www.apnahyderabad.com/Contact-us.asp


Regards
Furqan Durvesh
http://www.ApnaHyderabad.com
http://www.webiff.net

[mad-prices]

I am a newbie to the world of web design but I am currently studying web application design at the Open University. At the moment we are covering colour and design principles which covers design for the colour blind and disabled.
It’s an excellent course it’s all done online too, so I have no need to leave my house.

So I thought I would add these statistic’s being that I have them at hand and I don’t mean to step on anybodies toes. Just thought I would put some fact into the forum.

I have the static’s in front of me now:
0.5% of women that’s 1 in 200 have colour blindness.

8% of men that’s 1 in 12 have colour blindness

(Open University T183 Design and the web, Lesson 4: colour workbook, page 17, 3rd paragraph.)

Just like to add that colour on website doesn’t just effect colour blindness it also effects people with dyslexia or related disabilities.
1 in 10 people are dyslexic.
So site design should take all disabilties into an affect and not just the colour blind.

I.e.: is your text the right size for the visually impaired. Can the text be altered?
Is the colour scheme clashing for colour blindness and dyslexics alike?

Is background and text colour ok, c