Aug 22

My view on light text on dark background vs. readability

2006 at 11.47 am posted by Veerle

Roger published an interesting discussion on “Light text on dark background vs. readability” . I think that most accessibility/usability experts have no clue how hard life of a designer really is. We constantly have to battle in our mind coming up with something creative and if not we fail in our profession and will likely not convince any clients. The thing is, where do you draw the line? It is about making the right choices and that’s what I did when I designed this site.  I know that some things fail on this site with the color analyzer but they only contain 1 or 2 lines of text tops. My main concern was the article section and I made sure these were within the recommend guidelines. Because that’s were you are likely to stay the longest.

Everybody has advice

What also strikes me is that everybody has advice what to do. But I can’t stop wondering if the people who give that advice have any clue how hard it is to be a designer? To me it also seems that some take the usability and accessibility too far that they tend to forget about aesthetics and visual design. Like I said in the intro we constantly are under a certain pressure to stay on top of the design game. If we stay within the rules of what is acceptable and what has been proven as working we will not be perceived as a good designer or only end up being mediocre. How many times did you read something along the lines “It looks like a blog and it’s boring” or “colors have been done before boring”, that’s the stuff we as a designer have to deal with all day. So what do you do to solve that? You explore new territory and try to use some new colors and a grid. So yes sometimes these things ruin something for somebody but that’s what life is all about. Life is a trade off and you do what you think is best.

So are dark backgrounds really that bad?

To me personally they aren’t. My advice is when you use them, use them wisely in a circumstance that warrants them. For a newspaper website it is a no go for example but a personal website or client website why not. Just try to think about readability in the sections were there is a lot of text. That’s exactly the area that I did a check on. Other important aspects are aspects like leading, tracking and font-weight. It’s amazing how much these little things can affect the usability. My leading was to small at first too on this site and it made it much more easy to read.

Making an alternative stylesheet

It is still on my agenda to do so but this takes time. First I need to explore colors because I still want things to look nice. Doing a rush job to just get one out there is totally wrong in my humble opnion. When I first started designing this site I explored a lot of things and it is not easy to come up with something that is considered the holy grail.  It comes down to making choices and now I rather spend my limited amount of time in doing some tutorials instead of not publishing something because I’m making an alternative stylesheet for the very few people that complained so far (only 2). There are other options they can use like the RSS reader or making a user stylesheet in their browser.

Computer Screens

In the bigger picture of the discussion I think computer screens are a very important factor. I’m always amazed when people starting to talk about colors they see. Clients that say I don’t like that red color but in reality it is orange, or I don’t like your black background on this blog when it is a dark green. That should tell you something about their complains isn’t it? To me the calibration of most screens are way off. I personally feel that a designer or anyone for that matter can’t be blamed for people that decided to buy a crappy screen because the price was right. If you did that, well sorry then you have to deal with your bad choice. I’m not the one to fix or compensate for that. And believe me there is a huge difference in screens! All Apple screens for example are great for online reading, Dell has some fantastic screens too if you choose the “UltraSharp” ones. Color calibration isn’t easy but there are many tools that can help in creating the best suitable solution. But that’s something that we could use for another article all together.

Conclusion

It’s impossible to make it work for everybody, 100% perfection is utopia. Colors can be so personal that it is impossible to get it right for everybody. I’m considering myself lucky if I get right for 80% of the people. Usability and accessibility advice tends always to be black and white but for a designer there is a lot of grey too. If you’re already thinking about readability when designing you are doing something right. So don’t stop being creative!


64served

gravatar

1

permalink this comment Roger Johansson Tue Aug 22, 2006 at 12.06 pm

That’s a good follow-up, Veerle, and I think I understand the difficulties you face as a visually oriented designer.

Remember though that there are a lot of grey areas, though probably not as many as in graphic design, in usability and accessibility as well. At least that’s how I see it. Always strive for perfection, but when that isn’t possible you have to start compromising. Sometimes the design suffers, sometimes usability, sometimes accessibility.

Pleasing everybody is not possible. But we should all give it a try :-).


gravatar

2

permalink this comment Nik Tue Aug 22, 2006 at 12.40 pm

I’ve always liked dark backrgound sites, but my last few site designs have been light backgrounds.. until recently that is, when I went back to dark background on my site, and I’m glad I did too! I actually think it brings out the photographs more too.

Nik


gravatar

3

permalink this comment George Ornbo Tue Aug 22, 2006 at 12.48 pm

I have heard many people say that the internet is the hardest software development enviromnent to work in. I think that’s equally true for designers. Screen resolutions, web safe colours and browser inconsistencies don’t make it easy. Add on top usability and accessiblity constraints and it is enough to make you want to give up.

I would say that just like code you should allow your design to degrade gracefully. Tableless sites allow people to use their own stylesheets if they can’t read light on dark. If they want text only they can turn off stylesheets entirely. For me it is not a bad thing to give the user some element of control over the design.

