Wednesday 21 December 2011

Designing for the Colour Blind

Today I was whinging about getting yet another email, nothing odd in getting emails you may think, however for me as a colour blind person, sending me an email that is written in a colour I cannot see properly just ends up as being grey and if the colour is a bright colour it is a light gray on a white background. This is deeply deeply annoying so I tweeted my discomfort and sent a polite but firm email to the sender asking them to send emails to me in a format that I would easily read.

My tweet brought several responses from UI designers keen to understand where I was coming from and asking me for some hints as to how to make their designs better for the colour challenged.

Colour blindness is alas sometimes forgotten and to be fair it is more of a pain in the arse than a real handicap and designing your site for people with more profound problems is MUCH more important, however it is deeply deeply irritating when you land on some sites or get emails that the designer or sender at the other end thinks are "dead cool" and "trendy" but for the colour blind are at best confusing or at worst just un-usable.

I discovered I was almost totally colour blind in my late teens early 20's and I can see a little blue and a little green and no red at all. Why had I not noticed you may ask well we learn colour through association with known "things". The sky is blue, the grass green and milk white, we then learn to associate that colour with other things. For colour blind people they can recognise the colour from the context it is in. Confusion only arises when confronted with something unkonow and the CB person has to guess by the tonal value what colour it might be.

The eye has two light sensitive cells,  Rods and Cones. Rods are mainly clustered around the edge of the visual field and cones in the middle. Rods see tones and Cones see the colour. Colour sightedness is basically a problem that is usually genetic and usually found on the Y chromosome making it much more common in men.The problem manifests itself with the Cones they are either malformed, don't work or just arent there at all. I was born with only 11% of the Cones I should have so whilst I can can see some colour I am mostly monchromatic. The up side is that I have more Rods which are smaller than cones which means I have extremely good visual accuity :-) always an up side eh?

About 1 in 10 Europeans mainly men have some level of two colour colour blindness, about
1 in 1000 are like me totally or very nearly totally colour blind.

It is worthy remembering that someone who is "Blue" colour blind does not see nothing when the something is Blue. We can still see something but just not in way you see it. It will be a gray that matches the tonal value of the actual colour.

I paint and I love painting and I am asked "How can you being colour blind paint in colour?" Well paint manufacturers helpfully put paint in tubes with a label on it that says "Blue" or "Red" and comes with a Colour Index  for example French Ultramarine Blue has PB 29 (77007), so contains Pigment Blue 29  and is color 77007. Simple when you know how ;-). Also my paintings are inclined to be a collection of colours with white added to lighten, so you will see a lot of one colour tonally adjusted to make sense to me.

Similarly I am often asked .. "How do you know which is the Red Stop light?" well that's easy it usually has STOP written on it as well as being red and more obviously it is always the light at the top of a traffic signal ;-) and they are tonally very different. On the other hand put me infront of the old style electrical cables (Brown Red and Green) I just cannot cope. Thankfully the new wiring cables are a dark one, a light one and a stripy one and I have stopped blowing up toasters.

Now I am not saying that you should go deliberately out of your way to make your
UI colour-blind friendly, please make your site as glorious as you can for the 90+%
of visitors that can see all the colours. However keep me and my kindred in the back of
your mind and offer us some help if we need it.

