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.
Comments
36 responses to “When Black Is Not Black”
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
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;)
Silence! :O
The colour of text on a white-background should be between #046 and #675. >:|
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…
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
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? ;)
Ummm, am I crazy or weren’t you using Trebuchet as your body copy font on Superfluous Banter as recently as last week?
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.
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.
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.
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. :-)
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?
“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.
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.
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.
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.
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?
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.
Funny, I changed my body text to #333 a week ago. I think it made the text a tad gentler.
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.
Sorry for the emphasis of “bloody hell”, it just appeared so tiny in the “add your comment” bit, so it looked alright :P
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.
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.
#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.
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.
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!
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.
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…
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).
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.
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.
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?
I use #333 with the palest (I mean palest) shade of grey-blue I can find. Looks brilliant.
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?
@Jeroen Visser :-) keep going up to my previous post I really hate pure white pages!
Anybody ever told you that your hovered over links have a stinky color? Weel, consider yourself told.