

Vischeck: Test how your site looks to someone that is color blind - icodemyownshit
http://www.vischeck.com/vischeck/vischeckURL.php

======
alan_p
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.

~~~
mnemonik
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.

------
camccann
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
Did you look at the site then?

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

~~~
mnemonik
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 :) )

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

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

------
weeksie
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.

~~~
eli
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
Ishihara tests on your monitor are not going to be accurate. Get them on
paper, the colours will be far better.

~~~
eli
I would've assumed that too, but I'm red-green color blind and they're working
right for me.

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

------
adamc
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.

------
3dFlatLander
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
Do you have any recommendations for web developers/designers?

~~~
rimantas
<http://michelf.com/projects/sim-daltonism/>

------
jhancock
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!!

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

~~~
fnid
do they all look the same?

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

~~~
ams6110
I can see differences in the hats but cannot see the "3" in the Ishihara
plates.

------
discojesus
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>

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

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