Some people like Jakob Nielsen think the web should look boring so people can use it. I think you can have both and that you for one are showing how you can marry standards with creative and engaging design.


gravatar

4

permalink this comment Steve (lazymouse) Tue Aug 22, 2006 at 01.15 pm

Hi Veerle;

This really strikes a chord with me, as I use a mac with a beautifully bright Apple Display which shows even dark colours as clear and concise, but when I test my sites on a (very cheap!) Dell laptop, the colours look very dull indeed.

In fact, some of my clients must have equally poor monitors as they often say the design I am doing for them is great, but a little ‘dull’ :)

I think all web users should upgrade their monitors :)

Steve


gravatar

5

permalink this comment Jérôme Coupé Tue Aug 22, 2006 at 01.16 pm

True. Finding the right balance can be hard.

For me, thinking and speaking in terms of scales / continuums helps a lot. When having to explain the various components of a “good website”, I tend to use the mix-table metaphor: You have a bunch of cursors to deal with (content, design, accessibility, usability, etc.). Depending on the type of music to play, the type of audience, the room, etc. some settings will work better than others for most people.

To me, being a good web professional is being capable to find the best possible settings. Compromise is an art, as we say in Belgium ;o)


gravatar

6

permalink this comment Egor Kloos Tue Aug 22, 2006 at 01.16 pm

Like I mentioned on Roger’s blog. This is not a new issue. Very high contrast is difficult to read no matter the medium and no matter whether is light on dark or dark on light. Printed material tends to show less issues but that’s in part due to the fact that black is rarely black and is often grey. Our default observation is dark on light and so we tend to find less issue because they have already been delt with. Light on dark requires more tweeks and general attention because, in this case, browsers are not built for this view mode.


gravatar

7

permalink this comment Roel Van Gils Tue Aug 22, 2006 at 01.21 pm

As far as I know, there’s no real evidence that light text on a dark background affects readibility. I too believe it’s merely a matter of personal preference. Think about how it used to be, back in the DOS days and even before that: people have been staring at white on black screens for over two decades ;) Nobody complained back then.

I don not consider ‘light on dark’ to be an accessibility problem as long as the contrast ratio is sufficient (this is quite easily testable by using the colour contrast analyzer Veerle suggested).

Personally, I think the colour scheme of Veerle’s site is very easy on the eyes and the dark background doesn’t bother me at all. But, then again, that’s just me. I do agree with Roger that adding an alternative stylesheet is a good thing to consider.

What does bother me about inverted colour schemes (especially when I’m tired...), is switching back and forth from black/white to white/black situations. For example, when you’re doing some research on a website with a dark background, and switching to your word processor to take notes (on white background).  It just hurts my eyes to adjust to the inverted colours on every alt-tab. Or even when desiging a ‘dark site’, I would consider to use black as a background colour in my HTML editor too :) Does this sound familiar?


gravatar

8

permalink this comment Johan Prawiro Tue Aug 22, 2006 at 02.12 pm

I’ve been following the comments on Roger’s blog as well and I personally have to say: there is no universal solution to this issue. I think it depends too much on personal preference to say “light-on-dark is better than dark-on-light” (or vice-versa). Both color-combinations have reasonable arguments for and against them, whilst having a great look.

Alternative stylesheets are a nice way to let people choose how they want to experience a website. But then one could say that the overall tone of a design is a complete different one (e.g. in terms of visual communication).

As it has been said before: it’s all about trade-offs. I like the idea of pleasing everybody… but that’s (sadly) never going to happen.

In my opinion you are doing a great job with this blog and also improving Roger’s blog. Keep up the good work! =)


gravatar

9

permalink this comment Leon Tue Aug 22, 2006 at 02.16 pm

Good write-up Veerle! I find your blog very pleasing to the eye and equally readable. Readability should not be used as a strict law. A law with room for interpretation at least. Depending on your audience, be more strict or loose.

Besides, what’s so bad about challenging your visitors a little? It’s a fundamental ingredient for progress.