Some things to remember and or do ...

  1. Don't use ONLY color to indicate something specific on your page.
    There is nothing quite so fecking annoying as getting an error message that
    says "Please correct the entries highlighted in red" when you can't see red.
    and because it is a "dark" hue it looks just like black. Use color and a * or >
    as well to indicate the problem.
  2. Similarly having a RED alert box with White writing does not to a Red colour blind person
    convey the same "Danger" context as it would to a colour visioned person. Add a nice Icon
    to help with the context.

  3. Desaturate your images to see if they still have impact to grey scale.
    Beware this is NOT how most color blind people see the images and will need to be
    tweaked slightly giving less contrast (make it lighter) as the viewer may not see the tones
    in the same way you do... but it will give you a quick and easy way to tell if the image is still useful particularly if you have text or navigation objects on top of the image.

  4. Try to avoid placing red and green together. (RG colour blindness is the most common)
    Especially on items like navigation buttons, the text can actually blend into the
    background, making it very hard to read.. here (CTRL+A is your friend if you are colour blind)

  5. Try and avoid using two colours that are of similar tonal value - and this is not as easy as it sounds for example this to color sighted people is fine and easy to discern. The outer colour is
    RGB(112,161,207) the inner colour is RGB(97,179,122)
  6. Gray Scale this image and you get the idea of how this looks like to me
  7. It is always better to have a dark colour on a light background, you can reverse this but it isn't quite so good. Also be aware that it is more difficult for everyone to distinguish dark (low value) and/or saturated colors (e.g., a 16-color palette blue or red against black), and extremely light pastels, particularly in low or bright light conditions. This is doubly true for the colorblind.

  8. If you can, find a color blind friend or relative to look at your site. If you're not color blind it's often very difficult to tell what they might have trouble with. The challenge is as can be seen above that if they can't see something,  they might not even know they aren't seeing it.

  9. http://colorfilter.wickline.org/ is a useful place to go to test web pages
    it isn't brilliant.. but it does show you what the various types of CB people
    may see when they visit your site. Try your favourite business sites and you will be surprised how different they look to the colour blind.

Friday 16 December 2011

"Pain in the Arse" problem found in 853 client pre-roll out testing

During Lotus Client testing of 853 we have come across a problem that it is perhaps wise to be aware of.
If you have the following set of circumstances
1. You have laid out a forms elements in a table
2. You display the form in a Frameset, page or Dialog box
3. You have not explicitly set a Background Colour in all the cells of the table
4. Your First cell in the table has an explicit Background Colour set
This happens
The background colour of the first cell in the table is inherited by all the cells that have the backgound colour as the default [NONE] Which is a bit ackward if your font colour happens to be the same as the background colour!

I don't think UP1 fixes this but I haven't tried so it might but I am informed that UP1 is more to do with xPagey stuff.

I have tested this on XP, Vista and Windows7 853 clients and they are all the same.

To fix it set the BG colour to an actual colour rather than the [none] default and it appears as expected

Given my previous contact with bug reporting being less that warm and fuzzy . we are currently looking at the possibility tweaking all our tables in forms so default [none] background colours are replaced with an actual colour prior to 8.5.3 rollout, for now we will have to stay on 8.5.2

Wednesday 14 December 2011

jQuery 1.7 Event Delegation.. Gitanes and whisling at girls are they walk by

In the wonderful world of JS event listeners cost memory.
Lots and lots of memory!
In today's shiney shiney click,drag swipe an pinch world has a whole heap of event listeners floating around smoking cheap ciggarettes, whistling at the girls and generally making your web site perform badly. But all is not lost jQuery provides some really easy methods for handling event listeners efficiently through the wonders of event delegation.

In a bit of an extreme example but hey we are Domino Developers we are extreme! Imagine a situation where a 10×10 cell table needs to have an event listener on each cell; let’s say that clicking on a cell adds or removes a class that defines the cell’s background color. A typical way that this might be written:


$('table').find('td').click(function() {
    $(this).toggleClass('yuckygreen');
});

Enter jQuery 1.7's  on() method. It acts as a utility that wraps all of jQuery’s event listeners into one convenient method, and the way you write it determines how it behaves.  so we replace .click()  .on() using this code.

$('table').find('td').on('click',function() {
    $(this).toggleClass('active');
});

Is that cool or what? Mind you we are still binding 100 hundred event listeners to our page, one to each individual table cell and they are still puffing away on their Gitanes and scratching their arses in a most undignified and memory wasting way . Since the majority of events bubble up the DOM tree, we can bind a single event listener to one element (in this case, the <table>) and wait for events to bubble up from its children. Like this

$('table').on('click','td',function() {
    $(this).toggleClass('active');
});

