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.
Comments
51 responses to “Contrasting Vision”
Most readable to me: #1 (contrast) & #2 (contrast2).
CRT monitor.
:)
CRT here: contrast #2 and contrast2 #3
#1: example 2
#2: example 2
CRT monitor..
#1, #2, and #6. Too much contrast hurts my eyes.
CRT (1280×1024, 32-bit) w/ GeForceFX 5200 Ultra.
I mention my video card because it’s a fact that some cards render text better than others.
Flatron L1710B: Example 4! (contrast2.html).
CRT,
#1: 1,2,3 fine, 4 too light – 2 is the best.
#2: all fine, again I like 2 the most.
Overall, it has to be #1.2 for best of best.
Douglas
Honestly? They are all plenty readable and you are talking about such subtle contrast changes that I doubt any one variation is *measurably* more readable than any of the others. I am on a Powerbook with OS X.
What matters 1000 times more to me is typeface choice, leading, column width, and overall color scheme. I think it’s a lot more rational to argue that people should always increase leading slightly than always decrease contrast slightly. Loose leading is almost always more readable than the browser’s default leading.
Examples 1 and 2 are the most readable, in my opinion.
I have an LCD with and old 8MB graphics card.
1, 2, 5, 6, and 7. I think I like 6 the best.
17″ Panasonic PanaSync CRT, 1024×768@32bpp, ATI Rage128 w/ 32MB
Honestly, they’re all readable. It’s really a test of personal preference, and how sensitive your eyes are to contrast. I’m sure there are people who are comforable with #777 on #999 out there.
I will go for the one with black, otherwise I have trouble reading.
Mike D. — When it comes to my personal preference regarding contrast I completely agree with you. But from my previous post on the matter it seems that some of the commentors do think differently. Furthermore, it is abolutely true that contrast is not the only factor of importance when readability is concerened, and I agree that other issues you mention might even be of more importance, but that’s not the subject of this post, as such.
I think numbers 1.2 and 2.2-2.3 are best. I have to agree that the extremes are less readable.
Toshiba Satellite Pro M10, Cleartype.
However, on my Philips 170C4 LCD (set in SRGB color mode), I’d say 1.1 and 2.1-2.3.
#2 and #7 on my PowerBook.
To me on an IBM Thinkpad TFT with Cleartype, 2 & 2 were best.
2&2 definitely. iiyama 19″ CRT
But I don’t like it whatever the colours in that size and typeface.
IANAT(ypographer) :)
Examples 2 and 8 are the easiest to read for me.
Of examples 1-4, 2 is the most aesthetically pleasing.
Of examples 5-8, 6 is the most aesthetically pleasing.
In both cases I’d go for option #2 on my 19inch LCD. Both have strong contrast and lean away from absolute constrast. Effective and pleasing to ‘my’ eye.
Typography is indeed governed by many factors. Color just being one of them alas this is the only one we can control within reasonable measure. Height and line height are so within the realm of our control. Other typographic control is pretty poor or non existing when it comes to webpages. Thus good typography is still nothing but a dream, unless you stick to images for your text. But that too kind of sucks.
I’d say examples 2 and 6 seems easiest to read.
Eizo 21″ CRT, Matrox Parhelia
By the way, did this test come to mind after you saw Zeldmans re-design? ;o)
second on both using an apple 20″
4 is readable, but I don’t think it would be readable for long documents.
Contrast 1: Most readable #2 > #1 > #3 >> #4
Contrast 2: #5 = #6 = #7 > #8.
Flatscreen LCD monitor.
I wonder if the results would be different with a different font / size.
Without question, #1 and #2 are the most readable. But they are not necessarily the prettiest. The IBM logo might be more “readable” if it didn’t have alternating lines deleted from it, but it certainly wouldn’t be a creative logo (not that IBM’s logo is necessarily a creative logo… but you can see what I’m getting at).
The best looking results will come when the chosen contrast is well-suited to the design’s presentation, color scheme, and separation.
I’m using a 19″ Trinitron CRT.
#1 an #2 are the most readable, #3 and #4 start to get washed out.
#5 to #8 are equally readable, though only with #7 and #8 can I really see the background color.
Dell Inspiron 8100 1400×1050 , ClearType, 32bit color LCD
I get similar results on the other LCDs I work with, although the Apple LCD seems to present color better than either the Gateways or the Dell Inspiron
Heh!!
We extended this to which is more readable for body copy, arial or verdana. The wierd thing was that a lot of people chose 100 percent contrast for one font and 80 percent contrast for the other.
verdana 80 percent
verdana 100 percent
arial 80 percent
arial 100 percent
More thoughts would be cool.
Tim, “non 100 percent body contrast web design ltd”
Example 2 (in all instances) – Laptop, Windows (ClearType) / Studio Display, Mac OS X.
I feel that the versions with a non-white background are easier to read. Exmaples 1 and 5 (to follow your numbering) drop out immediately. — I guess you have included those as a reference. Example 4 is relatively hard to read, followed by example 8. My sequence would look like (from good to ‘evil’ ;-):
6 — 7 — 2 — 3 — 8 — 4 — (1 / 5)
I work in 24bit color on a Sony Trinitron CRT monitor.
@Tim: I’m not at all surprised that Verdana would score to be legible at for instance 80% grey, where Arial could easily need 100% black. Verdana has a bigger x-height, which renders it more legible at screen reading font sizes. Thus the contrast between text and background could be lessened while keeping legibility at a level comparable to black Arial text.
@Sean: it is a known limitation of LCD displays (even the good ones) that subtle shades near white and near black are lost. That’s why you would typically see CRT monitors still being used for critical publishing work (black-and-white photography, color accuracy).
personal preference – #2 from both sets… background does not really make difference to me.
others would be a bit too tiring for eyes if content stretches beyond couple paragraphs..
again, that’s my opinion..
Sony Trinitron CRT…
My work monitor is a Compaq S700 With a gamma of around 2.5.
#1 is the best of the first page. #2 & #3 are usable and I would not complain about them. #4 is starting to get difficult to read.
#5 is the worst of the second page. #6 and #7 look almost identical to me. #8 is much more restful un the eyes.
I’m using a laptop, and I find that the highest contrast is the best. #1 and #4 are preferable. However, on a CRT, the more contrast, the more it hurts my eyes. I prefer a slightly off-white background and slightly off-black text. #2 and #5 are my favorites, in that case.
My home monitor is a LG L1710S TFT with a gamma of around 2.2.
I am also running Linux without well anti-aliased fonts.
#1 & #5 are hard to read and show fringing like an over compressed JPEG.
#2 is better, #3 and #4 are good.
#6 is better, so is #7, and #8 is good.
Example 1 (Contrast) and Example 2 (contrast 2)
TFT 19” 1280*1024
1 and 6 (CRT). By a country mile.
Constant white background: 1 too much contrast, 4 to little; I like 3 best, although 2 isn’t bad either.
Constant black text: 1 is out again, 2 not too hot either, 3 is agreeable, but I like 4 the best. Go figure.
Dang! Forgot: this was on a 15″ CRT.
#2 and #6 on 21″ Nokia 445Xpro CRT monitor w/Nvidia 5950U graphics. I have always thought #333 is the perfect color on white. I personally find it a lot easier to read for an extended period of time.
I think that asking people what combination they prefer may be a disservice.
Monitor calibration should be taken into account – for example most monitors are running @ 9300k (gamma 2.2) and gives white a bluish colour.
Of course I believe that you should look at a web site at the closest to what end user will see. Naming monitors/graphic cards will not help as much as a properly calibrated monitor….
I like number two best on both examples, personally. :)
Jeff
#1: 2
#2: 2
19″ CRT
If forced to choose between 1 (#000) and 4 (light gray) in the variable text sample set, I would choose 1 (#000). Nos. 3 and 4 were just too light for my lousy eyes.
#4 is pretty bad–it makes me work harder to read it. But #1 might be too much contrast–almost as if the text were flickering. #2 and #3 are fine. I think I prefer the non-white backgrounds, though, particularly #7 and #8.
Viewed on a Dell Inspiron laptop.
It’s really interesting to see the differences between the various observations. What catches my eye most:
– TFT displays typically render the examples brighter than CRT monitors.
– High contrast on a TFT results less often in fatigue compared to CRT (this obviously is a result of the ‘flickering’ effect of CRTs).
– There appears to be a slight preference for black text on a slightly off-white background over grey text on a white background — or am I wrong in this conclusion?
Numbers two, three and eight were by far the most readable, and in that order from most- to least-readable. This was viewed on a CRT monitor, running at 1600×1200. I also have poor eyesight (though I find higher resolutions–and hence, smaller type–more readable and more aesthetically pleasing.)
Example one has, by far, too much contrast. I can read it, though I would tend to skip it because it’s almost painful to read. The second example is much better. The third, though even easier on the eyes, is a bit of a strain to see clearly. The fourth just simply looks fuzzy.
While I can easily see the difference between examples five through eight, the first three of those are just as difficult to read as example one. Example eight is much easier on the eyes, but I’d still rather be reading example two or three.
I thought I’d also add that I’m colorblind. While that doesn’t pose a problem with the colors in the example (we’re looking at what I believe are black, white, and a few shades of grey), many colorblind people (myself included) have a great deal of trouble between colors that contrast a great deal. Too much contrast, or too many colors, can cause a certain amount of confusion to many colorblind people. That’s how I feel when reading the examples with a lot of contrast (one, and five through seven.) I’m overwhelmed by the contrast, and tend to focus more on that than I do the content itself.
Apologies for the overly-long comment, but I hope it helps.
Nathan: Thanks for your comment, and please don’t apologize for adding useful information to this thread. I always welcome everone’s thoughts on topics, especially if I’ve asked directly for feedback.
In the same vein I’d like to thank everyone that took the time (and will do so in the future) to respond to my quick user test. Of course we can’t conclude to anything in particular, unfortunately. I can see some trends and majority preferences. I’ll leave everyone to decide what’s best and let the feedback speak for itself.
Overall this has been quite an interesting thread. I think I might ask for feedback more often. Even if only a limited amount of people respond (in terms of statistical significance) there’s always useful information for everyone to take away. Besides, it’s a good way to “keep it real” and stay in touch with the audience. Thanks guys and girls!
#2 & #2
iBook full brightness running Safari
#2 & #3, respectively. LCD monitors, Sony flat panel and my iBook.
The black on white makes me want to claw my eyes out of my skull.
Most of the others make me want to curl up in a field of kittens and dream of gumdrops.
Example #2 in both cases, using an Apple Studio Display.
#2 in both cases, using LCD (19″ desktop, 15″ laptop).
# 4 (background)
# 2 (foreground)
On a 15″ laptop.
#666 is practically unreadable.
#2 & #3
I (very) rarely use an extreme of *any* colour. The problem with topping out (FFF) or bottoming out (000) is that you then struggle to when you need a shadow/hightlight shade.
I prefer the example #2, seen in a spanish 17″ CRT :)
thanks for the experiment, and publish your results, please
#1: example 1
#2: example 1
15″ xga tft lcd monitor on my Acer laptop