However, I do think designs should comply to the cheaper computer screens; for the same reason we still can’t use PNG images with alpha channels on our websites: we can’t because the majority of the people won’t expierience the design as intended by the designer. And it is still the majority which determines the standard. It stinks, but there’s nothing much one can do about it :(


gravatar

10

permalink this comment Egor Kloos Tue Aug 22, 2006 at 02.26 pm

Leon, you can provide for better browsers and PNG. Furthermore, with IE7 coming people are going to wish that they already had.


gravatar

11

permalink this comment Rafael Fischmann Tue Aug 22, 2006 at 03.06 pm

Sorry to divert from the original topic of the post, but there is a way to show transparent PNGs correctly in all browsers:

http://www.twinhelix.com/css/iepngfix/

I use it in all my projects.


gravatar

12

permalink this comment Joshua Tue Aug 22, 2006 at 03.20 pm

To be honest, I see this as a problem for the OS / Browser and not individual sites. OS X already has the option to inverse colors (cmd+option+cntrl+8) and it works beautifully for sites that I have a hard time reading. I don’t expect every site out there to cater to my own personal preferences on contrast and color… how boring would the web look then.

If windows would implement something similar, we wouldn’t even have to worry about this at all. And I’m sure there are already apps out there for windows folks who would like to do this… so maybe just find one and point them to it if they are the type of people that might need to invert on frequent sites.

It’s a non-issue for me I guess. The people that care about it will find a way around it.


gravatar

13

permalink this comment Leon Tue Aug 22, 2006 at 03.42 pm

@Egor and Rafael

I admit my choise of parallels was poor. I perhaps should have used the poor standards compliancy of Internet Explorer as an example of how you will always have to comply to the one that rules the roost.


gravatar

14

permalink this comment Marijn Tue Aug 22, 2006 at 03.46 pm

Very nice plea for a designer’s life ;) I think another misconception is that you can compare a computer screen with a lightbulb better than with a piece of paper. When my screen is mostly black it’s so relaxing for my eyes. That’s also why a lot of CAD software works with a black background and white lines.  I think your site is especially easy to read, much much more than the average word document (well except for the sans-serif font probably)


gravatar

15

permalink this comment DeaPeaJay Tue Aug 22, 2006 at 04.01 pm

I prefer dark on light myself as well. But I don’t have a disdain for light on dark either. As long as there’s contrast, my eye’s are fine with both.

Most of the pages I see at mySpace are perfect examples of bad contrast pages. It amazes me the color combinations some mySpacers choose.


gravatar

16

permalink this comment Jonathan E Tue Aug 22, 2006 at 04.23 pm

I think there are a few variables to consider when you hear complaints from people about colour schemes. Ambient room lighting and time of day can play a huge roll into how readable your content is and it’s something you have no control over. When I’m tired I find it harder to read light on dark than when I’m fully awake.

To please everyone and try and accommodate for every variable is impossible. At the end of the day I think it has to come down to the designer making educated decisions and sticking by their choices.

@Rafael: There are other ways of using PNG images in IE: Using Transparent PNGs in Internet Explorer


gravatar

17

permalink this comment Egor Kloos Tue Aug 22, 2006 at 04.26 pm

In any case simultaneous contrast, even in gray scales, is a real pain to deal with. Especially when alternating background colours.


gravatar

18

permalink this comment Mike (WhereIsThatDeafGuy) Tue Aug 22, 2006 at 05.03 pm

Interesting posts to read from Veerle’s love for designing and Roger’s passion for accessibility and usability.

While one can’t always please everybody, the important thing is that we are all constantly learning and improving our limited knowledge in web stuff - whether it’s design, XHTML/CSS coding, or accessibility.

Finding a nice balance is probably the key to making compromises. :)


gravatar

19

permalink this comment Paul R. Redmond Tue Aug 22, 2006 at 05.14 pm

I like what Roger and Veerle both said.

From a usability standpoint, most article-intensive sites are white, with black text. Magazine articles are also usually black text on white (although the intro/first page might be a dark colored intricate design with a light font).

From a designer’s perspective, white can become perceived as dull and overused. Plus, other colors evoke emotions that white can’t possibly awaken. Veerle’s site is such an example. The current design extracts a playful/artsy flavor that is reassuring and fun--yet doesn’t get in the way.
The hardest battle for a designer to fight is the fact that, like fashion, what’s in today might be out tomorrow. The other hardest battle is that everyone’s a critic.


gravatar

20

permalink this comment Sam Tue Aug 22, 2006 at 07.45 pm

“It’s impossible to make it work for everybody, 100% perfection is utopia”. I like these words. People differ and there is no way to satisfy all the visitors. I agree with both you and Roger. But frankly speaking, from the point of view of medicine (I’m now talking about the readability) it’s better to read dark text on light.


gravatar

21

permalink this comment Jens Hellqvist Tue Aug 22, 2006 at 08.40 pm

I really think you’ve proved your points with your site already. I like it a lot, but as you say, everobody can’t.


gravatar

22

permalink this comment Damon Barati Tue Aug 22, 2006 at 08.43 pm

Veerle:
I got here via Roger’s post via Digg, and read his comment.

From experience I can say you both have valid points. The key is the correct balance. And experience helps in cutting the time in reaching that.

Too bright a background with too dark or too light a text, and I can feel it in my eyes after a few minutes of reading.

Flip it the other way: too dark a background with too bright or dark a text… same thing.

I find a background that’s soft, not too dark, not to bright, with the right contrasting text color to be the most readable.


gravatar

23

permalink this comment Interesting Commentary Man Tue Aug 22, 2006 at 09.36 pm

And you call yourself a designer!


gravatar

24

permalink this comment Martin Hellendoorn Tue Aug 22, 2006 at 09.43 pm

