Contrasting Vision

In one of my previous posts I encouraged people to abandon #000 as copy text colour in favour of lighter shades such as #333 or even #666, for example. In retrospect there are two things wrong with that post. First, I should not tell people what, or what not to do, even if my words were meant as a somewhat ironic, very much tongue-in-cheek statement. It is never my intention to communicate with such an attitude. Second, I wasn’t joking — even if ironic, I was somewhat serious. But was I right to make such a statement?

In all honesty I think I was wrong, to some degree. I should note that there’s a difference between choices you make as part of your personal web site as opposed to commercial projects. A personal web site is exactly that: personal. You get what you pay for. The choices you make are yours and I’m certainly not the one that’s going to tell you what to change. Commercial projects on the other hand need to follow best practices, such as good readability and sufficient contrast (among many other things, of course.)

Receiving one comment about a particular issue is not going to validate a change, per se. However, a sequence of complaints revealing that contrast of body text is insufficient, asks for a simple and straightforward solution: increase contrast, à la minute. As a designer I have nothing to gain from standing by my original decision. Design is an iterative process of trial and error. Ideally, you hope to solve all problems and possible issues before you launch a web site, but that’s not always possible. There’s always a point where you just need to launch, period.

Now, do I really think you should not use #000 as a colour for copy text? Of course not. That said, as a designer I consider issues of style. In my opinion contrast and colours are both essential factors of what constitutes style. Nonetheless it is important to find a balance between style and usability — obviously, content is going to suffer if not readable. For the sake of this discussion I’m going to include a quick and dirty user test, asking for your feedback.

Variable copy text colour and constant background colour (#fff) — examples 1-4
Constant copy text colour (#000) and variable background colour — examples 5-8

So, what example (1-8) do you find most readable, or what example is not acceptable? State your findings in the comments, don’t forget to mention the type of monitor you’re using (CRT, flatpanel, laptop, etc.) Please realise that this is just a quick assessment, I’m not trying to conclude to anything per se. Just testing for fun and insight. Besides I have abstracted from an assortment of other variables and used only raster values of black, but the same principle applies to other colours.