All we’ve done is moved the td selector to an argument inside the .on() method. Providing a selector to .on() switches it into delegation mode, and the event is only fired for descendants of the bound element (table) that match the selector (td). With that one simple change, we’ve gone from having to bind one hundred event listeners to just one. You might think that the browser having to do one hundred times less work would be a good thing and you’d be completely right as I found this evening!

[If you are using a version of jQuery less than 1.7 all is not lost.. look up the .delegate() method and you will be able to do nearly the same thing!]

Sunday 4 December 2011

Ye Godz TheTroubledGeek.com gets an email!

It was many moons ago that awesome team of Fabulous Francie and Professor Ignatius Gonad IV were called upon by a member of the liaty to answer one of their problems. Sadly the domain is no longer active ... it is a long story which I may be allowed to tell some day when they lift the court orders. However the questioner got around this knowing that I was a close friend of Ignatius Gonad and knew I that would be able to contact him  and sent me the email and I am very glad to be able to reproduce the email and the Professors reply here in the august pages of DominoYesMaybe

Dear Professor and Fabulous:

First, let me convey my deep condolences for the cancellation of your
"Troubled Geek" show. Initially, the loss of this bastion of comfort in a
cold, cold world saddened me nearly to the point of doing myself harm! But
then I took a nap and felt much, much better. I do hope to see you back on
the air again soon.

Now, to my question. While investigating some of the detailed behavior of
"garbage collection" in the "Java" programming language, I decided to put
some background music on in my "office". I chose to loop the Ping Floyd
song "Wish You Were Here", as it seemed appropriate for certain situations
when the "Java" "Garbage Collector" (why do they call it that, anyway?
Seems a bit supercilious, no?) removes bits of memory that I really did not
want it to.

Here's the problem: My son, who is not a fan of Pink Floyd, wandered by and
criticized my choice of "entertainment". He claims that the Beatles song
"Everybody's Got Something To Hide (Except for Me and My Monkey)" is far
more appropriate, as (in his explication) the "Monkey" in the song
represents my missing heap storage, and that, beyond simply stating the
problem, the song also provides useful "advice" (i.e., "Take it easy").

I, however, claim that "Take it easy" actually refers to the methodology
implemented by the "Garbage Collector", by which the so-called "garbage" is
removed.

Who is right, he or I?

Thank you for your adjudication!

regards,
A Fan

and the reply ...
Comrade Fan

Since Fabulous Francie as at this time deep in her research program on
the effect of suntan oil on the defrag time of AIX servers I will jump in
first.

Alas and alack, TheTroubledGeek.com is as you have found no more
due to an unfortunate incident with some Pirate Rum, an unripe banana
and a goat about which I can say no more other than the nun now has
a restraining order.

I believe you problem lies not in the choice of music but in your unnatural
urges with respect to Java! In their seminal work "Javaphiliacs, the Hidden
deviants" by Weisenberg, Smith and Widdle 2002 the abnormalities that
lie deep in the psyche of those that dabble in the deep murky stack of Java
can be traced back to incidents in early childhood that involve wellingtons
(I believe you americans call then gumboots), wheelbarrows and an inability
to eat icecream with a spoon.

You son's perspicacious grasp of the situation is laudable however it seems
he too may be suffering from C++osopatheticsonolasitis, which is in short
a perpondersance to see more meaning the the words of messieurs Lennon
and McCartney than in fact is actually there.

So in effect what I am saying is you are both wrong and should immeadiately
repair to Itoons and purchase "We're Only in It For the Money" by Frank Zappa
and the Mothers the only album to play when considering anything to do with
Java and it makes about as much sense!

Much Love and Hedgehogs!
Professor Gonad


Professor Gonad wishes me to make known to the world at large that the authorities are quite happy for him to answer any and all of your queries using the good offices of DominoYesMaybe as an intermediary. The Prof is also a great believer in collaboration and invites not only your problems but your input in the comments section of any posts he may receive and reply to

Disqus for Domi-No-Yes-Maybe