Design Tip: Never Use Black(ianstormtaylor.com)
ianstormtaylor.com
Design Tip: Never Use Black
http://ianstormtaylor.com/design-tip-never-use-black/
219 comments
Funny to see this ranked right above Pulse's post: http://news.ycombinator.com/item?id=4360756
Erm... The "absolute black" on your screen isn't absolute black either...
to all the commenters arguing against the point... this article isnt for you. it's for people who just through everything up as #000 and #FFF.
It's for the people who desperately need things like bootstrap.
It's for the people who desperately need things like bootstrap.
Good read. I came to this exact realisation myself not too long ago too. A hint of blue in your greys makes them much more appealing than pure grey.
Reminds me of the time I was looking through a page wondering how the designer got the greys to look so good. I was surprised when I saw the css class called "bluish-grey", and I suddenly realized he had been using a blue tint and I hadn't really noticed. (He also used #333 for blacks, which looked really good, and I've been using ever since).
Unless, you know, you want highly readable text. In which case there's nothing better than pure black, as your text color or as your background (but not both at once, please.)
No, that's the whole point of the article! Pure black text on a pure white blackground is too much contrast, which is uncomfortable for the eye over a long period of time. It's bad for readability.
Use dark gray on white, or black on light gray, but don't use pure black on pure white. It's too much.
Remember, the contrast between white and black on computer monitors is greater than on the printed page, because computer-monitor white is brighter than a page usually.
The printed page only achieves this level of high-contrast when you're in broad daylight, like on the beach. And of course, most people wear sunglasses in that case, because it's too much.
(Of course, there are exceptions to every graphic design "rule", but avoiding pure black text on a pure white background is pretty standard one for webpages.)
Use dark gray on white, or black on light gray, but don't use pure black on pure white. It's too much.
Remember, the contrast between white and black on computer monitors is greater than on the printed page, because computer-monitor white is brighter than a page usually.
The printed page only achieves this level of high-contrast when you're in broad daylight, like on the beach. And of course, most people wear sunglasses in that case, because it's too much.
(Of course, there are exceptions to every graphic design "rule", but avoiding pure black text on a pure white background is pretty standard one for webpages.)
> Remember, the contrast between white and black on computer monitors is greater than on the printed page, because computer-monitor white is brighter than a page usually.
Only if the lights are off in the room.
There may be such a thing as too much contrast. I haven't encountered it. But it doesn't make the text completely unreadable the way too little contrast does. When I copy+paste the text of a website into a text editor, it's always because the contrast was too low.
When it doubt, increase contrast.
Only if the lights are off in the room.
There may be such a thing as too much contrast. I haven't encountered it. But it doesn't make the text completely unreadable the way too little contrast does. When I copy+paste the text of a website into a text editor, it's always because the contrast was too low.
When it doubt, increase contrast.
you're attacking a straw man. he did not mention pure white. the eye-hurt is because of the pure white, not the pure black.
pure black on light gray does not hurt my eyes, while dark gray on pure white does, after a while, late at night.
pure black on light gray does not hurt my eyes, while dark gray on pure white does, after a while, late at night.
So at what point did I advocate pure black on pure white? Please reread.
Plus some colors aren't readable on pure black. Dark blue or dark red, for instance, are very difficult to read on a pure black background. (I used to use a pure black background for my terminal windows and switched it to a dark gray for this reason).
I find too many web pages go the other way and use a light gray for the text. The text looks washed out. Too little contrast is as bad as too much.
The risk when using grays instead of black and white is that what looks perfectly readable on the writer's monitor may not look good at all on the reader's. The more you rely on midtones, including grayscale-based design choices, the more you are at the mercy of the end user's probably-completely-screwed-up monitor.
Many of us who use multiple monitors on our PCs are all too familiar with how hard it is to achieve consistency when dragging a window between displays. Every time I swap out a monitor on my main PC, it usually takes me about an hour of screwing around with the Nvidia control panel before I'm satisfied with the match between my new monitor and the existing one(s). I'd guess that most users with only a single monitor aren't even aware that they can change the brightness, contrast, and gamma of individual RGB components.
What that means is that spending hours tweaking your design for "just the right contrast" is guaranteed to be a waste of time. Web designers working in the real world need to make conservative choices, and that means higher contrast is almost always better than lower.
Many of us who use multiple monitors on our PCs are all too familiar with how hard it is to achieve consistency when dragging a window between displays. Every time I swap out a monitor on my main PC, it usually takes me about an hour of screwing around with the Nvidia control panel before I'm satisfied with the match between my new monitor and the existing one(s). I'd guess that most users with only a single monitor aren't even aware that they can change the brightness, contrast, and gamma of individual RGB components.
What that means is that spending hours tweaking your design for "just the right contrast" is guaranteed to be a waste of time. Web designers working in the real world need to make conservative choices, and that means higher contrast is almost always better than lower.
Even with good monitors, some of us are tired of the trendiness of greyscale designs and see them as just as dated as it is using green text on black to suggest 'hacker'.
Oh can we please bring back the green-on-black? I VASTLY prefer it to the greyish-on-greyish! :)
But now I wonder, green-on-black is of course based on the old CRT monitors. But in those days you also had orange-on-black monitors, is there any reason why that never caught on in hacker circles?
Or was the green-on-black just that much more ubiquitous. I gotta admit, I did write my first code on a classic green-on-black display ... but friends of me had different models of computers and just as many were orange-on-black (or very early colour models and of course TV monitors).
But now I wonder, green-on-black is of course based on the old CRT monitors. But in those days you also had orange-on-black monitors, is there any reason why that never caught on in hacker circles?
Or was the green-on-black just that much more ubiquitous. I gotta admit, I did write my first code on a classic green-on-black display ... but friends of me had different models of computers and just as many were orange-on-black (or very early colour models and of course TV monitors).
Absolutely. Too much contrast is bad for long-term readability, but too little contrast is bad for short-term readability!
Finding the right level of contrast is just as important as finding the right font size, the right width for your text column, the right typeface, etc...
Finding the right level of contrast is just as important as finding the right font size, the right width for your text column, the right typeface, etc...
What we need is a javascript library that slowly lightens the text over time :P Starts off black and moves to lighter shades the longer you're reading the page.
I'm only kidding, but it would be sorta interesting.
I'm only kidding, but it would be sorta interesting.
not exactly that, but related: http://stereopsis.com/flux/
There's also redshift: http://jonls.dk/redshift/
those tools are really nice, it's just that I use graphics programs and other tools that really benefit from an accurate depiction of colour way too often. even websites that talk about colours. for instance I'd have to disable flux before I can trust the colours in the images of this particular article, right?
and flux had like what, three configuration sliders or so? this redshift program seems better because at least it's scriptable in its "one-shot" modus.
I don't know how, but it would be great if someone could come up with a tool that does for your eyes what Flux does, but on the other hand doesn't muck up applications and instances that really do benefit from an accurate depiction of colour. If someone is looking for a "problem that needs solving", here it is :)
and flux had like what, three configuration sliders or so? this redshift program seems better because at least it's scriptable in its "one-shot" modus.
I don't know how, but it would be great if someone could come up with a tool that does for your eyes what Flux does, but on the other hand doesn't muck up applications and instances that really do benefit from an accurate depiction of colour. If someone is looking for a "problem that needs solving", here it is :)
Remember that you can arbitrarily tweak contrast with monitor and ambient light -- I'm reading tons of science papers which are always black-on-white and few minutes spent on setup made reading a pleasure. IMO the real problem is that the default setting in most devices is a mixture of inhumane brightness and grotesque oversaturation -- thus designers try to fix a virtual problem hurting people with a proper setup.
There's another reason that good design rarely uses the full range of contrast in any part -- because occasionally you want to go outside the normal contrast range for additional graphical "meaning".
So if your webpage is a light gray background with black text, you can still go even brighter in specific areas. For example, you gain the extra ability to use white to give a call-to-action an extra "pop", or to delineate page sections, etc.
If your page is black text on a white background, then you can never go outside of that, so your functional design vocabulary becomes more limited.
So if your webpage is a light gray background with black text, you can still go even brighter in specific areas. For example, you gain the extra ability to use white to give a call-to-action an extra "pop", or to delineate page sections, etc.
If your page is black text on a white background, then you can never go outside of that, so your functional design vocabulary becomes more limited.
That has always been my rational. I save my high contrast in case I need it.
avoiding pure black text on a pure white background is pretty standard one for webpages.
I wish it wasn't, at least not to the extent it is in the OP blog. The text is hard to read.
I wish it wasn't, at least not to the extent it is in the OP blog. The text is hard to read.
Your monitor must be set at ridiculously hight brightness and low contrast, or you're just being obnoxious. I'd make text a tad dark, but it's not hard to read at all as it is.
I found the linked article almost impossible to read on a ThinkPad T420 running Ubuntu due to incredibly light-colored text. Luckily I have the Plain Clothes Chrome extension which allowed me to force the text to black on white.
I must be in the minority, since I see many sites with light grey text, but I find it very unusable.
Screen shot: http://www.diigo.com/item/image/yjhu/t4ix?size=o
I must be in the minority, since I see many sites with light grey text, but I find it very unusable.
Screen shot: http://www.diigo.com/item/image/yjhu/t4ix?size=o
I'm not being obnoxious and my monitors are usually dimmed because it's easier on the eyes. But I really have to strain them to read some of the more pretentiously designed sites.
I wonder why books are printed with black ink. Is it because publishers have bad designers? Or because the text is more legible that way?
I wonder why books are printed with black ink. Is it because publishers have bad designers? Or because the text is more legible that way?
There's actually a difference there, though: books aren't a light source. When you're reading a book, you're reading it with indirect/reflected lighting. This really does make a difference with respect to eye fatigue. And, for that matter, think about the difference between reading in your living room with nice ambient lighting and trying to read the same book in bright sunshine in midday. The "white level" is much higher in sunshine but the black level remains about the same -- in other words, there's much higher contrast -- and it's harder to read.
It's certainly possible to go overboard with low contrast on web pages, but most of the research I've read suggests that there's a happy medium. What you want to aim for, IIRC, is around a 50-70 point difference in lightness on the LAB color scale between the main background and main body text, at least if you expect to be throwing article-length text at people rather than Twitter-length text.
It's certainly possible to go overboard with low contrast on web pages, but most of the research I've read suggests that there's a happy medium. What you want to aim for, IIRC, is around a 50-70 point difference in lightness on the LAB color scale between the main background and main body text, at least if you expect to be throwing article-length text at people rather than Twitter-length text.
Black ink is far from black. Your monitor's black is also far from pitch black, but the whites are much brighter than paper (emitted vs reflected light), leading to huge contrast.
What designers are trying to achieve by setting text to #333 and background to #f9f9f9 is exactly making screen contrast more like a book.
By lowering your screen brightness/contrast an unusual amount, you're solving the problem for all sites doing it wrong, but turning the ones who use proper contrast into crap. Who's to blame?
What designers are trying to achieve by setting text to #333 and background to #f9f9f9 is exactly making screen contrast more like a book.
By lowering your screen brightness/contrast an unusual amount, you're solving the problem for all sites doing it wrong, but turning the ones who use proper contrast into crap. Who's to blame?
And this is all the reason why hacker news has a slightly orange tinted background behind the actual content instead of just leaving it pure white like the background behind that.
> Pure black text on a pure white blackground is too much contrast
As a mac and windows user, I find this correlates heavily to the OS being used as the font rendering is very different. Black on white is very readable on windows, it looks like hell on a mac.
As a mac and windows user, I find this correlates heavily to the OS being used as the font rendering is very different. Black on white is very readable on windows, it looks like hell on a mac.
But real the problem is that text looks like hell on Windows in the first place.
I used linux and windows as my primary OS's for a long time and recently picked up a macbook air. I thought there was something wrong with it for a fews hours due to how 'blurry' the font rendering was and I still have the hinting turned down. I'll give you that its "prettier", but easier to read.....no.....
The new Retina displays for the Macbook should fix that problem nicely. You'll get sharpness and beauty at the same time.
No, the article was a gross generalization.
yes, remember antialiased text is not black ever. pure black font you wont get with antialiased text. and antialiased text == readability --
some people like me will just live with it because most fonts look too crapy when theyre not antialiased
some people like me will just live with it because most fonts look too crapy when theyre not antialiased
[deleted]
It would be nice if he would use black for the text on his blog. Lighter-than-black on white can be painful on aging or strained eyes.
This seems to be an unfortunate new color trend. The problem is worse when zooming in on the page doesn't work or is capped.
This seems to be an unfortunate new color trend. The problem is worse when zooming in on the page doesn't work or is capped.
I've complained about this trend in the past, and it seems to be getting worse rather than better. I have the Evernote Clearly bookmarklet in my toolbar (it seems to work better than Readability) and I find myself using it more and more often. I don't mind not quite black text on a very (very) light grey background, but far too many websites just don't have enough contrast to be readable.
I agree. For reading, high contrast is exactly what I want. Despite all these trends in UX design, the best user interface is still a white piece of paper with blank ink.
The colors in the blog read fine to me. I have trouble with color bleeding when straight black is used on straight white. I would have gone with something a bit darker, say 60 or 70%, but definitely not 100% black.
I'm not sure you can use this particular blog as a good counterexample though. That text is damn-near 40% white, which is ridiculously light.
A subtle point this article makes is that pure black doesn't exist as displayed by your monitor. #000 is just the darkest value your monitor can display.
Across monitors, contrast ratio can vary by over an order of magnitude.
I'm not saying I don't prefer black, but I don't enjoy reading black text on a white background on an OLED phone in a dark room.
Across monitors, contrast ratio can vary by over an order of magnitude.
I'm not saying I don't prefer black, but I don't enjoy reading black text on a white background on an OLED phone in a dark room.
It's actually a subtle but important point this article conspicuously does NOT make.
Apart from that, I agree. Except that your lack of enjoyment reading from that OLED phone has not much to do with the use of pure black and everything with the use of pure white.
It's unpleasant reading #666 text on #fff background in a dark room just as much, because nobody likes looking into a bright lamp in a dark room.
Apart from that, I agree. Except that your lack of enjoyment reading from that OLED phone has not much to do with the use of pure black and everything with the use of pure white.
It's unpleasant reading #666 text on #fff background in a dark room just as much, because nobody likes looking into a bright lamp in a dark room.
Out of curiosity: are there any objects that are "pure black"? (i.e. 100% absorption of the entire visible spectrum of light)
My naive guess is that the only way to have pure "black" is an absence of light (ex: deep caves, deep sea, etc)
My naive guess is that the only way to have pure "black" is an absence of light (ex: deep caves, deep sea, etc)
I remember reading (a very long time ago) that the best way of getting close to pure black was to take a horn (of the type used to store gunpowder back when flintlocks were considered modern weapons) and hold the open end over a smokey candle until the entire inside was covered in lamp black. The combination of the very non-reflective lamp black and the curved shape of the interior ensured that almost all the light entering didn't leave.
Anything close to a perfect black body would be close to true black.
Thousands of feet of water are pretty good at absorbing and reflecting all electromagnetic waves before they reach the bottom, but because it's reflective it's not a black body.
Thousands of feet of water are pretty good at absorbing and reflecting all electromagnetic waves before they reach the bottom, but because it's reflective it's not a black body.
I don't think you could actually see that pure black. Problem is, that there's always some noise in the wiring that goes from the eyes to the brain, and you'll end up seeing some random coloured patches every now and then.
A black body is an idealized physical body that absorbs all incident electromagnetic radiation, regardless of frequency or angle of incidence.
https://en.wikipedia.org/wiki/Blackbody
https://en.wikipedia.org/wiki/Blackbody
Here's an article about a material that absorbs 99.9% of light
http://news.rpi.edu/update.do?artcenterkey=2393
Thanks! Both the camera and SEM photos reminded me of my grad school days doing CNT research :). Kind of serendipitous and awesome to find out that I had already seen the "very very black" material with my own eyes just four years ago!
Not sure if anyone has beaten them since, but a few years back my alma mater came up with the darkest man-made material to date.
http://news.rpi.edu/update.do?artcenterkey=2393
http://news.rpi.edu/update.do?artcenterkey=2393
From the outside, a black hole would be "pure black", but it's probably really bright on the inside.
There's not really an inside of a black hole anyway. The black hole it self is nothing but a tiny spot yet massive in weight. There's an inside the event horizon though. Commonly people like to refer to the size of the event horizon as the size of the black hole, so that might be the "inside". In that case it's hard to tell whether it's bright or not. My guess is that it's certainly brighter looking outside than towards the singularity, which should be black, because there's no light coming from that direction whatsoever, since it all gets swallowed. Then again I'm no physicist, so I'm not really qualified to make any claims here.
"There's not really an inside of a black hole anyway. The black hole it self is nothing but a tiny spot yet massive in weight."
We really don't know that. All our theories fail around black holes so we can only speculate what's going on in there. And even speculation is limited by our current mental capacity, which may be insufficient to understand/explain what's going inside black holes.
We really don't know that. All our theories fail around black holes so we can only speculate what's going on in there. And even speculation is limited by our current mental capacity, which may be insufficient to understand/explain what's going inside black holes.
There are actually a several effects that can make a 'black' hole rather bright from sufficient distance. Hawking radiation, gravitational lensing, frame-dragging, and an accretion disk can create some ridiculousness energetic objects.
As pure black is the absence of light, nobody can claim to directly see pure black. The detection of pure black goes like this, 'Nothing to see here, moving along'.
Your comment reminded me of this video on black holes:
https://www.youtube.com/watch?v=GYKyt3C0oT4
Activated charcoal powder is the closest thing I've ever seen to pure black.
There's nothing that quite reaches 100%, but there are a few things that get very very close. I think the current best is to stand a bunch of nanotubes on end.
I believe everything has the capacity to reflect some light except a black hole, which is able to trap that too[1].
But as far as the human eye can detect, there are probably a lot of things (whether real or artificial) that are indistinguishable from this 'true black'.
[1] Black holes can trap light outside the visible range; I'm not sure if there's something that can trap the entire visible range but not everything outside it.
But as far as the human eye can detect, there are probably a lot of things (whether real or artificial) that are indistinguishable from this 'true black'.
[1] Black holes can trap light outside the visible range; I'm not sure if there's something that can trap the entire visible range but not everything outside it.
If #000 is not pure black but the darkest value the monitor can display then that defeats the purpose of his article, doesn't it?
Plus, he played Halo in high school? Geez, I'm not young. He meant to say Doom right?
Plus, he played Halo in high school? Geez, I'm not young. He meant to say Doom right?
Halo apparently released in 2001. My wife graduated in 2002, so she could have (and might have) played some Halo in High school. She's 28, so not that young.
I played Doom in Highschool myself. Late(ish) highschool (class of '95 here)
I played Doom in Highschool myself. Late(ish) highschool (class of '95 here)
Sure, it's not "pure" black, but his argument is more that the average monitor's #000 text on a #fff background still has too much contrast for comfortable reading.
But I didn't get much out of the article discussing the idea of black on white for text. The majority of his post was about the color of elements on the page. I'm not saying I disagree with his point, but the talk about pure black when it doesn't exist in that context makes it seem strangely written. Looking at it in terms of contrast then it makes with the thought of grays versus black.
Actually even then on the screen you don't want #000 because it's more contrast than you need and starts to strain the eye.
https://twitter.com/H_FJ/status/11800719859
https://twitter.com/H_FJ/status/11800719859
Hm? That tweet says that #000 looks better. Edit: OK I totally missed the first smaller tweet at the top. Banner blindness I guess.
No, the first tweet says that a speaker at AEA recommended #333. And the second tweet says that H&FJ–an incredibly-highly respected type foundry—had been using an even lighter shade of #444 for all of the type specimens on their website.
Then, finally, it says that 4 days after the iPad launched (that's when this tweet happened) H&FJ had been noticing that black text looks best on the iPad (as opposed to all previous knowledge). And we have no update on their final decision about iPad type color.
Then, finally, it says that 4 days after the iPad launched (that's when this tweet happened) H&FJ had been noticing that black text looks best on the iPad (as opposed to all previous knowledge). And we have no update on their final decision about iPad type color.
That's probably not the case after the iPad 3. Lighter text doesn't always look good on iPad1/2 because of the short reading distance + standard res screen, aliasing is very visible.
yes but for what it's worth they're arguing against zeldman
I have never seen light-on-dark done in a way that didn't hurt my eyes to read, but when it comes closest to being acceptable is when the light is not completely white and the dark is not completely black.
I generally find that text is most easily readable when the background is very slightly darker than white, and the text is slightly lighter than black, and this has the added benefit of leaving you open to emphasize elements by increasing their contrast beyond that point.
The main useful idea that I think this article gives is this: don't use up all of your dynamic range in one place.
I generally find that text is most easily readable when the background is very slightly darker than white, and the text is slightly lighter than black, and this has the added benefit of leaving you open to emphasize elements by increasing their contrast beyond that point.
The main useful idea that I think this article gives is this: don't use up all of your dynamic range in one place.
Or if you're not trying to imitate nature. Unlike paintings of real objects, computer interfaces don't necessarily have to look "natural", as long as they look good.
True! But "natural" is often what looks good because of years and years of evolution :p
Well at least my interface will look natural to people born and raised on an interstellar space voyage, where high contrast is the norm, and soft, diffuse lighting unexpected... : P
Calling it, the future of design, right here!
While the inverse of that (light text on dark) makes for a terrible reading experience, yet so many bloggers/sites do it.
(Funny observation: I seem to prefer dark themes for coding Python, Ruby, C and light ones for Java)
(Funny observation: I seem to prefer dark themes for coding Python, Ruby, C and light ones for Java)
My text editor background is pure black. I can't stand writing code on a white background for a long time. Some people uses blue backgrounds that are a lot worse.
The reason why many people prefer black text on white is that they have an astigmatism: http://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on...
I have one on the left eye but preferred white on black before I switched to Windows (from Linux), where the system colors are black on white and thus I have mostly windows with black on white open (a few dark terminal windows are extremely distracting).
On the other hand, I found white/colored text on blue (as modern in the 90's, e.g. Turbo Pascal and other DOS editors/IDEs) quite readable.
I have one on the left eye but preferred white on black before I switched to Windows (from Linux), where the system colors are black on white and thus I have mostly windows with black on white open (a few dark terminal windows are extremely distracting).
On the other hand, I found white/colored text on blue (as modern in the 90's, e.g. Turbo Pascal and other DOS editors/IDEs) quite readable.
Interesting link, thanks. And I notice that the site uses #222 for the text color.
I always prefer light on dark, to the extent that my Hackernews, Reddit, Google and Gmail and a few others all have user styles applied to darken them. And my terminal is light text on dark background. Not to pure black, though, even though I had never thought about why I didn't go for as dark as possible.
EDIT: Also, my window borders and Unity dock are also near black. Overall, the only white backgrounds you'll see on my desktop are the occasional "loud" website or apps that don't obey my theme settings.
EDIT: Also, my window borders and Unity dock are also near black. Overall, the only white backgrounds you'll see on my desktop are the occasional "loud" website or apps that don't obey my theme settings.
Why is light on dark a bad reading experience? Is it just specific executions of it or in general?
I have aging eyes and find it harder to focus on white on black, also screen glare is more noticeable against a black background. It may be that because white on black is unnatural our eyes/brains have to do more work to interpret what they see.
I'm curious at your statement that white on black is unnatural.
Your observation is interesting! Do you have any insight into why that is?
For even more readable text, white on black. Semantically, you want to focus on the content and make the user ignore the background. But if the background (i.e. white) is visually louder (sorry for the poor wording) than the text (blackness / nothingness), it's a bad reading experience.
White on black can create a very difficulty reading experience. It may increase the contrast, but that's not the only factor in readability.
I personally prefer light text on dark background, but never white on black. Silver an a dark blue works great for me. But font and font weight are also factors.
Because of all those factors, black text on white background is more forgiving and more broadly expected. Which is why my websites are black on white but my vim color scheme is "darkblue".
I personally prefer light text on dark background, but never white on black. Silver an a dark blue works great for me. But font and font weight are also factors.
Because of all those factors, black text on white background is more forgiving and more broadly expected. Which is why my websites are black on white but my vim color scheme is "darkblue".
White/black is jarring, yeah. Light grey/dark grey is better most of the time. Other factors that affect readability I usually tweak are `max-width` and `font-size`, 35ems and at least 16px, respectively (except for microdata stuff which I usually keep between 12px-14px). In general, though, I prefer the content having visual focus, as opposed to the negative having focus (even though black text isn't usually described as the negative of the background).
The evidence is that black on white beats white on black.
I guess it's more acceptable to use #000 for text because the curves in most fonts are rather thin. Text with a larger font will appear darker than text with a smaller font. Just as a thin line will appear bright next to a thicker line, even though they have the same color. The examples are not about the color of text, the focus lies on backgrounds and shadows. In fact most of the text in the pictures is white.
I can't recall the study, but recently it was determined #444 is a perfect color for body text.
Totally agree.
how about "never use white?"
rgb(255,255,255) is the brightest color value you can have on the screen and colors like rgb(255,0,0) don't really pop against it because they're dark in comparison.
rgb(255,255,255) is the brightest color value you can have on the screen and colors like rgb(255,0,0) don't really pop against it because they're dark in comparison.
My problem with not using white is that even slightly-grayed whites take on very different tints depending on the display, so as much as I'd like to use it, I avoid it.
But, I do remember one of my drawing teachers at RISD telling us not to use the white charcoal sticks in our charcoal drawings (there the white is the weird unnatural element). And it's true, when I mixed in whites for highlights instead just erasing to the color of the paper, things started to feel weird.
But, I do remember one of my drawing teachers at RISD telling us not to use the white charcoal sticks in our charcoal drawings (there the white is the weird unnatural element). And it's true, when I mixed in whites for highlights instead just erasing to the color of the paper, things started to feel weird.
I agree, white is a lot harder on the eyes. As an experiment I switched my kindle fire reading app to a white background and forgot about it. Two weeks later I realized I was reading for a noticeable shorter amount of time (lets' say average 20 mns per day as opposed to 1 hour + per day). I would pick up the reader, but I just would not be able to go for a long time.
Yes, and this will only only grow worse the better screens get w/r/t brightness and contrast.
I love #fafafa.
Learned about this in my motion graphics class, no such thing as pure black in nature.
Also, all of the articles on your website link to this story. Great reads.
Also, all of the articles on your website link to this story. Great reads.
There is no such thing as pure black on your computer either - your monitor does not have an infinite contrast ratio.
So this is a pretty pointless rule, since it's impossible to violate it.
The human eye uses relative colors, not absolute ones. So the darkest color on your artwork IS black, no matter that it returns some light.
So this is a pretty pointless rule, since it's impossible to violate it.
The human eye uses relative colors, not absolute ones. So the darkest color on your artwork IS black, no matter that it returns some light.
Not quite true. Black holes for instance. Also, there's some carbon nanotube pigments used to absorb like 99.9999% of light that lands on it. It still looks pure black even when using a powerful flash to take a photo of it. These pigments were developed by NASA for use in telescopes where even a little bit of light can ruin the image.
Black holes are not black dude.. You can't see them at all.
You shine line at it; no light comes back. That is known as "black".
Which is what black is: You can't see it, since it returns no light.
As I've previously mentioned, cave darkness is completely black, and natural.
> ...no such thing as pure black in nature.
This is exactly why it can be so effective when used correctly. Obvious, if you're painting, black looks uncanny, but that's a far different situation than digital design.
This is exactly why it can be so effective when used correctly. Obvious, if you're painting, black looks uncanny, but that's a far different situation than digital design.
The best design tip I've picked up in the last five years was that sometimes, in your CSS definitions, you can use #555 or #777 or even #333, and not just black.
I don't mean that I didn't know you could enter hex numbers for colors, I just didn't realize that when I wanted a "black" border, #888 makes for a much less jarring border than #000...and this is critical if you have a lot of bordered elements.
I don't mean that I didn't know you could enter hex numbers for colors, I just didn't realize that when I wanted a "black" border, #888 makes for a much less jarring border than #000...and this is critical if you have a lot of bordered elements.
Yes -- and for borders it's arguably still black, just thinner, since a 1px line at 50% black could be an aliased representation of a 0.5px line at 100% black.
This comes up often on hn. Using painting, especially Wayne Thiebaud's as support for the argument is very weak. He's a pop art painter that is known for using exaggerated colors, it's part of the pop art movement's signature style.
I would agree that when painting a shadow, you will likely find if you look carefully that it is not black, but in web design color is different and design has different goals to painting. The former is about clarity and function, the latter is expression and feeling.
In rebuttal to the argument, there are several hundred years of printing that seemed to have moved western civilization forward quite nicely that was black on white.
I would agree that when painting a shadow, you will likely find if you look carefully that it is not black, but in web design color is different and design has different goals to painting. The former is about clarity and function, the latter is expression and feeling.
In rebuttal to the argument, there are several hundred years of printing that seemed to have moved western civilization forward quite nicely that was black on white.
Well the thing with printing is that the K part of CMYK is actually not the darkest black, yet it's 100% K that's used to print a book.
Fully saturated rich black (100% C+M+Y+K) is usually a little too jarring against a bright stock — take a look at most high quality books and notice that the stock is off-white and the ink isn't nearly as rich as #000 black on screen.
I think the original point as a lot of merit. Staying even just a little bit further from #000 or even pure grays (try #335, etc) can give more even tones and keep contrast high while reducing fatigue.
You're right about comparing art to print though — different goals, even though the conclusion is valid.
Fully saturated rich black (100% C+M+Y+K) is usually a little too jarring against a bright stock — take a look at most high quality books and notice that the stock is off-white and the ink isn't nearly as rich as #000 black on screen.
I think the original point as a lot of merit. Staying even just a little bit further from #000 or even pure grays (try #335, etc) can give more even tones and keep contrast high while reducing fatigue.
You're right about comparing art to print though — different goals, even though the conclusion is valid.
Back when I used to do some print design, we always used 95% K max. Anything else came out funny on the stock we were using.
Most paper isn't #fff, and most black inks don't appear as #000. Also, I think that tactic opens the debate to aspects of technology, manufacturing, and cost analysis.
I agree that painting isn't the most optimal tool for pushing this point, but I don't think the print argument is a whole lot better when comparing to css styling technique.
I agree that painting isn't the most optimal tool for pushing this point, but I don't think the print argument is a whole lot better when comparing to css styling technique.
It's not even always relevant in painting. The impressionists (who invented the hatred of black, AFAIK) were obsessed with painting light effects, so to them it was important. Their academic colleagues and to the painters that preceded them didn't care about photorealism and so used black liberally to emphasize depth and contrast.
You've got your goals wrong. Painting might be about expression and feeling. (Don't want to go down that path.) Design is definitely about clarity and function AND expression and feeling. All of the major brands that you give money to every day have spent LOTS of time on expression and feeling to convey the right messages to their consumers.
Try telling Apple that design has nothing to do with feeling.
And yeah, like the others have said, there was no pure black or pure white (at least as pure as the screen provides) during those several hundred years of amazing printing.
Try telling Apple that design has nothing to do with feeling.
And yeah, like the others have said, there was no pure black or pure white (at least as pure as the screen provides) during those several hundred years of amazing printing.
Not that this completely contradicts your point, but often a non-black/white shadow is web design is awesome. Subtle moves like high-saturation shadows that match your color scheme, which Ian discusses, are something I employ often (for both inset and outset shadows).
Paul Rand (who was perhaps the best graphic designer of the 20th Century) would disagree with that "tip"
...can you provide insight why? It may be so, but context is important, and argument by authority is not particularly helpful.
I would imagine the commenter was referring to the works of Rand. Google for some of his corporate brands and look at all the black. Try the Next logo for example.
OK, no argument there. The headline could be softened (Never use black in web layouts) as logos/branding are different from UI/UX design.
People here also seems to take it far too literally. There are always exceptions, no matter how absolute the article words it.
But while rules are there to be broken, they are best broken when you are skilled enough to know when it works to do so.
Most people who will read that article are not going to be skilled enough at graphical design to be able to easily decide when breaking this "rule" is an improvement and when it makes things worse, and so will probably benefit from paying attention to it.
Those that do understand when breaking it is really an improvement should go ahead and do so when appropriate.
The problem of course is that far too many people think they're experts.
But while rules are there to be broken, they are best broken when you are skilled enough to know when it works to do so.
Most people who will read that article are not going to be skilled enough at graphical design to be able to easily decide when breaking this "rule" is an improvement and when it makes things worse, and so will probably benefit from paying attention to it.
Those that do understand when breaking it is really an improvement should go ahead and do so when appropriate.
The problem of course is that far too many people think they're experts.
Here's an article with Paul Rand's views on the subject (that extols black)
http://www.paul-rand.com/foundation/thoughts_black/#.UCLgysj...
http://www.paul-rand.com/foundation/thoughts_black/#.UCLgysj...
quote from your link: "In some countries black or near-black has been employed extensively"
he also calls the shadows on a tree trunk black, so it seems he is not really arguing in favor of #000 but in favor of the use of very dark monochromatic colors, including true black. Also ALL of his examples are completely black/white or grayscale images of PRINTED or PAINTED objects, which naturally all do not achieve #000.
His views are entirely personal, as are our own. Personally, I found the #000 in his Next Logo to be the worst aspect of the whole design, since its extreme contrast suggests a low-tech print process or an old EGA screen incapable of more nuance. This is an aspect of most of his logos that I have never really liked, the same extreme contrast and blockiness that makes his IBM logo look more like an old ASCII display in someone's garage than the representation of a bold and powerful company.
he also calls the shadows on a tree trunk black, so it seems he is not really arguing in favor of #000 but in favor of the use of very dark monochromatic colors, including true black. Also ALL of his examples are completely black/white or grayscale images of PRINTED or PAINTED objects, which naturally all do not achieve #000.
His views are entirely personal, as are our own. Personally, I found the #000 in his Next Logo to be the worst aspect of the whole design, since its extreme contrast suggests a low-tech print process or an old EGA screen incapable of more nuance. This is an aspect of most of his logos that I have never really liked, the same extreme contrast and blockiness that makes his IBM logo look more like an old ASCII display in someone's garage than the representation of a bold and powerful company.
...if i ever meet you in person i owe you a drink! (thank you)
Okay, don't use black. I can just go to Tools -> Web Developer -> CSS -> Disable Styles -> All Styles to fix your bad design with a superior non-design.
I'm not sure that this argument works.
#000 on my screen isn't black either. It's dark grey.
Doesn't this mean avoiding #000 for design aimed at screen display cause you to avoid pure black twice, and thus just reduce contrast? Perhaps that's what you want, and what looks better. But it isn't because #000 is pure black, because no screen can achieve that.
#000 on my screen isn't black either. It's dark grey.
Doesn't this mean avoiding #000 for design aimed at screen display cause you to avoid pure black twice, and thus just reduce contrast? Perhaps that's what you want, and what looks better. But it isn't because #000 is pure black, because no screen can achieve that.
He does not only tell you to reduce the contrast, which with a good enough screen can be arbitrarily high, he also advices you to increase the saturation. And pure black can not have saturation.
My first thought as well. But there is an argument to be made that the screen is a different world, and the black of the screen looks as unnatural as pure black in the real world. I think this would apply less to a phone or something with a short view time, as adjusting to the new color palette would take us some amount of time.
Now someone needs to tell this to the people who redesigned http://salon.com recently. It's virtually unreadable.
I really hoped that this was going to be a joke about how, if you use black, Apple will sue you for patent infringement...
I'm trying to remember the name of the designer that tried to call out fab.com a few months ago for "stealing" his aesthetic. By aesthetic I mean he puts white Helvetica type on black.
In case you're curious, the text you are reading now is #000.
Which is not to say that #222 wouldn't be easier on the eyes.
Which is not to say that #222 wouldn't be easier on the eyes.
But it's also on a tan background :p so it's probably fine. It's all about contrast.
Upvoting so it can still look #000.
Never use black because it's too strong to always be used? If you want something strong, use black. If you don't, don't. That's about it.
That's why I like using #222 for text, it leaves #000 for the <strong> tag.
Also stop using grey http://stopusinggrey.com/ add just a bit of colors to you designs.
Unless, you know, you want to make images or video pop out with great contrast.
shpoonj your account has been hellbanned as of 11 days ago here: http://news.ycombinator.com/item?id=4305877
One thing to think about is that many users have auto-dimming screens, which means that your dark-grey color will appear black anyway. What tends to happen with these low contrast, analogous color schemes is that they result in a mid-gray soup of colors. I tend to use higher contrast on the web than in print. Itten's seven color contrasts is a great way to learn how to create contrasted color schemes that still survive dimmed screens, even without using the light/dark contrast.
[deleted]
Brilliant Article .This made me read color theory
For starters, http://www.smashingmagazine.com/2010/01/28/color-theory-for-...
http://mobile.tutsplus.com/tutorials/mobile-design-tutorials...
For starters, http://www.smashingmagazine.com/2010/01/28/color-theory-for-...
http://mobile.tutsplus.com/tutorials/mobile-design-tutorials...
Those could really use some scientific sources.
NO. This is how we end up with dark gray text on light gray background, on a web site.
If you're building something that people will read, make it easy for them to read.
If you're building something that people will read, make it easy for them to read.
[deleted]
My painting teacher at RISD told me that when he paints an outdoor scene he always mixes a tiny bit of blue into every color he uses, because the color of the sky is reflected off everything. It's a real skill to see color arbitrarily as it actually is, without attaching labels to it.
I don't understand how accurate representation of color becomes a concern in the areas graphic design. Sure, black is almost never a good choice when practicing any sort of representational art. Mixing it with other pigment in a effort to darken it saps any nuance or sensitivity that may have been present in your colors, and will almost never be true to the colors you are actually observing.
I don't however, understand how any of this is relevant and applicable to most design. Offhandedly disregarding all use of black is quite silly, and shows a lack of appreciation of the interplay of colors. Designers aren't artists. Designers very often make no attempt to represent any real thing. So why should physical phenomena enter the equation?
It is also incredibly important for designers to be sensitive of color, and to be aware of how they interact and play with one another. All of that is a given.
I don't however, understand how any of this is relevant and applicable to most design. Offhandedly disregarding all use of black is quite silly, and shows a lack of appreciation of the interplay of colors. Designers aren't artists. Designers very often make no attempt to represent any real thing. So why should physical phenomena enter the equation?
It is also incredibly important for designers to be sensitive of color, and to be aware of how they interact and play with one another. All of that is a given.
Human beings are accustomed to looking a physical phenomena. Designs that deviate from those rules are experienced as artificial, strange or uncomfortable. But you're right that you can't say never use black. It would be more correct to say never use black unless your goal is to make the viewer feel uncomfortable.
Please show me some research, or even anecdotal evidence supporting the claim that black makes people uncomfortable.
Furthermore, the idea that designs which deviate from physical counterparts, are "strange" or "uncomfortable" is completely unsupported by vast amounts of highly popular and effective designs. Indeed it is often the goal of many designers to deviate from and simplify any physical artifact it may reference.
https://www.google.com/search?q=emil+ruder&tbm=isch https://www.google.com/search?q=edward+tufte&tbm=isch https://www.google.com/search?q=josef+muller+brockmann&t... https://www.google.com/search?q=paul+rand&tbm=isch http://www.pentagram.com/
I haven't seen any claim substantiated by evidence of any sort. All claims appear to supported by the concerns of representational artists, this blog post, and some huge assumptions made about the human mind.
Graphic design is too complex, sophisticated to be subjected to these maxims you and others seem eager to impose.
Furthermore, the idea that designs which deviate from physical counterparts, are "strange" or "uncomfortable" is completely unsupported by vast amounts of highly popular and effective designs. Indeed it is often the goal of many designers to deviate from and simplify any physical artifact it may reference.
https://www.google.com/search?q=emil+ruder&tbm=isch https://www.google.com/search?q=edward+tufte&tbm=isch https://www.google.com/search?q=josef+muller+brockmann&t... https://www.google.com/search?q=paul+rand&tbm=isch http://www.pentagram.com/
I haven't seen any claim substantiated by evidence of any sort. All claims appear to supported by the concerns of representational artists, this blog post, and some huge assumptions made about the human mind.
Graphic design is too complex, sophisticated to be subjected to these maxims you and others seem eager to impose.
It will come as a shock for you to learn that high modernist design aesthetic you are celebrating was subjected to some withering critiques. It was considered cold, austere, artificial, too abstract, uncomfortable and hostile to humanity -- all of the things I just said. When applied to urban planning, it was associated with bureaucracy, elitism and authoritarianism.
Given your limited knowledge of the history of design, I suggest being a little more cautious about accusing others of lacking sophistication.
Given your limited knowledge of the history of design, I suggest being a little more cautious about accusing others of lacking sophistication.
I never suggested that the work of Ruder, Brockmann, or Rand was the highest echelon reachable by a designer. I never meant to suggest that theirs is the only aesthetic worth emulating or admiring. They are merely prominent examples of design that takes no queues from physical phenomena.
If the existence of a physical referent was as important as you claim, then I suppose the use of white (#000), red ( #f00), and countless other colors that aren't found in the physical world should be similarly avoided.
I never suggested that you were unsophisticated. I am merely stating that design is something far to sophisticated to apply broad dogmatic generalizations to. The suggestion that the usage of black is to be universally avoided flys in the face of the very history you seem to be concerned with.
I am still interested to see some research suggesting the the very usage of black leads to "strange" design. I see it used daily across many different contexts, for vastly different audiences. Has there been some trend away from black that major organizations such as the AIGA[1], TDC[2], and leaders of field such as Bruce Mau[3], Jennifer Morla[4], and Michael Beirut[5] have all been unaware of?
I'd appreciate you refraining from the condescension. I am very aware of the critiques that have been made of their work. I haven't seen it related to urban planning however, and would be very interested in reading about it further.
1. http://www.aiga.org 2. http://www.tdc.org 3. http://www.brucemaudesign.com/ 4. http://morladesign.com/ 5. http://www.pentagram.com/
If the existence of a physical referent was as important as you claim, then I suppose the use of white (#000), red ( #f00), and countless other colors that aren't found in the physical world should be similarly avoided.
I never suggested that you were unsophisticated. I am merely stating that design is something far to sophisticated to apply broad dogmatic generalizations to. The suggestion that the usage of black is to be universally avoided flys in the face of the very history you seem to be concerned with.
I am still interested to see some research suggesting the the very usage of black leads to "strange" design. I see it used daily across many different contexts, for vastly different audiences. Has there been some trend away from black that major organizations such as the AIGA[1], TDC[2], and leaders of field such as Bruce Mau[3], Jennifer Morla[4], and Michael Beirut[5] have all been unaware of?
I'd appreciate you refraining from the condescension. I am very aware of the critiques that have been made of their work. I haven't seen it related to urban planning however, and would be very interested in reading about it further.
1. http://www.aiga.org 2. http://www.tdc.org 3. http://www.brucemaudesign.com/ 4. http://morladesign.com/ 5. http://www.pentagram.com/
First, most of the design work you are referring to comes from the print world, which has some differences from designing for a screen. Second, part of the reason that modernist styles were critically acclaimed is because they managed to pull off something very difficult. They violated conventions and still managed to create successful designs. This doesn't really change the fact that not using black and sticking with a more natural style is good general advice, just like the techniques of professional race car drivers don't really apply to the average driver.
Naturalism is a more forgiving guideline for people without a strong design background - it will help them produce better design work, partly because they have a baseline of comparison in their everyday environment.
Naturalism is a more forgiving guideline for people without a strong design background - it will help them produce better design work, partly because they have a baseline of comparison in their everyday environment.
Hahahah you overreacted to my comment, but for what it's worth I would never use #f00 for anything.
How do I reconcile this with "Always Bet On Black?"
This article suffers from a bit of confusion over the difference between art and design.
Art: don't use the color black (or build up to it.) Good tip from "childhood art teacher." Another way of putting it: don't use black unless you know what you're doing.
Design: black is the strongest color. (The three strongest colors in design are black, white, red.) However, don't use a black background with white text (or any other color text on a dark background; bad readability). If your design isn't working in black and white, it's not working.
Art: don't use the color black (or build up to it.) Good tip from "childhood art teacher." Another way of putting it: don't use black unless you know what you're doing.
Design: black is the strongest color. (The three strongest colors in design are black, white, red.) However, don't use a black background with white text (or any other color text on a dark background; bad readability). If your design isn't working in black and white, it's not working.
Except for movie posters Clockwork Orange. Aliens. Star Wars. Love the black.
As someone with professional experience in photography and a masters in design – I think this piece is seriously lacking.
First – the photo that is used as "evidence" caught my eye quickly because it is clearly poorly processed/improperly exposed. There is no black point and that's a bad thing for the image; which leads me to say – you can't make the sweeping generalization that black is always bad. It's not – and the work of one pop art painter and a bad bit of photography isn't substantiated proof.
If you want to actually make something meaningful out of this, you'd actually push hard on the idea that too much contrast is a bad thing. Black isn't bad. Heavy contrast can be. Instead, get down to the root reasons that we have issues with contrast – in short, we're wired to notice differences in color or brightness than we are for absolute values of color or brightness. As such, it's not about one color, it's about the contrast.
Check out Jeff Johnson's Designing with the Mind in Mind: http://www.amazon.com/Designing-Mind-Simple-Understanding-In... or Colin Ware's Visual Thinking for Design: http://www.amazon.com/Visual-Thinking-Kaufmann-Interactive-T...
Both of those do a much better job at explaining the hows and whys of the average person's visual perception.
First – the photo that is used as "evidence" caught my eye quickly because it is clearly poorly processed/improperly exposed. There is no black point and that's a bad thing for the image; which leads me to say – you can't make the sweeping generalization that black is always bad. It's not – and the work of one pop art painter and a bad bit of photography isn't substantiated proof.
If you want to actually make something meaningful out of this, you'd actually push hard on the idea that too much contrast is a bad thing. Black isn't bad. Heavy contrast can be. Instead, get down to the root reasons that we have issues with contrast – in short, we're wired to notice differences in color or brightness than we are for absolute values of color or brightness. As such, it's not about one color, it's about the contrast.
Check out Jeff Johnson's Designing with the Mind in Mind: http://www.amazon.com/Designing-Mind-Simple-Understanding-In... or Colin Ware's Visual Thinking for Design: http://www.amazon.com/Visual-Thinking-Kaufmann-Interactive-T...
Both of those do a much better job at explaining the hows and whys of the average person's visual perception.
I think he took the wrong message away from his art teacher as I was taught the same thing.
But it was in regards to representing realistic things with paints. As he says shadows usually aren't truly black and painting with a dark blue as your darkener is usually a better idea.
You can use black but when you use it in paintings to darken colors or for your regular darks it regularly stands out to the viewer, black is supposed to be used in very limited quantities in artistic works. (Hell half the time people recommend not buying black paint when starting out but to mix other colors to create a black looking color[1])
This doesn't really switch over to apps and other things as they don't represent any realism but instead try to allow us to focus on specific things which black can be useful.
His example image with a big black square dominating the others is a terrible example and would be better if the bottom was a representation of the layout with black as the darkest color instead of the lighter greys and grey-blues. And what we would see is more contrast but little change in distraction.
[1]: http://painting.about.com/od/colourtheory/a/JimMeadersBlack....
But it was in regards to representing realistic things with paints. As he says shadows usually aren't truly black and painting with a dark blue as your darkener is usually a better idea.
You can use black but when you use it in paintings to darken colors or for your regular darks it regularly stands out to the viewer, black is supposed to be used in very limited quantities in artistic works. (Hell half the time people recommend not buying black paint when starting out but to mix other colors to create a black looking color[1])
This doesn't really switch over to apps and other things as they don't represent any realism but instead try to allow us to focus on specific things which black can be useful.
His example image with a big black square dominating the others is a terrible example and would be better if the bottom was a representation of the layout with black as the darkest color instead of the lighter greys and grey-blues. And what we would see is more contrast but little change in distraction.
[1]: http://painting.about.com/od/colourtheory/a/JimMeadersBlack....
OP here: No guys, I didn't take the wrong message away from Mrs. Zamula. I am aware of that "never" is not a word that should ever be taken at face value. The same way that I was aware when Mrs. Zamula forbade us from using "I like" while holding critique. You _can_ use "I like" well while giving a critique, but more often than not it means what will follow is garbage. Just like you _can_ use black, and there are absolutely good places to use it, but more often than not you'd do better with a bit of color in there.
Thiebaud's work and my photograph aren't evidence of anything other than the fact that shadows in most every image you see (whether it be real life, a painting or a photo) are not black. And that you'd be surprised at how saturated the dark colors around you are. Notice how I never said, "Thiebaud's shadows aren't black, so you shouldn't use black." There were a lot of other words in between.
I should have clarified: The black squares actually weren't about dominance at all. I put a large swath of black next to those screenshots because color is relative, and to see how far from black the dark grays in those screenshots actually are, you need a comparison point.
---
My other high school art teacher, Mrs. Totten (they taught as a pair), taught me a good lesson about photography. She would always defer to Mrs. Zamula on matters of photography because she readily admitted she had no photographic skill whatsoever. And she claimed that more people needed to acknowledge that fact, despite having their own digital camera. Well... my name is Ian, and I'm no a photographer.
But lucky for me.. that has absolutely no impact on my argument whatsoever!
Thiebaud's work and my photograph aren't evidence of anything other than the fact that shadows in most every image you see (whether it be real life, a painting or a photo) are not black. And that you'd be surprised at how saturated the dark colors around you are. Notice how I never said, "Thiebaud's shadows aren't black, so you shouldn't use black." There were a lot of other words in between.
I should have clarified: The black squares actually weren't about dominance at all. I put a large swath of black next to those screenshots because color is relative, and to see how far from black the dark grays in those screenshots actually are, you need a comparison point.
---
My other high school art teacher, Mrs. Totten (they taught as a pair), taught me a good lesson about photography. She would always defer to Mrs. Zamula on matters of photography because she readily admitted she had no photographic skill whatsoever. And she claimed that more people needed to acknowledge that fact, despite having their own digital camera. Well... my name is Ian, and I'm no a photographer.
But lucky for me.. that has absolutely no impact on my argument whatsoever!
My comment was going off your entire premise that using black was a nono because that is what you wrote.
We could even see it in your website design because you chose to use a grey font color over black (because I'm guessing you are on a mac and the font rendering works better). However if you look at it on windows it becomes harder to read because it is grey (http://i.imgur.com/CfTYi.png windows screenshot with black and grey)
I said that black can be used to focus in apps and websites and in digital mediums because it isn't realism that we are going for and black actually works really well for this purpose. The idea of using saturated colors is fine but not using black for the sake of it is silly.
Now using black in large quantities is another thing.
We could even see it in your website design because you chose to use a grey font color over black (because I'm guessing you are on a mac and the font rendering works better). However if you look at it on windows it becomes harder to read because it is grey (http://i.imgur.com/CfTYi.png windows screenshot with black and grey)
I said that black can be used to focus in apps and websites and in digital mediums because it isn't realism that we are going for and black actually works really well for this purpose. The idea of using saturated colors is fine but not using black for the sake of it is silly.
Now using black in large quantities is another thing.
I would be interested to know how Chinese classic painting fits in these theories about blackness: it should represent something not to far from half of all paintings ever produced by human beings and theories thereof, and as far as I know its main mode is shades of black ink on white paper.
I might have wrote a confusing comment accidentally. The don't use black pretty much comes into play in realism and other art with how people perceive the color black.
It is more realistic to represent shadows and blacks with dark colors as that is what they are but we rarely see black.
Because Chinese painting is rather stylized in is specific way black is a major factor, the same would go for things like comics and comic books and other such things.
It is more realistic to represent shadows and blacks with dark colors as that is what they are but we rarely see black.
Because Chinese painting is rather stylized in is specific way black is a major factor, the same would go for things like comics and comic books and other such things.
Well that probably ties in to how I was taught to "don't use pure black" in high school art class: when drawing with India ink and pen.
(BTW I just see on Wikipedia that the Chinese paintings you're referring to are quite different, but I'll tell the story anyway.)
Most of our drawings would be made of shading, which is done by either cross-hatching or stippling. When you'd need a shadow area to be really dark or "black" you weren't allowed to take a brush and simply paint it, no you had to stipple or cross-hatch it until you reached the desired level of darkness. Rather tedious work for large areas and most kids hated it, though I kinda liked "zoning out" doing it.
And you could tell, too. A properly shaded dark area could be really really dark but always have some white specks in between the layers of cross-hatchings. Very subtle, but it would make it look way more "real": we were shown examples of pictures where the darkest shadows (a hole in the wall or something) were painted flat black with a brush, and they'd seem (also literally) "black holes". They'd punch right through the image without any sense of depth-proportion. Obviously, because there wasn't any: you can't shade part of a black hole darker than the other bits.
Describing this, it makes me think of working with DSP/audio applications. Volume is measured in dB, and if you turn it down, you can go to -36dB or -48dB and it's pretty much "silent" (-3dB is half as much power) as long as you play it next to sounds at full volume (0dB). Turn it further down and the software cuts the value to -Inf dB, when there is really no sound ("pure black").
BTW I'm not trying to say that you should never turn a sound all the way "off" in an audio mix :) [I'm not a professional sound mixer], just that the concepts seem really similar. In both cases, our eyes and our ears have a tremendous dynamic range, and they are sensitive to ratios, mostly. Using a "pure black" paint (I think NASA must have some that comes pretty close) confuses those ratios because it "divides by zero", in some sense.
Your example of Chinese classic paintings is interesting though, I think it also shows that tastes and customs in painting vary over the ages. The "don't use pure black" style is really ubiquitous in current-day digital (web/app) design, but it didn't use to be always like that. Nor is "realism" a necessary quality, (Jackson Pollock used pure black and they are the prettiest images before the invention of TV static!).
(BTW I just see on Wikipedia that the Chinese paintings you're referring to are quite different, but I'll tell the story anyway.)
Most of our drawings would be made of shading, which is done by either cross-hatching or stippling. When you'd need a shadow area to be really dark or "black" you weren't allowed to take a brush and simply paint it, no you had to stipple or cross-hatch it until you reached the desired level of darkness. Rather tedious work for large areas and most kids hated it, though I kinda liked "zoning out" doing it.
And you could tell, too. A properly shaded dark area could be really really dark but always have some white specks in between the layers of cross-hatchings. Very subtle, but it would make it look way more "real": we were shown examples of pictures where the darkest shadows (a hole in the wall or something) were painted flat black with a brush, and they'd seem (also literally) "black holes". They'd punch right through the image without any sense of depth-proportion. Obviously, because there wasn't any: you can't shade part of a black hole darker than the other bits.
Describing this, it makes me think of working with DSP/audio applications. Volume is measured in dB, and if you turn it down, you can go to -36dB or -48dB and it's pretty much "silent" (-3dB is half as much power) as long as you play it next to sounds at full volume (0dB). Turn it further down and the software cuts the value to -Inf dB, when there is really no sound ("pure black").
BTW I'm not trying to say that you should never turn a sound all the way "off" in an audio mix :) [I'm not a professional sound mixer], just that the concepts seem really similar. In both cases, our eyes and our ears have a tremendous dynamic range, and they are sensitive to ratios, mostly. Using a "pure black" paint (I think NASA must have some that comes pretty close) confuses those ratios because it "divides by zero", in some sense.
Your example of Chinese classic paintings is interesting though, I think it also shows that tastes and customs in painting vary over the ages. The "don't use pure black" style is really ubiquitous in current-day digital (web/app) design, but it didn't use to be always like that. Nor is "realism" a necessary quality, (Jackson Pollock used pure black and they are the prettiest images before the invention of TV static!).
That's true, and it's true of black & white art more generally, but even there, you don't have blocks of pure black. You have pure black lines on white or cream-colored paper.
Agreed. And if black is artificial, so is white, but we use black and white when designing color schemes for a couple of legitimate reasons.
White and black provide constant contrasts to which we can fix all other colors. Our brains see color by contrast, and we process color by contrast. If I have some white, some black, and some blue on a page, chances are that people will see a similar shade of blue on different monitors even if the correction is very different. The color temperature may be different on different monitors but our brain adjusts. White and black provide the tare points.
I'd note that the paintings he included in his page, I could spot black on two out of three......
White and black provide constant contrasts to which we can fix all other colors. Our brains see color by contrast, and we process color by contrast. If I have some white, some black, and some blue on a page, chances are that people will see a similar shade of blue on different monitors even if the correction is very different. The color temperature may be different on different monitors but our brain adjusts. White and black provide the tare points.
I'd note that the paintings he included in his page, I could spot black on two out of three......
> I could spot black on two out of three......
this probably means you need to calibrate your monitor a little bit better. no need to use an expensive (spyder) tool unless you're a graphics artist, but if "not black" shows up as pure black, you might want to do some simple adjustments to at least make sure you can see a full colour range (just google "monitor calibration", there's many simple tutorials).
this probably means you need to calibrate your monitor a little bit better. no need to use an expensive (spyder) tool unless you're a graphics artist, but if "not black" shows up as pure black, you might want to do some simple adjustments to at least make sure you can see a full colour range (just google "monitor calibration", there's many simple tutorials).
> I could spot black on two out of three
If you're on a Mac, go to spotlight and open Digital Color Meter. There is no black (0,0,0) in any of those paintings. The blacks you "see" are exactly the subject of this article and parent comment.
If you're on a Mac, go to spotlight and open Digital Color Meter. There is no black (0,0,0) in any of those paintings. The blacks you "see" are exactly the subject of this article and parent comment.
And while you're at it, note that that Spotlight icon you clicked on isn't pure black either :p
While we're noting things, I couldn't help but continually note that the text on your website is damn hard to read. I'd rather have legible pure black text than text with such low contrast that I have to spend more effort to accommodate it.
"Design" is supposed to be a beautiful blend of form and function, and I find it hard to take advice seriously from a website that doesn't care about the latter.
"Design" is supposed to be a beautiful blend of form and function, and I find it hard to take advice seriously from a website that doesn't care about the latter.
I didn't notice at first because this particular article doesn't have that much text, but if you click around ... ouch, yeah no way I'm going to read more than two paragraphs of light-grey text no matter if it's carefully saturated with some warm brown colour or not.
Though also note that many of the letters in the menubar text do indeed contain #000000 black, at least in Lion (no time to upgrade yet). Why? Because the contrast works – particularly given the non-white background.
The keyboard buttons I used for Command-Space look pretty black.
Do people actually click the Spotlight icon? Why click to open a keyboard search facility?
I had to look to see there really was a Spotlight icon.
I had to look to see there really was a Spotlight icon.
In my experience, it's far more rare to find a person who knows and uses any keyboard shortcuts.
When I run training sessions I'm amazed at how many people don't even know the shortcuts for copy and paste. And these are folks that use computers for 80-90% of their workday.
When I run training sessions I'm amazed at how many people don't even know the shortcuts for copy and paste. And these are folks that use computers for 80-90% of their workday.
A good counter example to the pop art painter are Baroque painters, who used very dark colors very heavily in their pieces http://en.wikipedia.org/wiki/Baroque_painting
Not much of those you linked to actually use pure black, but this one comes pretty close:
http://en.wikipedia.org/wiki/File:Francisco_de_Zurbarán_018....
It also happens to show very nicely what's wrong with using pure black as shadows: they're not shadows, they're holes.
(what a god-awful painting, btw. and they compare his work to Caravaggio's ... )
http://en.wikipedia.org/wiki/File:Francisco_de_Zurbarán_018....
It also happens to show very nicely what's wrong with using pure black as shadows: they're not shadows, they're holes.
(what a god-awful painting, btw. and they compare his work to Caravaggio's ... )
He also confuses, maybe conflates would be better, art and design. For example, his statement that black over-powers everything else only applies to black masses - thin black borders or underlining is the best way to focus attention on critical points on a web page without being distracting the way bright colors can be.
Those thin borders and underline also benefit from not black. #333 is usually the darkest you should go for text and these features.
I routinely find myself hand-tweaking CSS on sites I visit for #333, replacing it with black.
Dual monitors, office, lots of ambient daylight, and occasional sun glare. Drive me freaking nuts.
Black text on a very slightly off-white background: not so bad.
Dual monitors, office, lots of ambient daylight, and occasional sun glare. Drive me freaking nuts.
Black text on a very slightly off-white background: not so bad.
I think the most important thing is the dynamic range. The range which a camera (and our eye) can see is limited. If you extend over the range, colours look, weird. Having said that, I would agree with the justification of contrast. Too much contrast can be a distraction. It is important to have a pure white and a pure black in a photo since it gives a fairly good idea about the whole palette.
The issues you mention are outside of the scope of a shortish blog post.
I'd say you should use black sparsly. As the article says, most things you think of as black are not really black, and when you have used black somewhere, you can no longer make anything even darker.
I'd say you should use black sparsly. As the article says, most things you think of as black are not really black, and when you have used black somewhere, you can no longer make anything even darker.
>The issues you mention are outside of the scope of a shortish blog post.
Hardly. If one is going to claim to be a designer (or profess to have wisdom enough to have a "design tip") then you sure as hell better understand why what you're suggesting is in any way true, ever.
If you don't understand the 2nd order explanation (at least) you've got no business trying to explain it to the masses – because you don't understand the boundary conditions. If you do understand those boundary conditions, it should be reflected in the shared explanation, within reason.
Further, as explained in that post, the idea is wrong. It's about contrast (and, thus, dynamic range) more than it is absolute color. Indeed, if one wanted to be pedantic, they could point out that #000000 isn't actually real black and that no human has ever actually produced a truly black object. If one wanted to be slightly less pedantic and more particular, one could note that #000000 has a fuzzy meaning anyway as you're depending on the sensor of the image device (when/if it's captured) and then the output device – the rendering of black points (and whites) isn't the same on almost any two devices.
Pulling back slightly, even from a novice's perspective, the admonishment to never use black is just wrong. The point is/should be that contrast is important, but too much contrast can also be bad. Black can easily be used in such a way as to not yield overly contrasted images – it just needs to be paired with another color sufficiently dark so as to keep contrast low enough to be acceptable. That is something that happens all of the time, in digital media and otherwise. So, trying to tell anyone that "black is bad" without an explanation leads to stupid design decisions that are made because of incomplete or woefully imprecise understandings of one's audience.
You may be okay with that, but I think it's sloppy. It's the stuff that cargo cults and fads are made of – and I expect better from smart people like the author.
Hardly. If one is going to claim to be a designer (or profess to have wisdom enough to have a "design tip") then you sure as hell better understand why what you're suggesting is in any way true, ever.
If you don't understand the 2nd order explanation (at least) you've got no business trying to explain it to the masses – because you don't understand the boundary conditions. If you do understand those boundary conditions, it should be reflected in the shared explanation, within reason.
Further, as explained in that post, the idea is wrong. It's about contrast (and, thus, dynamic range) more than it is absolute color. Indeed, if one wanted to be pedantic, they could point out that #000000 isn't actually real black and that no human has ever actually produced a truly black object. If one wanted to be slightly less pedantic and more particular, one could note that #000000 has a fuzzy meaning anyway as you're depending on the sensor of the image device (when/if it's captured) and then the output device – the rendering of black points (and whites) isn't the same on almost any two devices.
Pulling back slightly, even from a novice's perspective, the admonishment to never use black is just wrong. The point is/should be that contrast is important, but too much contrast can also be bad. Black can easily be used in such a way as to not yield overly contrasted images – it just needs to be paired with another color sufficiently dark so as to keep contrast low enough to be acceptable. That is something that happens all of the time, in digital media and otherwise. So, trying to tell anyone that "black is bad" without an explanation leads to stupid design decisions that are made because of incomplete or woefully imprecise understandings of one's audience.
You may be okay with that, but I think it's sloppy. It's the stuff that cargo cults and fads are made of – and I expect better from smart people like the author.
> Further, as explained in that post, the idea is wrong. It's about contrast (and, thus, dynamic range) more than it is absolute color. Indeed, if one wanted to be pedantic, they could point out that #000000 isn't actually real black and that no human has ever actually produced a truly black object. If one wanted to be slightly less pedantic and more particular, one could note that #000000 has a fuzzy meaning anyway as you're depending on the sensor of the image device (when/if it's captured) and then the output device – the rendering of black points (and whites) isn't the same on almost any two devices.
Reading the article I was really hoping he'd mention this--I don't think it's pedantic at all, #000000 on a monitor is not "black" in real life, for similar reasons as his pretty saturated shadows are not.
As you say, it's all about contrasts. And once you use #000000, you can't shade anything darker than that.
> Black can easily be used in such a way as to not yield overly contrasted images – it just needs to be paired with another color sufficiently dark so as to keep contrast low enough to be acceptable.
But in that case the pure #000000 black is actually a stand-in for a really dark colour that the monitor (or other medium) cannot produce. Although, I suppose, there are probably instances where #000000 is exactly the colour you need, but because it's on the far corner of the RGB cube chances are it's probably clamped or rounded-down for something else.
Still, in those situations, #000000 is the best you can do.
Reading the article I was really hoping he'd mention this--I don't think it's pedantic at all, #000000 on a monitor is not "black" in real life, for similar reasons as his pretty saturated shadows are not.
As you say, it's all about contrasts. And once you use #000000, you can't shade anything darker than that.
> Black can easily be used in such a way as to not yield overly contrasted images – it just needs to be paired with another color sufficiently dark so as to keep contrast low enough to be acceptable.
But in that case the pure #000000 black is actually a stand-in for a really dark colour that the monitor (or other medium) cannot produce. Although, I suppose, there are probably instances where #000000 is exactly the colour you need, but because it's on the far corner of the RGB cube chances are it's probably clamped or rounded-down for something else.
Still, in those situations, #000000 is the best you can do.
It is seriously lacking, but the underlying point is good. Consider using colors that are nearly black in preference to complete black.
While the article is well presented, and contains many good points, I must take issue with a few of the ideas set forth.
1.) I'm not taking "design tips" from someone whose site takes so long to load on a slow connection.
2.) Obviously the author has never been in a cave and turned all lighting off. Cave darkness is a complete and total absence of light & color save for black. This color IS NATURAL!
3.) In the spirit of the "green" movement, doesn't the use of black equate to less power consumption? (Remember http://www.blackle.com/ "energy saving search?")
That said, I'm sure that the author is vastly more artistically talented than I, as I can't even color within the lines in my grandchildren's coloring books!
1.) I'm not taking "design tips" from someone whose site takes so long to load on a slow connection.
2.) Obviously the author has never been in a cave and turned all lighting off. Cave darkness is a complete and total absence of light & color save for black. This color IS NATURAL!
3.) In the spirit of the "green" movement, doesn't the use of black equate to less power consumption? (Remember http://www.blackle.com/ "energy saving search?")
That said, I'm sure that the author is vastly more artistically talented than I, as I can't even color within the lines in my grandchildren's coloring books!
The moment you add a dot of any visible color in that cave, it's not pitch black anymore. So no, 100% black is not found in nature paired to other colors.
Coloring inside the lines is vastly overrated. Just ask Mrs. Zamula.
Avoiding black definitely causes you to make color choices that add more dimension and realism to your interfaces. Interfaces, after all, are representations of reality.
One helpful tip: "warm" colors jump out at you, and "cool" colors recede away from you. You can use this to your advantage when designing buttons, or even when working with typography.
More detail in this article, "Why Monet Never Used Black": http://www.kadavy.net/blog/posts/d4h-color-theory/
One helpful tip: "warm" colors jump out at you, and "cool" colors recede away from you. You can use this to your advantage when designing buttons, or even when working with typography.
More detail in this article, "Why Monet Never Used Black": http://www.kadavy.net/blog/posts/d4h-color-theory/
"Why does the Facebook Mobile interface feel so nice?"
I didn't know that, looks horrible to me. But either way a somewhat good read in general.
I didn't know that, looks horrible to me. But either way a somewhat good read in general.
I'm not sure this applies to user interfaces and digital design, where style is a huge aspect. The starkness of true black on true white is stark, and sometimes that's what you're looking for, especially for minimalism. For example, see http://whatthefuckshouldimakefordinner.com/. I would think a design student would recognize that not everyone wants to have the same look and feel as other people, and there is a place for black. Just not in his sketching class at RISD.
Disagree with the concept. I would recommend studying pixel art for examples of really strong color usage - most modern styles work within an economical palette, just like in graphic design. Black is commonplace, it's how it's used that matters. The scene as a whole has similar considerations for contrast and weight as graphic design, even though the individual elements tend to emphasize detail and lighting.
Enormous pixel art thread: http://forums.tigsource.com/index.php?topic=167.0
Enormous pixel art thread: http://forums.tigsource.com/index.php?topic=167.0
I couldnt disagree with this article more. I'm frustrated with how little webpages use black.
In all my development environments where i'm coding for hours on end, i always find black background with white text to be far superior in terms of readability. I wish everyone had AMOLED screens (even on our desktops) so using black had more of a real purpose.
In all my development environments where i'm coding for hours on end, i always find black background with white text to be far superior in terms of readability. I wish everyone had AMOLED screens (even on our desktops) so using black had more of a real purpose.
Well, black is not black, it is simply the darkest color your medium (paper, screen, etc) can display. Not using it would effectively reduce the dynamic range of your medium.
anyone else have this experience: reading this article on an iphone only to notice that the thing in my hand - perhaps the most successful consumer electronic device in the world - was as close to jet black as anything else I'd seen today? :\ ... what about black turtle necks - are those OK?
It really depends. I am not a fan of the tip because it is a bit misleading. The reason there aren't many true blacks in representational art is due to reflection of light into the shadows.
Also, given the overall temperature of an image, it can be just as high-contrast to use a color on the opposite end of the color wheel.
Either way, these are style decisions, which are highly subjective.
Also, given the overall temperature of an image, it can be just as high-contrast to use a color on the opposite end of the color wheel.
Either way, these are style decisions, which are highly subjective.
There is a lot of black on HackerNews and I love HN:)
I find this approach too extreme. Black is sometimes needed. You may choose to use true black and maximize the contrast when you need to improve readability, especially for accessibility reasons.
op obviously not as knowledgeable as he thinks he is. but as some here mentioned theres nothing better than light on dark for eye comfort.
otoh if you take antialiased font it will NEVER be really black anyway. and people who use bitmap fonts for long hour coding sessions just because it feels better, causes less headaches etc. will tell you that you can take your advice and ... ;)
otoh if you take antialiased font it will NEVER be really black anyway. and people who use bitmap fonts for long hour coding sessions just because it feels better, causes less headaches etc. will tell you that you can take your advice and ... ;)
Ansel Adams disagrees.