Design Tip: Never Use Black
ianstormtaylor.com
ianstormtaylor.com
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.
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 ... )
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.
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....
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!
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.
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.
(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!).
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.
"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 had to look to see there really was a Spotlight icon.
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).
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.
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.
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.
(Funny observation: I seem to prefer dark themes for coding Python, Ruby, C and light ones for Java)
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.
Bottom line: You can't please everyone.
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.
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.
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.
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.
My naive guess is that the only way to have pure "black" is an absence of light (ex: deep caves, deep sea, etc)
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.
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.
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.
Plus, he played Halo in high school? Geez, I'm not young. He meant to say Doom right?
I played Doom in Highschool myself. Late(ish) highschool (class of '95 here)
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.
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".
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.)
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...
I'm only kidding, but it would be sorta interesting.
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 :)
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.
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).
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.
I wish it wasn't, at least not to the extent it is in the OP blog. The text is hard to read.
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?
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.
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?
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
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.
some people like me will just live with it because most fonts look too crapy when theyre not antialiased
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.
pure black on light gray does not hurt my eyes, while dark gray on pure white does, after a while, late at night.
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 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 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 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.
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.
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.
If you're building something that people will read, make it easy for them to read.
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.
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.
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.
Given your limited knowledge of the history of design, I suggest being a little more cautious about accusing others of lacking sophistication.
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/
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.
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/
#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.
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.
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.
> non-design
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.
http://www.paul-rand.com/foundation/thoughts_black/#.UCLgysj...
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.
Also, all of the articles on your website link to this story. Great reads.
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.
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.
Which is not to say that #222 wouldn't be easier on the eyes.
For starters, http://www.smashingmagazine.com/2010/01/28/color-theory-for-...
http://mobile.tutsplus.com/tutorials/mobile-design-tutorials...
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.
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!
Enormous pixel art thread: http://forums.tigsource.com/index.php?topic=167.0
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.
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 didn't know that, looks horrible to me. But either way a somewhat good read in general.
It's for the people who desperately need things like bootstrap.