the problem with light grey
Colour contrast is not just about accessibility for people with poor vision. Recently I've had a great example of contrast issues caused by LCD screens.
My machine at work has problems with light grey. During a site build I once had our designer enquire when I was going to put the background into a column - only to be a bit taken aback when I said there wasn't one.
- What background?
- Err... the one in the right-hand column. There's a gradient.
- No there isn't. Not in the mockup you sent me.
- There really is, I'm checking the file now.
- *pause while I hit the offending column with magic wand*
- Ummm. OK, it's there, but I can't see it.
- You realise that doesn't make sense, right?
Eventually we compared monitors - on hers it was clear as day, on mine it was invisible. I tried tweaking the settings and no combination of brightness and contrast was acceptable (I suspect there's a gamma setting hidden somewhere in the labyrinthine driver settings, but I'm yet to find it). By the time I could see the greys, everything else was looking insane.
In the end, I implemented that gradient flying blind. I knew it was there, Magic Wand could find it. So I cut up the image and we tested on someone else's machine. These days I have a second monitor which shows things a little bit better.
having not learned...
I got caught out again while redeveloping this blog. I decided to put a nice, subtle, light-grey quote mark on the block quotes. It was fine on my home machine. But then I checked the test site on my work machine and did a double-take, thinking the images had broken somehow. The quote just wasn't there.
This is what should have been there. Note the quote mark to the left of the indented blockquote:
This is what I saw:
The only way I could tell the images hadn't broken was to take a screen shot and take a stab with my good friend the Magic Wand:
So in the end I cranked the grey up to a darker grey. It's not quite as aesthetically pleasing, but at least you can see the bugger on most monitors. Even so, it still isn't a fully accessible shade of grey; but it is a decorative image (and the large indent also indicates quotation) so on this occasion I'm living with it.
it's laptops too...
I've been using an old laptop during meetings and it has the same problem. In fact it's not just grey, it's any light colour.
In Gmail, the read/unread background colour difference is invisible. The only way you can tell which emails are unread is the fact they're bold.
This is what I normally see:
This is a rough simulation of the laptop screen:
Lucky Gmail does the bold/normal weight change as well. Remember the checkpoint - do not indicate meaning with colour alone? That's why.
so, always test contrast
None of this should come as a surprise - we know that colour combinations need sufficient contrast for all kinds of reasons. Had I tested my quote marks with the Contrast Analyser I would have picked it up sooner.
But it serves as yet another demonstration that accessibility requirements benefit just about everyone at some stage. Jump onto my workstation or an old laptop and suddenly you have a low-contrast vision impairment.