As the web is becoming more accessible to PDA en mobile phones, you have to consider reading from small devices. I think that on the small devices, a white background with black letters are best.

But then there is the trend of bigger monitors on home computers, even the LCD TV as a monitor. There the frame is almost always black or grey. When your background is the same colour, you lose the sight of where the site stops and the frame begins, especially in a dark room. This problem can also occur with the small devices.

So to make the contrast between the site and the frame of the device as clear as possible, you need to use a light colour as background (I think).


gravatar

25

permalink this comment Patrick Tue Aug 22, 2006 at 09.54 pm

Bah! I disable the Style Sheet when I visit your site. :-)

CTRL-Shift-S with the Web Developer extension under Firefox.

I hate dark backgrounds. I just hate them.


gravatar

26

permalink this comment Mark Tue Aug 22, 2006 at 11.56 pm

Veerle, I find your blog so beautiful, and it’s a pleasure to read your articles with these colors.

The font size is just perfect. Perhaps a little bit more line height would make it better, but that’s just my own opinion.

This is one of the few sites that have a cute design and a great content. Keep up the good work! ;-)


gravatar

27

permalink this comment hank Wed Aug 23, 2006 at 02.20 am

I think sometimes we, as designers, forget that we aren’t designing for our own monitors, but those of our audience. While we can’t accommodate for colour variations in every old/cheap display, we should aim for our work to look decent on the “average” display, which I must say, usually varies somewhat from the designer’s 21” Mac monitor. That said, I’m loving Veerle’s new design more and more every time I visit, and it works well enough on the various displays I use…


gravatar

28

permalink this comment Bart Wed Aug 23, 2006 at 07.49 am

Let’s just put in the caveats first: I love your site design, appreciate your work, do understand the difficulties a designer faces etc.

But there are some fundamental things that bug me in your article.

So are dark backgrounds really that bad? To me personally they aren’t.

I personally feel that a designer or anyone for that matter can’t be blamed for people that decided to buy a crappy screen because the price was right.

(Emphasis mine.)

I do understand that design is ultimately a subjective craft. But design for websites is, in my opinion, about delivering the message to the target audience. I don’t believe you can say “I don’t care what kind of screen people have, I’m designing for my screen.”.

If that were really true, you would be making websites that are “optimised for 1280x1024 and Safari on Mac”, and we know where that road takes us.

I do agree that you can use the design of your choosing on your personal site. Also, the audience of this site is likely to have a good, big screen.

But for commercial use, I believe you should consider the end user first.


gravatar

29

permalink this comment Tanny O'Haley Wed Aug 23, 2006 at 08.23 am

Veerle, Your site is one of the few light on dark sites that I can read. I just had to bump the font size up a notch with Firefox.


gravatar

30

permalink this comment Veerle Wed Aug 23, 2006 at 09.29 am

@Bart:

But design for websites is, in my opinion, about delivering the message to the target audience. I don’t believe you can say “I don’t care what kind of screen people have, I’m designing for my screen.”.

If you have a crappy screen you have to learn to deal with your mistake of buying one and we don’t have to compensate for you. That’s like saying because most people still watch 4:3 no 16:9 is allowed because the target audience is mostly 4:3. That’s called progress and reverse thinking isn’t helping anybody. You have to take it in consideration but adjusting your design for them is totally wrong. If you made a bad buying decision you have to deal with it and others with a great screen shouldn’t see the consequences. I design for good screens and check on a cheaper screen to see if it is doable but that’s as far as it goes. If you have to look harder on that screen that’s your fault not mine.

And btw if we would all design for Safari the world would be a much better place :D


gravatar

31

permalink this comment Magia3e Wed Aug 23, 2006 at 10.33 am

There is _heaps_ of evidence to back up Roger’s post. He is right - black text on a white background ensures best readability for all possible users.

But what is wrong with this picture?

The picture Roger paints is completely out of context in the way in which _good_ websites are built. That is, based on a user-centred design (see Garrett Model .. THIS is how to build a good website).

I think we all agree that Veerle knows all about this - striking a balance between user needs (accessability, usability, etc), client needs (an engaging design), and business drivers, in all areas of design, site structure and navigation.

If there was a user need, or a business strategy, that demanded black text on a white background, THEN communicate it to your designer. Don’t make the mistake of many clients who go first to the designer, get a design they like, and then expect it to meet the needs of their business and the users of their website.

N’est pas?

M


gravatar

32

permalink this comment Bart Claeys Wed Aug 23, 2006 at 11.05 am

Most usability recommendations are based upon old research document. I’ve been examing the research setups in Applied Ergonomics for a while and they’re all outdated and the test groups are always very small. Take fluid site designs as an example. Back in the days research on this subject was done, there were no very wide screens like we have today. Because of this, the stretching of text was very limited and the readability was not affected too much. But times changed and screens got wider which makes the fluid-design recommendations obsolete. 

