Contrast and Readability
It’s a fact, our eyes prefer to follow that which is familar. Familiar fonts, sizes, weights, and contrasts. Now I don’t want to get into typography, as I don’t have much of clue. In fact, I recently discovered how little I know about it, when I read some typography advice. However, we’ve been brought up all our lives to read dark text on a light background; I’ve never read a novel that wasn’t.
Content driven sites
For the most part (except for photography, art, and video blogs), blogs are full of written material. So why then are so many designing light text on dark sites?
My personal answer to that is, I don’t know. Maybe it’s to be different, maybe it has more appeal, or maybe a designers life is pain, because people like me question why they do the things they do? Without a doubt, some of the slickest designs are dark, and they showcase beautifully crafted images and colours in their designs. But if a site is driven by written articles, shouldn’t it focus on being more readable?
At this point I’m thinking, maybe some of you don’t have a problem with reading light text on a dark background. Maybe you’ve never even known it to be a problem. I don’t have bad eye-sight or anything (although my left eye has degraded slightly over recent years), and I don’t wear glasses, but I definately find reading the more familiar dark on light a lot less straining. I even prefer dark grey on white, than black on white for some reason too, which is why I use it on my sites. Black on white is fine when you’re reading a book, as you’re looking at reflected ambient light. But for me, when the light is projected from a screen, black becomes too harsh. Am I just wierd?
More than contrast
Interestingly, if you must possess a dark design, there are a few things you need to be aware of. Having a dark background and light text, means you must increase the leading (line-height) and tracking (letter spacing). Basically, you need more s p a c e. [Source: Five Simple Steps To Better Typography]
This isn’t a call for everyone to change their site, far from it. But I do think we should be more alert to make sure the articles on our sites are as legible as possible. A big problem I see all over the place is leading that is too small, and it is so frustrating, as (in most cases) a ten second change in the CSS would make a world of difference.
Do you find contrast to be an issue in your enjoyment of visiting a site? Do you have a preference as to what you like? Maybe you’re not sure if your site is easy to read? Let’s discuss and help if required. I’d be interested if anyone knows if contrast and colours have an effect upon those with dyslexia, or any other disability?
(Now does this go under usability, or accessiblity…?)
- If you enjoyed this, you should read:
Comments
12 Responses to “Contrast and Readability”
Share your thoughts...
I like what you have touched on here, Armen. I came up against this a while back when I had a light on dark theme. I will probably revive it for Halloween (I hacked the crapola out of Kashul Sheth’s “fluidity” theme) but its not to my taste for the whole year. I had the same feeling about it - I wanted it to be a bit more readable. The computer that I use to write on is “experienced” and the monitor is getting darker as time goes on. So, if I cannot read a site on it, I don’t want it to be mine. There are a few sites out there with awesome info on them that I cannot read on this monitor (such as the tutorial to create an AJAX “shelf” by MONFX, which is completely unreadable to me unless I “highlight” all the text) and this is their loss, as they won’t keep a reader, unless they’re determined.
Usability and accessibility, Armen, and you’re not weird at all.
There’s so much info out there about reading preferences, and very good reasons why novels are printed on off-white paper, with black serifed text. Of course reading online is different, but it still holds many of the same values.
One thing to add to your article about white text on black is an increase in text weight. When white text is surrounded by black or dark colours it becomes suffocated and appears thinner than it actually is.
Thanks very much for the link to my typography article.
I agree with you completely. I much prefer to read darker text on a very light background. I’ve developed a couple of themes that have dark backgrounds because a lot of people seem to like them, and that’s great. However, I’m not sure I’ve seen any “professional” blogs with dark backgrounds.
MrCorey - I was going to mention in my articles, how different monitors can make a huge difference for good, or for bad.
David - Yeah, I put it in both categories. You’re only saying that because Northern Ireland may be the contributing factor to my ‘weirdness’.
I think that article touches upon that issue too. It’s certianly not as straightforward as one might think.
I find myself studying logos and typography all the time now, and I think you’re partly to blame!
Anthony - Most well known blogs that consist of lot of reading material, appear to go for the dark on light, but Veerle’s is a dark site, and it’s fairly professional. Unless of course by professional you mean, corporate stuff and newspapers, which are mostly white with dark text.
My comment didn’t come out exactly as I meant it. By “professional”, I was referring to the big money making blogs like Problogger, Copyblogger, etc. Sorry for the confusion.
Veerle’s looks very professional…..very well designed.
[…] casually dropped off two superb tips on contrast and readability that I had not come across before, and are essential for you if you do, or would like to use, a […]
Here’s the viewpoint from an older woman with pitiful eyesight: I do not like the dark background with white text, and won’t waste my time trying to read it, no matter how good the content. It’s also easier for me to read black text instead of gray (but I don’t expect you to change your font for me).
I know it isn’t practical, but I wish people used fonts that were a little larger (maybe as y’all get older that will become an issue you will consider). I know I can enlarge the fonts on my computer, but it still would be nice to be able to read without making changes.
I have wondered about making my main content text larger. I’ll maybe give it a try to see what I think. Your text isn’t all that large though? Do you find mine too small?
I found Shelley’s type size on This Eclectic Life to be very similar to yours too, Armen.
I like the less tall header image, by the way. Not too keen on the reflections as I think they’re very over-done, but for me you’ve definitely made an improvement. Good work.
David - Thanks. Believe it or not, it was starting to bug me a little
I’m not sure about the reflections either. I’ll leave them up for a while, and then try to look at it with fresh eyes. I’d be interested in other opinions too of course.
[…] iFFECT.net - Contrast and Readability […]
Interesting article. I definitely prefer “light” themes when on the web. I appreciate your site for this (along with the content)