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.
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.
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!
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.
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.
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!).
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......
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.
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.
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.
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.
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).
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.
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.
>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.
> 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.
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.)
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.
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).
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...
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.
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 :)
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.
> 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.
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.....
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.
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.
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?
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.
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?
> 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.
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'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.
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.
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)
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.
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.
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.
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!
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.
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.
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'.
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.
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.
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.
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.
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.
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.
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
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.
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 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.
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.
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".
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).
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
#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.
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).
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.
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.
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.
Frustratingly often overriding everything imposed by a designer and sticking to a nice font of black on off-white; (or very pale yellow on near black) does give better results.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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?
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 ... ;)
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.
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.