The fact that black/white text versus black/white works better depends on the type of screen and your personal mood. An LCD screen works different than a CRT tube and it’s all about the amount of energy (light) that is being beamed to your head and whether you’re in the mood to receive that amount of energy. Do you prefere the moon on a black sky or do you prefer an e-clips with a black sun on a clear sky? Both setups work, depending how you feel.

But at the end looking at the popularity of MySpace and eBay -which are badly designed sites- usability is less important than marketing. That’s also why Dreamland sells really well while their shops are really cluttered.


gravatar

33

permalink this comment henrik Wed Aug 23, 2006 at 11.36 am

Well put Veerle. I do not doubt that a white background is somewhat easier to read, but it all comes down to target audience. It’s easy to make a general statement about what to do and what not to do but quite hard to make one that applies in all cases. As usual it depends on the context.


gravatar

34

permalink this comment hank Wed Aug 23, 2006 at 04.24 pm

If you have a crappy screen you have to learn to deal with your mistake of buying one and we don’t have to compensate for you.

Hmm… people buy screens that are good but within a few years they aren’t so good… or “crappy” as you put it. Or worse still, they use the only screen they are able to use at work. Again, it depends on the audience.

I agree with the aesthetics, and I don’t feel that light-on-dark is bad for readability (if it’s done right), but I do feel that saying “your crappy screen is your problem (or your old browser, or your old eyesight) and designers don’t have to accommodate” goes right against the spirit of Web Standards. In my experience, designing with Web Standards always involves compromises in one form or another.

Just my 2c.


gravatar

35

permalink this comment Geert Leyseele Wed Aug 23, 2006 at 04.38 pm

@hank:

“your crappy screen is your problem (or your old browser, or your old eyesight) and designers don’t have to accommodate” goes right against the spirit of Web Standards. In my experience, designing with Web Standards always involves compromises in one form or another.

Designing with Web Standards doesn’t mean adjusting your whole design just to compensate for those with crappy screens. It means that you do your best in making the page work in the best possible way without compromising the users that have a good screen. If you start adjusting everything for those that have bad or old things your doing something wrong and you are working against progress and I think that’s what Veerle is saying here. An example would be when you use colors in your design that start to look like really bad on a good screen because it looks nice on a crappy screen. My 2c.


gravatar

36

permalink this comment Steven Wed Aug 23, 2006 at 04.52 pm

I agree with Bart. I think you have to consider your target audience. Your site Veerle is mainly for those people interested in design. Most of them will have a good calibrated monitor if they take themselves serious.
And about black/white or white/black; i think it’s all about personal taste. Neither is better or worser. Reading of the screen is always a pain for the eyes. I personal prefer white space in my designs. White is a an important part of the total design.


gravatar

37

permalink this comment Aaron Wed Aug 23, 2006 at 05.11 pm

Isn’t it all about making compromises?
Everyone should care about usability and readability for sure, but sometimes this is to much.

Let’s take this as an example: I work as an IT man in my company. I have to care about the network and the computers in it and one huge point here should be the IT security. I could care about security all day and all night. Isn’t it the same with the usability and readability discussion? I should care about it and take it serious, but I could spend all my time on thinking about usability and my website could look like crap.

I think that you’re having a good balance between designing your site in a beautiful way and taking care about usability veerle.

go on.


gravatar

38

permalink this comment Jimmy Wed Aug 23, 2006 at 08.19 pm

Very interesting topic I must say. I came across the same topic (albeit sort-of) recently whilst writing an article on how to reduce your daily print-out average. I’ve seen countless numbers of people having their screens adjusted completely wrong to accomodate for reads longer that just a few minutes. I sometimes wonder if they have their screens to thank for their lovely face tans even.

I am prepared to agree with Nik all the way on top though on the trade-off when you want to incorporate photographs on your design. Photos look a lot sweeter it seems on against a dark background.

@Roel…
I think you have great point. What about all the time people sat in front of terminals all day long? Personally, I sometimes prefer a dark background, cause it does seem more pleasant on my eyes. In fact, I’ve acutally though of making an alternative stylesheet for my own site just to be able to offer the oppurtunity to my readers (and to some extent myself).

Nevertheless, great post Veerle. Judging by the subsequent comments that has come to be to this post, it seem to me that this is a somewhat controvertial topic almost.


gravatar

39

permalink this comment Nick Wed Aug 23, 2006 at 09.24 pm

Black backgrounds give me a headache with blurred version, after five minutes of reading.
I usually read these type of sites in my feed reader, with black text on white backgrounds.
I’ve always wanted to write a greasemonkey script to reverse the colors.

But, what can you do, a co-worker of mine says the opposite happens to him.
He has white on black linux shells, ,open all day.


gravatar

40

permalink this comment nosferatu Wed Aug 23, 2006 at 11.30 pm

I MUCH prefer dark backgrounds. True, newspapers and such should use white backgrounds - there is something newspapery about it that sends out that “clean information”, no soiled data vibe.

