Vischeck: Test how your site looks to someone that is color blind(vischeck.com)
vischeck.com
Vischeck: Test how your site looks to someone that is color blind
http://www.vischeck.com/vischeck/vischeckURL.php
11 comments
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.
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.
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.
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.
Did you look at the site then?
It seems that colour blind people can't see css background images either.
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 :) )
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 :) )
Now this makes sense : http://www.tshirthell.com/funny-shirts/fuck-the-colorblind/
Ha. I can't read it. But if I boost the contrast on my display the message becomes visible.
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.
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
I use Color Oracle for this sort of testing: http://colororacle.cartography.ch/
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.
Interesting idea, though, so I wish them success.
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.
Well, to be fair, total color blindness is something like 100,000 times less common than red/green.
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.
It's all black, white and grey.
I am a diversity badass it seems.
Do you have any recommendations for web developers/designers?
On a Mac, you can view everything in greyscale using the Universal Access panel in System Preferences.
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!!
wow... being colorblind myself and looking at the examples... now i feel really screwed up. see: http://www.vischeck.com/examples/
do they all look the same?
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.
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.
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
http://imgur.com/ToRW6.jpg
Actually, why don't you google "screen reader simulation"
I know what a screen reader simulation is - perhaps you should google "joke."
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.