About this site's lack of design: Yes, it's supposed to look this way — I'm helping create a new sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy since 1977

|

When Black Is Not Black

Stop using black for copy text. Just stop. It hurts my eyes. All you contrast freaks, stop telling me that default black (#000) text is a necessity on white backgrounds. It is not, I repeat, it is not. I will stop reading blogs and web sites that insist on defying common sense rules of design, legibility and style. More contrast does not result in de facto better readability.

If you use black (#000) for body text, think again. Think for crying out loud! Change it to #333 right now. Honestly, any value between #666 and #333 is so much better than #000. Oh, and while you’re editing your stylesheet anyway, do Andrei a favour and remove any instance of Trebuchet, especially as copy font. Do I agree with him that Trebuchet must die? No. Do I think it’s not the best font around? Probably. If nothing else I admire his effort to sacrifice for the greater good of Design (yes, that’s spelled with a capital “D”).

But, misrepresenting your own wife. Ouch. Good luck fellow.

On another note I’d like to take the time to congratulate Dan on his wonderful template design for Blogger. Actually, let me just congratulate everyone who worked on the Blogger redesign, especially the folks at Adaptive Path and the talented Douglas Bowman of Stopdesign. Slick job guys! To close off the festivities I’ll point you to Dave Shea’s new corporate home. Sweet stuff, dude!

As it seems, it’s also the day to share a list of people that have influenced one’s design style or thoughts on design. So here we go, in no particular order: Philippe Starck, Rem Koolhaas, Donald Norman, Hillman Curtis, Joshua Davis, Douglas Bowman, Jason Fried, Todd Dominey and Andrei Herasimchuk (yeah, you just made the list, boy). But wait, my list would not be complete without mentioning Dan Rubin, specifically. Actually, I’m sure I forgot to include a bunch of people. Nevermind. Better luck next year. Anyway, I’ll be away for a few days, catch you later.

This item was posted by Dan Rubin on Tuesday, May 11th, 2004.

Categories:

You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

36 comments on “When Black Is Not Black”

  1. Posted by patrick h. lauke on Tuesday, May 11th, 2004.

    on the other hand, i hate sites that use #333-#666 instead of full on black on a white background…for my own tastes, it’s far too soft and actually gives me headaches. so…it’s nice to see strong opinions being posted as if they were an absolute rule set in stone, but each to their own i guess…

    also, i would posit that the optimum “shade of dark” also depends on a variety of other factors, like the size of the font, whether antialiasing is enabled, etc

  2. Posted by EdiciusTsaf on Tuesday, May 11th, 2004.

    Well… I just tested it… And I think #333 should be max value on white bg…

    #666 really sucks!

    I’ve chosen #222 as I think its best readable but not that “hard” in contrast to the white bg.

    So… listen to me people, choose #000-#333 as font color;)

  3. Posted by Conan on Tuesday, May 11th, 2004.

    Silence! :O

    The colour of text on a white-background should be between #046 and #675. >:|

  4. Posted by Thomas Baekdal on Tuesday, May 11th, 2004.

    Although I agree that solid black on white is hard to read, so is anything lighter than #333.

    Personally I use #222, which I think is a good balance – it is black but not actually black…

  5. Posted by Anonymous Mouse on Tuesday, May 11th, 2004.

    If #000 on #fff hurts your eyes, you might want to consider adjusting the contrast setting on your display. That’s what it’s there for. O_o

  6. Posted by Dave Simon on Tuesday, May 11th, 2004.

    I suppose it depends on the quality and age of eyes. I’ve had LASIK and don’t mind text as small as 10px for body copy. But I happen to know that most of my older clients (50+) respond that 10px isn’t big enough, they want 12px for body copy.

    I would hesitate to use anything that is less than 50% different between bg and copy – for instance, I wouldn’t use anything less than a 50% black on a white bg, or 75% black on a 25% black bg.

    Not for me, but for the visitors to the sites I design. I would guess most wouldn’t even see the copyright notice at the bottom of pages on this very site. :)

    In summary – I agree for ME, but for my client’s visitors, I don’t think that it’s practical. How’s that for shifty? ;)

  7. Posted by Joey Bean on Tuesday, May 11th, 2004.

    Ummm, am I crazy or weren’t you using Trebuchet as your body copy font on Superfluous Banter as recently as last week?

  8. Posted by Keith on Tuesday, May 11th, 2004.

    You have to be kidding right? I’m not saying you have to use black, but for crying out loud telling people not to use black at all is crazy. As it is many designers use fonts that are too damn light.

    There is nothing wrong with using black on white text. I mean, this site’s text seems a bit light to me and frankly, for me anyway, if it was black it’d be a tad easier to read based on the way my machine displays it.

    Listen people, I think it’s fine to express your opinion, but when you start saying (or implying) people have to do things a certain way you’ve gone to far.

    No pun intended but 99.8% of Web design falls into a grey area — when you start trying to make rules by stepping into that .01 % on either side you’ve really gone too far.

  9. Posted by Didier Hilhorst on Tuesday, May 11th, 2004.

    Ok, it seems I need to clarify some things. First of all I need to realize that what I write will be taken seriously or atleast literally. Was I not serious? I was, to some extent. Do I think you should not use black (#000) text on a white background? Of course not. Do I think #333 looks better and improves readability? Yes. To me #000 has a certain edge to it I do not like, or appreciate when reading. I also realize this is subject to differences in display quality and type of monitor, not to mention eyesight.

    In commercial projects it is important everyone can easily read the content you have to offer. Period. To me #222 or #333 offers plenty contrast on white backgrounds for perfect legibility. Keith, I admire how you always seem to find the right words and offer a balanced view. That alone makes my somewhat ironic statement worthwhile. Sometimes you need to take my posts with a grain of salt. That said I like to generate discussion; an unbalanced and biased statement will do just that.

    As for the whole Trebuchet debacle please address your concerns to Andrei. Again, this was slightly tongue-in-cheek. I think there’s nothing wrong with Trebuchet as such and it certainly doesn’t deserve the same fate as Comic Sans.

  10. Posted by Keith on Tuesday, May 11th, 2004.

    Hey man, of course I know you see the bigger picture with this, but when you open up with “Stop using black for copy text. Just stop.” I’ve got to chime in, you know that.

    These are good topic for discussion, that is for sure. You and Andrei actually forced me to rush a post I’d been working on.

    It’s called Web Designers on A Fence and it relates strongly to alot of what has been talked about here and elsewhere today.

  11. Posted by Lea on Tuesday, May 11th, 2004.

    Puh-lease. Black, and any variant is over-rated. *insert winking here*

    Come on, people. Why not try a dark blue color instead? Or how about color, period? Why does body copy have to be a black or a variant? :-) Yawnnnnn.

    (Yes, my current site’s text is a light pinky-hue against a purpley background. Before, it was a dark blue against a white bg. And before that a maroon red against a burnt yellow, and… down with black for body copy!) :D

    That being said, I actually do like #333 body copy text. On my personal websites, I just like to experiment since there is no room for that in the corporate world. :-)

  12. Posted by Tim Parkin on Tuesday, May 11th, 2004.

    Hmm.. I’ve had this discussion many times whilst trying to redesign the Python website. Contrast is always raised as “the higher the better” and when I used #333 I got the reaction “I can hardly read that”.

    Then I’m told that I should leave the link colour settings along. Hang on though, the default link text color (#00c) is only a 60% contrast with a white background. The visited text colour is only a 69% contrast.

    Google even uses #77c for it’s “cached” and “similar” links, which are only an incredible 36% contrast. Compared with this, #333 at 80% contrast seems stark! #222 is 87% contrast.

    Mr Jakob Nielson even puts these default visited link on a coloured backgrond making an abominable 38% contrast.

    It gets worse than this however, the breadrumb on the yellow background is only a shocking 20% contrast.

    Who’s the bigger usability criminal then, Jakob or Dan?

  13. Posted by Adam on Tuesday, May 11th, 2004.

    “Was I not serious? I was, to some extent.”

    Of course everyone assumed you were being serious – you posted it without preface or hint of sarcasm. As far as I know, this site doesn’t have a reputation for parody. With all the nitpicky crap people unrelentingly spew 24-7 (“That site’s footer’s copyright graphic looks terrible in Opera 1.2.3 1/4e^4”), having a problem with black text on a white background seems a little silly to me. Curious – what is your default on, say, your mail client? How about IM? Kazaa? iTunes? Do you go into each and every one of these programs and change the contrast?

    I think from now on, I will declare war against those who use header graphics! Who is with me? Oh, no one? In that case, I was just kidding.

  14. Posted by Weyert de Boer on Tuesday, May 11th, 2004.

    I think black on a white background is much better to read then using #333 as color. Especially when reading from a LCD/Laptop. It takes me much more time reading this current post because it’s not in black.

  15. Posted by Keith on Tuesday, May 11th, 2004.

    I seem to remember from my Boeing days that the best color on color scheme for readability was yellow on blue. So if you want to take it as far as you can contrast-wise….

    Yeuch.

  16. Posted by sweet jesus on Tuesday, May 11th, 2004.

    Actually, God appeared before me in a vision to weigh in on this stuff. He pretty much said you all are wrong, and I’m right, and just to like, trust me when I say shit like “black isn’t as good as Trebuchet.”

    That should make it easier on all you sheep.

  17. Posted by Didier Hilhorst on Tuesday, May 11th, 2004.

    Adam — I definitively do post serious stuff here, most of the time. But give me a break, at times I just need to rant, be biased and unbalanced. This may seem like a silly discussion. Yet talking about contrast in general is not silly at all, in my opinion. Note: yes, I do change the contrast in some applications if there’s an option to do so. Furthermore, my monitor is probably set brighter than default.

    I strongly think that provocation (at times) can lead to insightful discussion and result in an informed and educated thread. Blogs are perfect means of communication and debate. My attitude in a team or professional environment would have been different.

    Irony and sarcasm are not necessarily parody. Moreover I’m not changing my mind on this. I still prefer #333 to #000. Though hypothetically speaking I would not feel silly admitting I am wrong. Hit me with good arguments and a rationale and I’ll be happy to change my opinion. That said, if someone takes my rant too seriously I’ll be glad to elaborate, not per se change my mind.

    For the record: I do not condemn #000 for text. There’s no way I would stop reading blogs or web sites that use this color. That would pretty much eliminate the whole web. I thought that was enough of a hint to indicate some sarcasm.

    Sweet Jesus — I’m trying to decide whether your comment is funny or just useless. I’m afraid I’ll have to go with the latter since you don’t really add much to this discussion. Freedom of speech, right?

  18. Posted by Pete on Wednesday, May 12th, 2004.

    I like that Zeldman has a contrast adjustment on his page that allows for the green-ish background to show the font a tad darker for a lower contrast monitor. Maybe in addition to larger and smaller font sizes in a style switcher, people should consider a contrast adjustment, especially given the popularity of laptops, and the price drops recently in LCD monitors. It could be an accessibility issue to look into. I know I haven’t seen my site on a laptop yet, and though I’m a #000 on #fff kind of guy, it might be too high-contrast for someone on a brighter monitor than my Gateway cheapie special can handle.

  19. Posted by Johan Svensson on Wednesday, May 12th, 2004.

    Funny, I changed my body text to #333 a week ago. I think it made the text a tad gentler.

  20. Posted by Robert Lofthouse on Wednesday, May 12th, 2004.

    It’s his opinion, not one I share. As I said on Andrei’s site, I don’t go with people who use a “Jakob Nielson” attitude.

    Use whatever colour you want on your web site, much like he has found a suitable colour for him.

    Oh and… BLOODY HELL the font-size set for your comments section is absolutely tiiiiiiiiiiiiiny.

  21. Posted by Robert Lofthouse on Wednesday, May 12th, 2004.

    Sorry for the emphasis of “bloody hell”, it just appeared so tiny in the “add your comment” bit, so it looked alright :P

  22. Posted by Didier Hilhorst on Wednesday, May 12th, 2004.

    Robert — Good comments. What you said about the Nielsen attitude definitively made me think. That said, my statement was not meant to be followed or interpreted as a dogma, far from it. Obviously there’s something wrong with my sense of sarcasm or irony, judging from the comments.

    I think you’re absolutely right about the tiny type in the comment box. I have no idea why it is that small. I’ll ask Dan to take a look at it.

  23. Posted by Robert Lofthouse on Wednesday, May 12th, 2004.

    This won’t correct your problem (it might slightly), but you should set your font-size to 100% in the body declaration. Just to override crappy UA settings. It corrects font size problems in certain browsers that render your font-size a lot smaller than what it should be.

    I do it for every web site i have created.

    I thought it might be to do with nested ems, but I haven’t had much time to look through your css and source code yet.

  24. Posted by James Craig on Wednesday, May 12th, 2004.

    #333 seems fine, but #666 on white disappears on my laptop screen. #666 on light grey is even worse. Sometimes I yearn for the color control print designers take for granted. Until screen calibrations become more consistent (think “hell freezes over”), I’m gonna stick with some high-contrast body text.

  25. Posted by Gregory Markle on Wednesday, May 12th, 2004.

    I have to agree with Weyert above, on my laptop LCD the text on this page is absolutely headache inducing…#000/#FFF is MUCH more crisp and clear. Repeated the test with my calibrated 21″ Nokia monitor and although the #333 text was better there I still prefer the #000 text. YMMV.

  26. Posted by LazyJim on Wednesday, May 12th, 2004.

    Personally the worst thing for me is #FFF white backgrounds – they are so bright (my room doesn’t get much light and I often surf at night.

    I end up having to turn my monitor brightness up and down like a yo-yo going through all the sites!

  27. Posted by LazyJim on Wednesday, May 12th, 2004.

    Also black on white (or vise-versa) and many other combinations are very bad.

    The amound of black and white is not the only way to create contrast, and too much contrast is a bad thing for human eyes – specially on light emmiting media.

  28. Posted by Al Abut on Wednesday, May 12th, 2004.

    Funny no one’s mentioned this yet – what about keeping text at #000 and bumping up the background? You can even stay under #ccc if it’s too gray and go with something nearly unnoticable like #f5f5f5 (nearly because it’ll still soften the text without too many people noticing the difference, if that’s you’r thing) or like the comments box on this here page, use a delectable color of a very pale hue instead.

    And for the trolls that consider a discussion about text contrast below their coolness radar, working web designers understand that this is the whole point of the stuff we put up – making people read our ideas and influencing them. The graphics are there just to shepherd the eyes along. Call me a HTMinimaList, I don’t care…

  29. Posted by Dan Rubin on Wednesday, May 12th, 2004.

    Just from looking at this site you should be able to judge my personal opinion on color and contrast (though remember, this is a personal site, which allows me to do things that wouldn’t necessarily fly in a commercial application).

    As for the small text in the comment area: I’ve been meaning to fix that for ages, so my apologies to anyone who’s had to squint in order to comment here :) The issue appears to be fixed (tested in Safari, Firefox, Mozilla and IE/Win).

  30. Posted by Jake Badger on Friday, May 14th, 2004.

    Don’t forget that Macs and PCs have different gamma. So while #666 might look fine under IE 6 on the PC, it’s going to be pretty washed out under Safari on the Mac.

  31. Posted by Jeroen Visser on Tuesday, May 18th, 2004.

    It’s odd, to say the least: 30 comments and all focus on the text color when it comes to legibility of online copy.

    Instead of promoting #333 text on a white background, it would be much, much better to promote black text on a #CCC or #DDD background. Why’s that? That’s because #FFF as a background color is far more stringent on the eyes than for instance #DDD. (Considering that at most 15% of your web page is actually covered with text, the other 85% would be white to a large extent, right?)

    Ever seen a book printed in an 80% halftone on bright white paper? No. Books rely on the paper being off-white to improve legibility. And that’s the result of 400 years of development, experiments and experience.

  32. Posted by Jeroen Visser on Tuesday, May 18th, 2004.

    Hmmmrpf. You hit the ‘post this comment’ button and read within 10 seconds that someone has observed exactly the same as you, just three posts or six days earlier. ;-/

    @Al Abut: sorry ’bout that! :-) Join the club, then. Club soda?

  33. Posted by Ben on Wednesday, May 19th, 2004.

    I use #333 with the palest (I mean palest) shade of grey-blue I can find. Looks brilliant.

  34. Posted by Sykil on Friday, May 21st, 2004.

    No offense to anybody, but I find this rather idiotic.

    Design is generally selfish, and reflects the designers own aesthetic, so why try to force them to change it? And I don’t think they feel at all threatened because you won’t read their blogs because of the contrast between background and text color.

    I could agree with you if the arguement were based on something that had a right way and a wrong way of going about it, but there is no set right and wrong text or background color. I think the text in this comments box is too small, but who am I to force you to change that?

  35. Posted by LazyJim on Sunday, May 30th, 2004.

    @Jeroen Visser :-) keep going up to my previous post I really hate pure white pages!

  36. Posted by Brokl on Thursday, July 8th, 2004.

    Anybody ever told you that your hovered over links have a stinky color? Weel, consider yourself told.