But for websites with extensive content, light on dark is better. Makes sense: a white background is far more aggressive than a dark one, so for extensive reading it tires the eyes much more.

So, actually, it all comes down to usability. And i find it much more user friendly to tire my eyes less.

Dark backgrounds should be the norm 90% of the time.

nosferatu.


gravatar

41

permalink this comment Francois Carstens Wed Aug 23, 2006 at 11.41 pm

For those with trouble reading white on black - OS X - CTRL.ALT.COMMAND.8 and you’ve got instant black on white. Press it again to switch back.


gravatar

42

permalink this comment DeaPeaJay Thu Aug 24, 2006 at 03.50 am

I think the desiging for crappy screens thing is being blown a little bit out of proportion. What I understand Veerle to be saying is that on some monitors the site just isn’t going to look good. There’s not much you can do about it, it’s just a fact of life: junky manufacturers exist. The most that you can do about it is make sure its readable and move on. If it’s UNreadable, that’s another thing, but I don’t think that’s the issue.


gravatar

43

permalink this comment Gerry Quach Thu Aug 24, 2006 at 05.50 am

Fascinating discussion!

Personally I find that when my eyes are tired (which is most of the time!), I find lower-contrast sites such as Veerle’s to be more difficult to read. Generally speaking, I prefer dark text on light backgrounds, as long as the background isn’t pure white or otherwise too bright.

I love the aesthetic look of sites like Veerle’s blog or Daring Fireball, but I do find that it tires my eyes out if I spend more than a few minutes reading.

I think it helps to adjust the backlight brightness on your LCD—you’d want to turn up the brightness for light-on-dark sites, and turn down brightness for dark-on-light.

Veerle is spot-on about using quality screens. Most people love to diss Apple Cinema Displays, saying that they’re overpriced and crappy, but in my experience I would much rather use a calibrated ACD or EIZO screen all day rather than some generic consumer cheapie LCD.

Ideally, if I had the time and resources, I’d implement user-selectable stylesheets on my site with settings that can be stored via cookie.

And yes, photos do look nicer when placed against a dark background—for a good example, just see SlideShowPro. That’s why almost all high-end monitors and LCDs have black or neutral grey bezels. Maybe photo-sharing sites like Flickr could offer alternate stylesheets to cater for this?


gravatar

44

permalink this comment BVV Thu Aug 24, 2006 at 03.24 pm

I totally agree with you.

It’s all about compromises.

And in Belgium, we know what “compromise” is, a national speciality.


gravatar

45

permalink this comment Paul R. Redmond Thu Aug 24, 2006 at 04.47 pm

Veerle-

If you have a crappy screen you have to learn to deal with your mistake of buying one and we don’t have to compensate for you. That’s like saying because most people still watch 4:3 no 16:9 is allowed because the target audience is mostly 4:3.

You’ve reminded me of another thing--designing for screen resolutions. I remember even a few years ago that people were complaining if the design wasn’t built for 800 x 600 resolution. This was damning and pitiful, but it was something that was considered. Personally, iv’e been designing to accommodate 1024 x 768 min for years.


gravatar

46

permalink this comment Paul R. Redmond Thu Aug 24, 2006 at 05.04 pm

I don’t believe you can say “I don’t care what kind of screen people have, I’m designing for my screen.”.

If that were really true, you would be making websites that are “optimised for 1280x1024 and Safari on Mac”, and we know where that road takes us.

Bart-

I think you’re putting words into Veerle’s mouth. She never said that, nor would she be that ignorant! She is a witty professional designer.

I just think this whole dark on light, light on dark stuff is rediculous. Turn the stylesheet off if this is the case.

Anyway, what is exciting about IE 7, is css support for min/max width and height. They can now join the rest of us in fluid layouts. This will allow more flexability in screen widths and resolutions. Simplebits.com is a great example of how effective this can be for different resolutions.


gravatar

47

permalink this comment Bèr Fri Aug 25, 2006 at 09.04 am

A point-balance system of some sort might come to a resque. I use this a lot, though I haven’t found a real mathematical truth yet:

You award points to the importance you, your client, and the users assign to certain areas:
* readability
* accessability
* recognisability (should a blog look like a blog)
* SEO
* Speed of deployment/design
* Overall look
* layout / distribution / placement
* Color usage
etc.

Once you have all these points set besides eachother, I am certain anyone can make a good decision. Yes, that might mean a boring blak-on-white-kubric desig, but it can also mean a full flash based website.
Lets just not forget that every site has different aims, different needs and thus tries to achieve different things. If a site needs to lean heavy on design, then no-one should stop you from using dark backgrounds.

I would be interested if this can be made into some more general “design rating matrix”, though. Somthing that we all can use to build better sites.

Bèr


gravatar

48

permalink this comment Veerle Fri Aug 25, 2006 at 02.01 pm

