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 con­trast freaks, stop telling me that default black (#000) text is a neces­sity on white back­grounds. It is not, I repeat, it is not. I will stop read­ing blogs and web sites that insist on defy­ing com­mon sense rules of design, leg­i­bil­ity and style. More con­trast does not result in de facto bet­ter readability.

If you use black (#000) for body text, think again. Think for cry­ing out loud! Change it to #333 right now. Hon­estly, any value between #666 and #333 is so much bet­ter than #000. Oh, and while you’re edit­ing your stylesheet any­way, do Andrei a favour and remove any instance of Tre­buchet, espe­cially as copy font. Do I agree with him that Tre­buchet must die? No. Do I think it’s not the best font around? Prob­a­bly. If noth­ing else I admire his effort to sac­ri­fice for the greater good of Design (yes, that’s spelled with a cap­i­tal “D”).

But, mis­rep­re­sent­ing your own wife. Ouch. Good luck fellow.

On another note I’d like to take the time to con­grat­u­late Dan on his won­der­ful tem­plate design for Blog­ger. Actu­ally, let me just con­grat­u­late every­one who worked on the Blog­ger redesign, espe­cially the folks at Adap­tive Path and the tal­ented Dou­glas Bow­man of Stopde­sign. Slick job guys! To close off the fes­tiv­i­ties I’ll point you to Dave Shea’s new cor­po­rate home. Sweet stuff, dude!

As it seems, it’s also the day to share a list of peo­ple that have influ­enced one’s design style or thoughts on design. So here we go, in no par­tic­u­lar order: Philippe Starck, Rem Kool­haas, Don­ald Nor­man, Hill­man Cur­tis, Joshua Davis, Dou­glas Bow­man, Jason Fried, Todd Dominey and Andrei Herasim­chuk (yeah, you just made the list, boy). But wait, my list would not be com­plete with­out men­tion­ing Dan Rubin, specif­i­cally. Actu­ally, I’m sure I for­got to include a bunch of peo­ple. Nev­er­mind. Bet­ter luck next year. Any­way, 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 actu­ally gives me headaches. so…it’s nice to see strong opin­ions 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 opti­mum “shade of dark” also depends on a vari­ety of other fac­tors, like the size of the font, whether antialias­ing 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 cho­sen #222 as I think its best read­able but not that “hard” in con­trast to the white bg.

    So… lis­ten to me peo­ple, 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 any­thing lighter than #333.

    Per­son­ally I use #222, which I think is a good bal­ance — it is black but not actu­ally black…

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

    If #000 on #fff hurts your eyes, you might want to con­sider adjust­ing the con­trast set­ting on your dis­play. That’s what it’s there for. O_o

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

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

    I would hes­i­tate to use any­thing that is less than 50% dif­fer­ent between bg and copy — for instance, I wouldn’t use any­thing less than a 50% black on a white bg, or 75% black on a 25% black bg.

    Not for me, but for the vis­i­tors to the sites I design. I would guess most wouldn’t even see the copy­right notice at the bot­tom of pages on this very site. :)

    In sum­mary — I agree for ME, but for my client’s vis­i­tors, I don’t think that it’s prac­ti­cal. How’s that for shifty? ;)

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

    Ummm, am I crazy or weren’t you using Tre­buchet as your body copy font on Super­flu­ous Ban­ter as recently as last week?

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

    You have to be kid­ding right? I’m not say­ing you have to use black, but for cry­ing out loud telling peo­ple not to use black at all is crazy. As it is many design­ers use fonts that are too damn light.

    There is noth­ing wrong with using black on white text. I mean, this site’s text seems a bit light to me and frankly, for me any­way, if it was black it’d be a tad eas­ier to read based on the way my machine dis­plays it.

    Lis­ten peo­ple, I think it’s fine to express your opin­ion, but when you start say­ing (or imply­ing) peo­ple have to do things a cer­tain way you’ve gone to far.

    No pun intended but 99.8% of Web design falls into a grey area — when you start try­ing to make rules by step­ping 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 clar­ify some things. First of all I need to real­ize that what I write will be taken seri­ously or atleast lit­er­ally. Was I not seri­ous? I was, to some extent. Do I think you should not use black (#000) text on a white back­ground? Of course not. Do I think #333 looks bet­ter and improves read­abil­ity? Yes. To me #000 has a cer­tain edge to it I do not like, or appre­ci­ate when read­ing. I also real­ize this is sub­ject to dif­fer­ences in dis­play qual­ity and type of mon­i­tor, not to men­tion eyesight.

    In com­mer­cial projects it is impor­tant every­one can eas­ily read the con­tent you have to offer. Period. To me #222 or #333 offers plenty con­trast on white back­grounds for per­fect leg­i­bil­ity. Keith, I admire how you always seem to find the right words and offer a bal­anced view. That alone makes my some­what ironic state­ment worth­while. Some­times you need to take my posts with a grain of salt. That said I like to gen­er­ate dis­cus­sion; an unbal­anced and biased state­ment will do just that.

    As for the whole Tre­buchet deba­cle please address your con­cerns to Andrei. Again, this was slightly tongue-in-cheek. I think there’s noth­ing wrong with Tre­buchet as such and it cer­tainly 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 big­ger pic­ture 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 dis­cus­sion, that is for sure. You and Andrei actu­ally forced me to rush a post I’d been work­ing on.

    It’s called Web Design­ers on A Fence and it relates strongly to alot of what has been talked about here and else­where today.

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

    Puh-lease. Black, and any vari­ant is over-rated. *insert wink­ing here*

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

    (Yes, my cur­rent site’s text is a light pinky-hue against a pur­p­ley back­ground. Before, it was a dark blue against a white bg. And before that a maroon red against a burnt yel­low, and… down with black for body copy!) :D

    That being said, I actu­ally do like #333 body copy text. On my per­sonal web­sites, I just like to exper­i­ment since there is no room for that in the cor­po­rate world. :-)

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

    Hmm.. I’ve had this dis­cus­sion many times whilst try­ing to redesign the Python web­site. Con­trast is always raised as “the higher the bet­ter” and when I used #333 I got the reac­tion “I can hardly read that”.

    Then I’m told that I should leave the link colour set­tings along. Hang on though, the default link text color (#00c) is only a 60% con­trast with a white back­ground. The vis­ited text colour is only a 69% contrast.

    Google even uses #77c for it’s “cached” and “sim­i­lar” links, which are only an incred­i­ble 36% con­trast. Com­pared with this, #333 at 80% con­trast seems stark! #222 is 87% contrast.

    Mr Jakob Niel­son even puts these default vis­ited link on a coloured back­grond mak­ing an abom­inable 38% contrast.

    It gets worse than this how­ever, the bread­rumb on the yel­low back­ground is only a shock­ing 20% contrast.

    Who’s the big­ger usabil­ity crim­i­nal then, Jakob or Dan?

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

    “Was I not seri­ous? I was, to some extent.”

    Of course every­one assumed you were being seri­ous — you posted it with­out pref­ace or hint of sar­casm. As far as I know, this site doesn’t have a rep­u­ta­tion for par­ody. With all the nit­picky crap peo­ple unre­lent­ingly spew 24–7 (“That site’s footer’s copy­right graphic looks ter­ri­ble in Opera 1.2.3 1/4e^4″), hav­ing a prob­lem with black text on a white back­ground seems a lit­tle silly to me. Curi­ous — what is your default on, say, your mail client? How about IM? Kazaa? iTunes? Do you go into each and every one of these pro­grams and change the contrast?

    I think from now on, I will declare war against those who use header graph­ics! 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 back­ground is much bet­ter to read then using #333 as color. Espe­cially when read­ing from a LCD/Laptop. It takes me much more time read­ing this cur­rent post because it’s not in black.

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

    I seem to remem­ber from my Boe­ing days that the best color on color scheme for read­abil­ity was yel­low 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.

    Actu­ally, 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 eas­ier on all you sheep.

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

    Adam — I defin­i­tively do post seri­ous stuff here, most of the time. But give me a break, at times I just need to rant, be biased and unbal­anced. This may seem like a silly dis­cus­sion. Yet talk­ing about con­trast in gen­eral is not silly at all, in my opin­ion. Note: yes, I do change the con­trast in some appli­ca­tions if there’s an option to do so. Fur­ther­more, my mon­i­tor is prob­a­bly set brighter than default.

    I strongly think that provo­ca­tion (at times) can lead to insight­ful dis­cus­sion and result in an informed and edu­cated thread. Blogs are per­fect means of com­mu­ni­ca­tion and debate. My atti­tude in a team or pro­fes­sional envi­ron­ment would have been different.

    Irony and sar­casm are not nec­es­sar­ily par­ody. More­over I’m not chang­ing my mind on this. I still pre­fer #333 to #000. Though hypo­thet­i­cally speak­ing I would not feel silly admit­ting I am wrong. Hit me with good argu­ments and a ratio­nale and I’ll be happy to change my opin­ion. That said, if some­one takes my rant too seri­ously I’ll be glad to elab­o­rate, not per se change my mind.

    For the record: I do not con­demn #000 for text. There’s no way I would stop read­ing blogs or web sites that use this color. That would pretty much elim­i­nate the whole web. I thought that was enough of a hint to indi­cate some sarcasm.

    Sweet Jesus — I’m try­ing to decide whether your com­ment is funny or just use­less. I’m afraid I’ll have to go with the lat­ter since you don’t really add much to this dis­cus­sion. Free­dom of speech, right?

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

    I like that Zeld­man has a con­trast adjust­ment on his page that allows for the green-ish back­ground to show the font a tad darker for a lower con­trast mon­i­tor. Maybe in addi­tion to larger and smaller font sizes in a style switcher, peo­ple should con­sider a con­trast adjust­ment, espe­cially given the pop­u­lar­ity of lap­tops, and the price drops recently in LCD mon­i­tors. It could be an acces­si­bil­ity issue to look into. I know I haven’t seen my site on a lap­top yet, and though I’m a #000 on #fff kind of guy, it might be too high-contrast for some­one on a brighter mon­i­tor than my Gate­way cheapie spe­cial 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 opin­ion, not one I share. As I said on Andrei’s site, I don’t go with peo­ple who use a “Jakob Niel­son” attitude.

    Use what­ever colour you want on your web site, much like he has found a suit­able colour for him.

    Oh and… BLOODY HELL the font-size set for your com­ments sec­tion is absolutely tiiiiiiiiiiiiiny.

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

    Sorry for the empha­sis of “bloody hell”, it just appeared so tiny in the “add your com­ment” bit, so it looked alright :P

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

    Robert — Good com­ments. What you said about the Nielsen atti­tude defin­i­tively made me think. That said, my state­ment was not meant to be fol­lowed or inter­preted as a dogma, far from it. Obvi­ously there’s some­thing wrong with my sense of sar­casm or irony, judg­ing from the comments.

    I think you’re absolutely right about the tiny type in the com­ment 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 cor­rect your prob­lem (it might slightly), but you should set your font-size to 100% in the body dec­la­ra­tion. Just to over­ride crappy UA set­tings. It cor­rects font size prob­lems in cer­tain browsers that ren­der 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 dis­ap­pears on my lap­top screen. #666 on light grey is even worse. Some­times I yearn for the color con­trol print design­ers take for granted. Until screen cal­i­bra­tions become more con­sis­tent (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 Wey­ert above, on my lap­top LCD the text on this page is absolutely headache inducing…#000/#FFF is MUCH more crisp and clear. Repeated the test with my cal­i­brated 21″ Nokia mon­i­tor and although the #333 text was bet­ter there I still pre­fer the #000 text. YMMV.

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

    Per­son­ally the worst thing for me is #FFF white back­grounds — they are so bright (my room doesn’t get much light and I often surf at night.

    I end up hav­ing to turn my mon­i­tor bright­ness 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 com­bi­na­tions are very bad.

    The amound of black and white is not the only way to cre­ate con­trast, and too much con­trast is a bad thing for human eyes — spe­cially on light emmit­ing media.

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

    Funny no one’s men­tioned this yet — what about keep­ing text at #000 and bump­ing up the back­ground? You can even stay under #ccc if it’s too gray and go with some­thing nearly unnot­i­ca­ble like #f5f5f5 (nearly because it’ll still soften the text with­out too many peo­ple notic­ing the dif­fer­ence, if that’s you’r thing) or like the com­ments box on this here page, use a delec­table color of a very pale hue instead.

    And for the trolls that con­sider a dis­cus­sion about text con­trast below their cool­ness radar, work­ing web design­ers under­stand that this is the whole point of the stuff we put up — mak­ing peo­ple read our ideas and influ­enc­ing them. The graph­ics are there just to shep­herd the eyes along. Call me a HTMin­i­maL­ist, I don’t care…

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

    Just from look­ing at this site you should be able to judge my per­sonal opin­ion on color and con­trast (though remem­ber, this is a per­sonal site, which allows me to do things that wouldn’t nec­es­sar­ily fly in a com­mer­cial application).

    As for the small text in the com­ment area: I’ve been mean­ing to fix that for ages, so my apolo­gies to any­one who’s had to squint in order to com­ment here :) The issue appears to be fixed (tested in Safari, Fire­fox, Mozilla and IE/Win).

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

    Don’t for­get that Macs and PCs have dif­fer­ent 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 com­ments and all focus on the text color when it comes to leg­i­bil­ity of online copy.

    Instead of pro­mot­ing #333 text on a white back­ground, it would be much, much bet­ter to pro­mote black text on a #CCC or #DDD back­ground. Why’s that? That’s because #FFF as a back­ground color is far more strin­gent on the eyes than for instance #DDD. (Con­sid­er­ing that at most 15% of your web page is actu­ally cov­ered 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 leg­i­bil­ity. And that’s the result of 400 years of devel­op­ment, exper­i­ments and experience.

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

    Hmmm­rpf. You hit the ‘post this com­ment’ but­ton and read within 10 sec­onds that some­one 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 any­body, but I find this rather idiotic.

    Design is gen­er­ally self­ish, and reflects the design­ers own aes­thetic, so why try to force them to change it? And I don’t think they feel at all threat­ened because you won’t read their blogs because of the con­trast between back­ground and text color.

    I could agree with you if the argue­ment were based on some­thing that had a right way and a wrong way of going about it, but there is no set right and wrong text or back­ground color. I think the text in this com­ments 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 pre­vi­ous post I really hate pure white pages!

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

    Any­body ever told you that your hov­ered over links have a stinky color? Weel, con­sider your­self told.