Vischeck: Test how your site looks to someone that is color blind

http://www.vischeck.com/vischeck/vischeckURL.php

by icodemyownshit • 17 years ago

51 29 17 years ago

adamc• 17 years ago

Failed on the url I picked to test (www.utexas.edu). My initial reaction is this would make a great FF plugin. As a site, there are a lot of limitations -- I'm not going to want to give it the URL of a secured site I'm logged into, for example.

Interesting idea, though, so I wish them success.

weeksie• 17 years ago

I picked the first one, then looked at the upload. At first I was like "Hey, this is exactly the same!" Then I realized that it was a good indication that I'm probably a bit colorblind. At least now I know why I can't be trusted to chose a color palette.

eli5• 17 years ago

Not sure how trustworthy the color balance is on this website, but the Ishihara test is the standard one: http://www.toledo-bend.com/colorblind/Ishihara.asp

lil_cain• 17 years ago

Ishihara tests on your monitor are not going to be accurate. Get them on paper, the colours will be far better.

alan_p• 17 years ago

I've got a green colour impairment.

I'm not colour blind. I'm not even green blind. And I'm definitely not red/green blind.

If you're thinking about colour impairments, please keep this in mind: just because some people have a colour impairment that doesn't mean they are all colour blind (most of them aren't). They can see just what you can see, but some parts of the spectrum may appear paler and thus the nuances may be hard to tell apart. They'll probably have little problem telling two colours apart when they touch, but can't reliably recognise them as distinct when they're not.

It's okay to use colour in your design. It's even okay to use colours that are often problematic for people with colour impairments. It's not okay to RELY on them, tho. Especially if you rely on telling roughly similar colours apart (say, bluish purple and blue, or even dark red and dark green).

If you have to use colour as a signal, use another one as a failsafe -- use different patterns, borders or underlines in addition to different-coloured fills, outlines and texts.

The idea is not to sacrifice, but to enhance -- this is true for every form of accessibility, actually.

If you can't use strongly contrasting colours (i.e. different hue and value at high saturation) due to design constraints, simply make sure colour is not the only contrast you provide -- if all else fails just use markup to ensure the unstyled page still retains a contrast.

Oh, and don't forget to set your background and text colours in pairs. Even if you want to keep the default for one of them (white background, black text). This is not for accessibility alone, this is also for people like me who use a dark desktop theme and curse every time they see a form with black text on a (desktop default) dark background or a white background with (desktop default) bright green text on it. Like this very form I'm writing in -- good thing the web developer toolbar comes with a "ignore page colours" option.

mnemonik2• 17 years ago

I _am_ red/green color-blind, and I can basically agree with this:

If you have to use colour as a signal, use another one as a failsafe -- use different patterns, borders or underlines in addition to different-coloured fills, outlines and texts.

But I really want to filter it down to this:

When designing your site, use BOTH colors AND symbols/icons to get meaning across to your users.

It will be much more intuitive for the average user and will be good enough for me and most people with some sort of color-blindness.

I can't expect designers to go out of their way to figure out what colors I can/can't see and which melt in to each other, but I can make the argument above that will help ALL of their users, and me as well.

keltecp11• 17 years ago

wow... being colorblind myself and looking at the examples... now i feel really screwed up. see: http://www.vischeck.com/examples/

fnid• 17 years ago

do they all look the same?

eli5• 17 years ago

Yeah, all those pictures of hats look about the same to me.

kls• 17 years ago

I am 100% color blind and suffer from both forms. For the most part they do not look different, one picture may look a little more washed out than the other (less crisp) but they do all look the same. It is really weird because when I look at tests like this, I have no frame of reference, so it is much like not being in on the inside joker. I just don't get it.

On another note, I think traffic lights are a great example of how to deal with color blind interfaces. (I assume) The color catches the normal persons eye, while the secondary interface of position allows the color blind person the ability to know what the sign is indicating.

Shapes and position are a good way of creating indicators for the color blind.

chanux• 17 years ago

Now this makes sense : http://www.tshirthell.com/funny-shirts/fuck-the-colorblind/

ams61103• 17 years ago

Ha. I can't read it. But if I boost the contrast on my display the message becomes visible.

3dFlatLander• 17 years ago

Being completely colorblind, I'm a little bummed they didn't have an option to look at sites from that point of view. Almost every site I visit has some little thing that's hard to read.

icodemyownshit• 17 years ago

Do you have any recommendations for web developers/designers?

ams61103• 17 years ago

On a Mac, you can view everything in greyscale using the Universal Access panel in System Preferences.

rimantas• 17 years ago

http://michelf.com/projects/sim-daltonism/

eli5• 17 years ago

Well, to be fair, total color blindness is something like 100,000 times less common than red/green.

huntse• 17 years ago

I just checked my website before remembering that I don't have any colour on there at all. None.

It's all black, white and grey.

I am a diversity badass it seems.

discojesus2• 17 years ago

This has inspired me to launch my own service. Here is how your site looks to someone that is just plain blind:

http://imgur.com/ToRW6.jpg

eli5• 17 years ago

Actually, why don't you google "screen reader simulation"

discojesus2• 17 years ago

I know what a screen reader simulation is - perhaps you should google "joke."

camccann• 17 years ago

These little "here's how it would look" tools work well enough for sanity-checking images on a computer monitor, but don't necessarily tell you much about what someone will actually see. Color blindness makes a lot more sense if you have a decent grasp on how human color vision actually works.

Quick summary: Most people have four different types of light receptors. One type responds to all colors, the other three have overlapping response curves covering parts of the visible spectrum. Perception of hue and saturation derives from the differences between how strongly the three color receptors react--even "pure" colors will usually trigger at least two color receptors. Because of this, for any given triple of receptor response strengths, there are many combinations of light that will cause it; the RGB color system exploits this, using three colors in varying proportions to create a large range of perceived colors.

Colorblindness is a catchall term for defects in one or more type of light receptor. Which type, and the nature of the defect, can cause widely divergent effects.

Some people have anomalous response from one type; i.e., a nonstandard response curve. In practice, this means that their color vision essentially works like anyone else's, but the set of light combinations that cause a given response differ, so two colors that look identical to you may look different to them! For instance, if the medium-wavelength receptor's curve is shifted downward to further overlap the long-wavelength receptor's curve, reddish colors will seem more green and bluish colors will seem less green. Compared to a normal spectrum, this makes the cyan range shorter and the yellow range larger, making it harder for the individual to distinguish between mixtures of red and green.

Other people lack one color receptor type entirely, and thus have only two-axis color perception instead of the normal three. Losing the long or short receptors makes extreme reds or blues effectively invisible, while losing the medium-wavelength receptors leaves the individual with a full range of sensitivity, but able to perceive only a single gradient between colors. Note also that this collapses hue and saturation into a single axis; for instance, to someone with only the long and short receptors, there are both purples and greens that will look like white light.

A very few people have only one type of color receptor, or none at all, and thus perceive only overall brightness, with no color at all.

robotrout• 17 years ago

Did you look at the site then?

SteveC• 17 years ago

It seems that colour blind people can't see css background images either.

mnemonik2• 17 years ago

Kudos to icodemyownshit for creating something like this (unless he/she just submitted it, then kudos to whoever built it).

I can see how much easier it would be to just modify css hex colors than process whole images. The difference in the difficulty of implementation between the two are very significant. Thanks for a nice version 1.0. (We will be waiting for the next iteration which handles images, as well :) )

jhancock• 17 years ago

I'm proud to say my site passes all tests with flying colors!! Under the first test, I think the colors actually look better. Thanks for the quick check tool!!

TheThomas• 17 years ago

I use Color Oracle for this sort of testing: http://colororacle.cartography.ch/

Vischeck: Test how your site looks to someone that is color blind

Related Stories