Thanks for all your opinions and insight on the matter. I knew when I posted this article that not all people would agree with what I had to say. It might sound like I’m selfish and only think about designing to have it looks nice ‘only’ on ‘my screen’… but that’s not what I meant at all. People who know my work just know. It just come down to this: I don’t want to destroy the beauty of a design in favor of a bad or crappy screen. So if the user experience is less nice on a cheaper screen, well then this is not my fault.

To give a concrete example: my previous blog had a pattern in the background that looked perfect on a good screen. However on a crappy screen you didn’t see it ‘that’ much. So this pattern is a pattern, pure decoration. The rest was fine. I’m not going to alter that pattern to make it more visible on a crappy screen and have it look rather ‘crappy’ (too hard) on a good screen.


gravatar

49

permalink this comment Michael Tangen Fri Aug 25, 2006 at 03.15 pm

Hey Veerle. 

Don’t let the critics get you down.  I totally empathize from where you’re coming from.  As a web designer for our state government, I have to deal with conformity to “standards” all the time, which poses a near insurmountable challenge to make things fresh and lively.

While I don’t think I could integrate something so bold as light text on a dark background for government sites, I am continually pushing the envelope here.  That same mentality should be carried over into the business world and beyond as well#0151;pushing the envelope of creativity and not being afraid to stir up the pot a little.

Sorry for all the euphamisms, but hopefully you get the point.  And I agree with your thoughts about monitors...why compromise a great design because one person has a crappy monitor and they complain the loudest (unless it’s the CEO of the company you’re designing for) ;-)

Keep up the great posts.  I THOROUGHLY enjoy reading them in my daily blogroll.


gravatar

50

permalink this comment e-man Fri Aug 25, 2006 at 10.07 pm

I’ve been fiddling with the letter-spacing property and it’s amazing what even small increments as 0.02em will produce.
Good point about the crappy monitors, a lot of people have them (and IE without Cleartype enabled) and then complain why their text does not look as good as on my Mac, lol!


gravatar

51

permalink this comment Pickle Mon Aug 28, 2006 at 03.29 am

There is a lot to be said on readability and I think it could be argued for weeks, maybe even months. But we all see things differently. I see differently if I put my contact lenses instead of my glasses. Things are brighter with the lens on my eye.

Crappy screen exists too. When I go to future shop or best buy or any other electronics store, and walk in the screen aisle, I see the differences. That is how I bought my computer screen. I watch them for a good hour, they were all open and showing the same movie, and I went for the one that seemed the brightest and clearest to me. But that’s only true to my eye. Someone may prefer a viewsonic to a mac, or a mac to a dell, and we could also debate on that for many weeks.  Our perception of things will never be the same as the one of someone else.

As for the black/white - white/black debate… I like pineapples, my boyfriend doesn’t. Same goes for design I think. I could work in illustrator and photoshop for hours and hours, come up with what seems to be a piece of art to me, and half of you guys won’t like it. But I will still debate the best I can to make my point.

Veerle has done a pretty good job here, and I believe that she doesn’t have to prove herself anymore. She studied design, she’s been doing that for many years now, and this blog is her own personal. She is giving many helpful tips, making us have really nice conversations and debates, but to critique her work is, I think, really out of line. Like many said, if you don’t like it, turn the css off. This blog is meant to have fun and a good read.

Congrats to your blog Veerle!


gravatar

52

permalink this comment david Mon Aug 28, 2006 at 06.28 pm

I dont know Veerle, while i 100% agree with your argument as i am a design also and it hurts my heart to see people thinking that compromised design asthetic is the way to go vs. usibility.

but your ‘not my fault’ comments jsut dont fly with me, you cant expect the lay person to run out and buy a 8 or $900 monitor, simply because they want to experience a better web. dont get me wrong, I agree with you, but i think thats a bit over the top. most laypeople only use their computer to surf the web or check email, i think its a bit unrealistic to think that those people are going to buy new monitor cause they are missing something.

you should not have to compromise your design accourdingly, but that line of thining i think is a bit misplaced, but that just my opinion, not a statement of fact.

more to the topic i beleive that contrasting style sheets are an added bonus not a requirement, as long as the content can be accessed then usibility is all about personal preference from there. i happen to think that black text on a white background is the most eye soring configuration you can have, even books and newspapers dont use black on white text.

anyone who has working in on a news paper or on a book knows this, newsprint is almost always light grey, books are almost always off white. the only time you get truly black on white is velum(type of papaer used in newspapaers sometimes) and magazines, and even then, i think someone made a good point those are viewed with reflected light not illuminated light thus making it easier on the eyes.

last point, i guess my $600 a piece, dual 19’ plasma screens must be crappy cause i see a dark blue background instead of dark green? :)


gravatar

53

permalink this comment Veerle Mon Aug 28, 2006 at 09.48 pm

@david said:

you can’t expect the lay person to run out and buy a 8 or $900 monitor

I don’t know where you got the idea that a good monitor costs 8 or $900. For example the very good “Ultrasharp” ones from Dell have a sharp price. For a 19” one you only pay 319 Euro VAT incl. I have such a screen and they are great.


gravatar

54

permalink this comment david Tue Aug 29, 2006 at 01.43 am

Hey Veerle, I don’t know what the conversion from euros to dollars is but a good monitor, generally speaking is pricy, in comparison of say a $150 CRT :) or better yet, what most lay people get, is the $800 combo, with the cpu and monitor included, which is ususally a 2 or $300 monitor.

point being, dont expect the lay person to run out and buy a new monitor anytime soon, there will be those that do, to ‘keep up with the jones’-insert any commonly used last name- but thats not going to be the norm. and again I would not and have not adjusted my design accordingly outside of what i thought would simply just not work.

And for the record my $600 monitors where purchased 5 years ago, depreciation is a beast!

and for clearification sake, i really respect your work as a designer, and am on the same ‘side’ as you. i’m not a ditractor.


gravatar

55

permalink this comment emma Tue Aug 29, 2006 at 05.53 am

I agree with the points made by Verle and Roger but to ‘really’ spice it up a bit, try designing a site for dyslexics!! Their interpretation of colours throws all this out the window - an example, a lot of dyslexics can view and read text if on a purple or cream background but not on a white/black or black/white combo. ARRRGH!!!!!!!!


gravatar

56

permalink this comment Jeroen Tue Aug 29, 2006 at 10.57 pm

Gerry-

I love the aesthetic look of sites like Veerle’s blog or Daring Fireball, but I do find that it tires my eyes out if I spend more than a few minutes reading.

interesting… I’m reading this article @ 23.50 hrs and i must admit, i too have these tired eyes after reading… While in daytime (when i’m still fresh i guess?) i just love the ‘contrast ease’ and darker background of this blog! strange how this works!

but overall i believe that usage of black/white white/black also depends on the presented content at hand. like Nik (2nd post) said: photographs turn out pretty nice with darker backgrounds. and also text can be very ‘nice and designy’ with a darker background. and designy is not always a bad thing…


gravatar

57

permalink this comment stratagem Thu Aug 31, 2006 at 09.43 pm

I think the whole idea of jumping through hoops to make everone capable of viewing a site perfectly, ludicrus at best.

I don’t know how many times people beat themselves up for a personal website to have their site view perfectly in both IE and FF, let alone the slew of other browsers out there.

Personally, make the site you want to make.  If you have good content you will get good participation.  If the content is lacking, it won’t matter what it looks like.

Either way if a site is done correctly, it won’t matter if it’s dark on light or light on dark.  I think Veerle has done a fabulous job of proving that a darker background works just fine, and I don’t like dark background sites.  :)


gravatar

58

permalink this comment Nero Thu Aug 31, 2006 at 10.49 pm

Good Article. And now, please make your Theme public for download, or at least a variation of it. Again, now please!
Thanks


gravatar

59

permalink this comment david Fri Sep 1, 2006 at 01.30 pm

Veerle, i am wondering, how do you deal with comment spam, i pressed notify me offuture comments and this morning i got about 5 spammer comments from your post, buti don’t see them here. I am interested because i too am getting this sh&^ and since i am not using WP or TP (home grown here) cant seem to figure out how to stop this latest invasion.


gravatar

60

permalink this comment Jeff Fri Sep 1, 2006 at 02.21 pm

Ever tried reading a dark site on a laptop—outside? It’s just not possible.


gravatar

61

permalink this comment Rubwn Fri Sep 1, 2006 at 08.19 pm

Jeff, for me it’s also impossible to read a site with a white background like my own when I try surfing on my laptop outside.


gravatar

62

permalink this comment Gizmo Sat Sep 2, 2006 at 05.46 pm

Hi Veerle,

I have a dark theme for my wordpress website because I prefer to read bright fontcolors on dark backgrounds, but I also like light layouts.

It’s not important if the site uses dark or light themes, it’s important how it’s designed, both styles without whitespace are of course hard to read but if you use nice colors with a good contrast it’s indifferent which styles somebody use.

Many people are just crying when you got no standard white website like all blogs look alike now a days.

I really like your website and totally agree with your opinion.

Keep it up and take care ;)

best regards,
Danny, gizcore.com


gravatar

63

permalink this comment Jeff Fri Sep 8, 2006 at 11.32 am

It’s a fact that text is easier to read when it’s dark on light.  It’s also easier to read when it has serifs.  Your site goes against both of these things.  Does your site look perty? Why yes it does. :)

When designing It’s not always about what looks the prettiest but about solving problems.  Since this is a blog and it’s about readers reading I would have gone with a design that lessens the strain on readers eyes.  It could have totally looked just as good using a light background.


gravatar

64

permalink this comment Joey Sleaze Sun Sep 17, 2006 at 07.46 pm

I just always design everything with 8pt text in flashing neon pink over a detailed BG. Comic Sans works best.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist