Design tip: Never use black (2012)

http://ianstormtaylor.com/design-tip-never-use-black

by co_pl_te • 13 years ago

173 63 13 years ago

biot• 13 years ago

From last year (219 comments): https://news.ycombinator.com/item?id=4357002

chrismealy3• 13 years ago

You know what else isn't black? The #000000 pixels on my laptop. For me #000000 usually the best for reading. I use this bookmarklet all the time to turn text black.

https://gist.github.com/chrismealy/7075460

I do like a nice gray, though.

ris2• 13 years ago

As a designer it's really useful to be able to save that #000000 for e.g. an emphasized section on your body text.

Tuna-Fish• 13 years ago

The big problem with off-black text is that the designers who advocate them rarely test their sites on monitors that are like the ones the consumers actually use. Something like 90% of the people looking at your website will do it through a monitor that has a crappy TN panel and an even more crappy backlight. Designers tend to gravitate towards good IPS panels because their colors are much more lifelike -- but this means that the designer never sees the site like most of his users do.

If you do web design you absolutely have to own a 2-3 year old TN panel with a CCFL backlight, and use it on stock settings, simply because that's what your customers use. #000000 on that is usually equivalent to #303030 or something on a good monitor. And #303030 is indistinguishable from your background color.

charlesism• 13 years ago

Well, 'avoid pure black' is as good a rule for design, as 'limit/compress your audio' is for music production. Both rules produce more 'polished' results, but both are kind of cheesy. Most professional audio engineers claim to prefer greater dynamics (though its rare outside classical recordings). Most professional photographers prefer glossy paper because you get deeper blacks (and whiter whites). I know that may strike some nerds as odd (matte displays prevent glare), but there is also a pro market for HDR displays, and 'true black' TVs/monitors.

ryanf• 13 years ago

I think using pure black is actually more analogous to compressing your audio. Excessive compression (+ normalization) maximizes the recording's volume in the same way that using pure black as your default body text maximizes contrast; in both cases, you're losing headroom that you could have reserved for parts that need emphasis.

annnnd• 13 years ago

You rule!

This is such a simple solution to combat incompetent designers who think they should never use black... No more fiddling in Firebug just so I can read some text at maximum contrast. Thank you! :)

chrismealy3• 13 years ago

I forgot who wrote it. I've been using it since 2004 at least.

dspeyer2• 13 years ago

Thank you. I've been doing that by hand.

jonahx• 13 years ago

That is the exact opposite of how I like to read. I much prefer lower contrast with dark background or, if I am forced to read a white background, to use f.lux to mute it in amber.

chrismealy3• 13 years ago

I use f.lux too. I actually like off-white backgrounds too. It's the gray on gray that gets to me.

001sky• 13 years ago

Previously on HN with 789 points, and lots of discussion (216 comments), so for those interested the topic dont miss:

https://news.ycombinator.com/item?id=4357002

ahmetalpb1• 13 years ago

this has been discussed back in August 2012. Somebody please add "(2012)" to title.

hsmyers• 13 years ago

As a painter I've been fanatically attached to the use of black probably longer than the article user has been alive. That said I say in his defense that there isn't a pure black available no matter what you do. Secondly a little goes a very long way and it is extremely easy for it to do a visual 'crash the party' on your design efforts so his cautions are right on the money. If anyone gives a damn, I've a painting gallery on my web site, http://www.sdragons.org to show what I mean by my own use of black. Warning, prolonged exposure may deepen existing depression :)

elwell• 13 years ago

white supremacist propaganda; move along... no, was good read; love that Wayne Thiebaud sf hills piece.

blehn3• 13 years ago

oof. this is awful advice, even as a rule of thumb.

obviously, absolute black is impossible to create, but there are plenty of examples in art and design where truer blacks are intentional and used effectively.

Here's some beautiful photography of LA architecture: http://cope1.com/ARCHITECTURE eyedrop some of the shadows and you'll notice that many of them are #000000.

Or look at Svpply or VSCO Cam — two very well-design mobile apps. #000000 is used extensively in both.

http://a2.mzstatic.com/us/r1000/083/Purple/v4/94/fb/c6/94fbc...

http://static.squarespace.com/static/5006a00824ac21f35d8e2de...

Not to say that off-blacks are ineffective, but to claim that one should avoid black based on a couple cherry-picked examples is simply misinformed.

dxhdr• 13 years ago

As a rule of thumb the advice is correct. Nature rarely produces pure blacks and that's all the author is trying to say. To look natural is to not use black.

Your LA architecture link is a perfect example of that -- the photographer captured very striking unnatural structures with aggressive, sharp edges and used a very unnatural pure black as emphasis. It works. But it's absolutely not a point against the author's argument.

blehn3• 13 years ago

No, it's not correct. The author's argument is that you absolutely should not use pure black in design because it's "unnatural". The false assumption he's making is that artwork and designed objects or interfaces should be natural, and even that is based on a very specific definition of natural. What's natural about a computer or an LCD display? Even the best devices are comprised of "very striking unnatural structures with aggressive, sharp edges".

The author supports his argument with artwork, photography, and applications that are no more natural or effective than the ones I linked (oh, and how about Ansel Adams http://www.anseladams.com/? A legendary nature photographer — his images are full of deep blacks.) It's a matter of personal preference. Telling inexperienced designers to "Never Use Black" just isn't sound advice. I would sooner advise designers to work only in black and white. Design a great application in black and white, and then begin working with color and tone when black and white aren't enough. A more appropriate, though less provocative title for this article would be, "Shadows Aren't Always Black".

lifeformed• 13 years ago

I think the rule is correct in general, and if you really know what you're doing, then I'm sure you can make black look good.

jrs99• 13 years ago

you can definitely use black well. especially in the anti-skeuomorphism age. I think that the mobile app example he uses has black or almost black on the top bar and if your own page uses black, then it doesn't make this nice differentiation between the bar and the cohesiveness of your own app.

in paintings, the real reason you don't use black is because the pigments for black are "dead" looking. The paint "ivory black" looks bad because it is made out of bone, whereas if you use dark blue and brown and mix a very dark color, it looks more lively.

Yes, shadows aren't black, but everyone knows that. I think the real advice is Shadows Have Color, like "blue shadows" in the examples he shows. and that you shouldn't create shadows out of just black paint and white paint if you're making a realistic painting.

ris2• 13 years ago

I have to continually beat this argument into my boss's brain, who insists things should always be black.

I follow the same principle for white. Keep #ffffff for the highlight on the really light thing you want to show.

Also I find asking most displays to show #ffffff often pushes them too far into the nonlinear, which ends up causing some odd artefacts when used with e.g. gradients.

gwern6• 13 years ago

The last time this was submitted, I noted it down as something to test in the future in my site. I did a multifactorial A/B test (fg/bg: #303C3C/white/black/#FCFCFC ) measuring reading time: http://www.gwern.net/AB%20testing#text-background-color

At _n_=231,599, when I stopped it, the best-performing version was... white background, black foreground.

So for my site, seems like pure black isn't so bad.

ianstormtaylor5• 13 years ago

Hmm interesting. My guess would be that the typeface on your site is so small (you're running that one now still?) that the lighter font might have made it harder to read. It would be interesting to see if these single-variable changes actually keep you in a local maximum. For example, imagine that:

- pure black fonts are actually bad for conversion, and conversion gets worse the more pure black that is exposed (ie. the size of the type).

- small font sizes are also bad for conversion.

- long line lengths are also bad for conversion.

- tall paragraphs (in number of lines) are also bad for conversion.

Now I'd imagine (purely on design instincts) that the best possible reading experience (which I'm assuming also means more reading time) would be to have off-black-colored type, at a size around 16px, with a line length of 70-80 characters, and an average paragraph height of around 4-5.

Couldn't it be that changing all four variables at once will make for a big boost in conversion, but changing one at a time runs into the limitations of the others? For example, increasing font-size by itself will lead to taller paragraphs and more black exposed.

gwern6• 13 years ago

My guess would be that the typeface on your site is so small (you're running that one now still?) that the lighter font might have made it harder to read.

Well, except that the bigger fonts are performing noticeably worse, and it's a pretty linear relationship. You can see it in the current simplified-model estimate of -0.002, but it jumps out when plotted: http://i.imgur.com/SKw3ScN.png The 100% group performs best, and it just gets worse, even though you wouldn't think, say, 105% would be much different from 100%.

Couldn't it be that changing all four variables at once will make for a big boost in conversion, but changing one at a time runs into the limitations of the others? For example, increasing font-size by itself will lead to taller paragraphs and more black exposed.

Yes, that's entirely possible. Actually, it's probable that the fitness landscape looks like that. There's no reason to expect features to be independent and design so easily optimizable.

The problem is, it's hard to explore a high-dimensional landscape. Factorial designs, where you test every possible combination and estimate interactions, let you do this, but things can increase, well, factorially. 2x2 isn't too bad, but let's take just your 3 variables which can be tweaked by CSS: if I use just 4 differing shades of black, 5 font sizes (like the one I'm running now), and 5 differing line lengths (something like `max-width:`), then that gives me 4x5x5=100 different variants to run, and each one will need something like 1000 page views to start to become accurate, so it would take quite a while to accumulate 100,000 page views. (To put this in perspective, getting to #1 on the HN front page is worth ~20,000 page views.)

And that's just with 3 changes each with relatively few possible choices. You can see the problem. If you are really worried about interactions and decide to do a full factorial design to explore them, you can quickly get into infeasible sample sizes.

pantalaimon2• 13 years ago

The lines are also pretty crammed, they could need some more padding. I easily find myself slipping a line while reading.

And if gwern feels adventurous (and I guess he'd like testing such kind of things), he may try something like [1] to color the text with a gradient, to allow faster reading speeds.

[1] http://www.beelinereader.com/

campinhos2• 13 years ago

Or use black on your website and win an Apple design award: http://www.bohemiancoding.com/sketch/

srik• 13 years ago

Couldn't be sure if your comment was snarky but if so - Correlation and causation. Sketch is an amazing native app and from my experience with definitely deserves that award.

campinhos2• 13 years ago

Oh yeah absolutely, they do deserve that award. My point was: Never use black, unless you know what you are doing. The sketch website is a great example of a good website with background-color: black;

ars• 13 years ago

Argument: Don't use black because nothing in nature is actually black.

False Conclusion: Don't use black on a web page because nothing in nature is actually black.

False Assumption: The black on a web page is actually pure black.

True Conclusion: Use black if you want to - it won't be pure black, it will simply be the darkest you can get.

PS. This is also true for paint: Black paint is also not pure black.

Volpe• 13 years ago

Also note: Space is pretty black, why do things have to look like nature?

ianstormtaylor5• 13 years ago

The real difference between blacks in nature and on the screen is about relative darkness. Dark values appear much darker next to a very light value (true everywhere). For example, you can make a dark gray look black by surrounding it with bright white. (Look up Josef Albers if you want to learn more about that.)

The thing about screens is that they are very bright, unnaturally bright compared to other things you see daily, because they are light emitting instead of reflecting. (They are very purposefully brighter than your surroundings so that you can still read them even if the room you are in is bright.) That means that when you put a bright white next to a dark black on the screen you're going to get a much higher contrast ratio than the same values in print. Yes, technically you could achieve the same values in print if you wanted to, but the fact is people interact with those higher ratios much less frequently.

So, yes, if you really want, you can make this your conclusion:

Use black if you want to - it won't be pure black, it will simply be the darkest you can get.

But that's a pretty useless conclusion for anyone who wants to learn about what's going on. Instead, realize that in most cases the pure black you're using in an interface will feel unnaturally dominant, and will actually do more harm than good if you don't purposefully mean for it to be pure black.

dspeyer2• 13 years ago

Depends on the lighting conditions. Compared to paper reflecting indirect sunlight, computer screens are quite dim.

ohwp• 13 years ago

"PS. This is also true for paint: Black paint is also not pure black."

If it was it would burn a hole in the canvas ;)

DigitalSea• 13 years ago

I remember when this was discussed the first time around. I somewhat agree with not using black, I don't remember the last time I used black in a design nor saw it really used. These days it's all about the greys. A fine substitute for black I've been using for as long as I can remember is #111111 it's close enough to black it's dark, but it's further away from black that it is somewhat noticeably different.

It's all a matter of taste and preference. Keep in mind #000000 will not always be black, colour profiles, brightness and contrast settings of individual monitors and devices means there will always be a difference. One colour is generally like a million colours. As always, think for yourself and don't readjust your workflow because of posts like this.

ianstormtaylor5• 13 years ago

http://paulgraham.com/taste.html

igravious• 13 years ago

or The Judgment of Taste http://plato.stanford.edu/entries/aesthetic-judgment/#1

gaplus• 13 years ago

Replace the word 'black' with any other color you can think of in this article and it's pretty clear how dogmatic this is. I'm all for setting rules and constraints for a given design project, but trying to set universal rules apart from the context of the project with these arguments is fallacious since one can easily give strong counter arguments in favor of pure black. In fact, OLED screens are as black as they come since a pure black OLED won't draw any power. This is a wonderful aspect of it's function that results in incredible saturated graphics like those found on the op-1 synth display: http://www.teenageengineering.com/products/op-1/overview

vacri• 13 years ago

By the same token, don't use this mantra to use low-contrast text like that used with this article. Absolute black may be a no-no, but this doesn't mean all of 'dark' is a no-no. Low-contrast text is poor form.

Rumudiez2• 13 years ago

Although I agree that everyone needs to watch out for low contrast type scenarios, I don't exactly see how this article exemplifies one in any way. Can you point out anything in particular?

mike_esspe2• 13 years ago

It have a poor contrast for text.

sTevo-In-VA• 13 years ago

I use black so my lines can show up when photocopied.

pcurve• 13 years ago

I find the body text color on his site too light for comfort. You don't have to go #000, but #333 would've made it a lot more legible.

Not everybody uses IPS panels with glossy coating.

grumblestumble• 13 years ago

Better design tip: Never use 'never'.

wavesum• 13 years ago

General tip: Never say never. Op has a good point there that shadows are not usually black in tint but the opposite hue from highlights. Black has its uses though when you are not painting a painting.

anarchitect• 13 years ago

By using grey for backgrounds you can still use black for shadows, as both the Sublime and Calendar examples do.

edit - grammar

Kiro• 13 years ago

segment.io needs more pure black. It seriously looks really dull.

bjornornorn• 13 years ago

I like to think of this somewhat differently.

By using extreme values you are limiting your options. If you use #FFFFFF in a design you can't select a brighter color and you can't select a color with the same brightness that's warmer or colder etc.

The same goes for black and for strongly saturated colors. You can't make something more saturated than #FF0000 and you can't create a brighter color without decreasing saturation.

Using these "extreme" colors can increase contrast and might help make details in a design pop, but that is only possible if you limit their usage overall. Do use black, white and saturated colors, but be aware of what you are sacrificing.

pfortuny• 13 years ago

Every time I hear or read some absolute statement about something related to perception (mostly visual), I think about "The blue boy" (http://en.wikipedia.org/wiki/The_Blue_Boy).

Never use blue as a foreground colour...

There goes another principle.

thewarrior• 13 years ago

Try telling that to the guys who designed Windows Phone.

caster_cp• 13 years ago

The article makes good points about the (over)use of black in UI designs, but uses just one example to show how saturated color can be used in shadows, therefore concluding that black isn't that necessary at all. Wayne Thiebaud really paints astonishingly beautiful shadows, but there are some very good examples of black in art as well, that I thought increases the level of the discussion "to black or not to black".

Pierre Soulages is worth mentioning here. Better seen in person (because of the textures and reflections), even on screen his all black paintings are amazing.

http://en.wikipedia.org/wiki/Pierre_Soulages

icoder• 13 years ago

We talked about this before. There's no such thing as black. The actual residual reflectiveness of 'black' depends on the medium.

Design tip: Never use black (2012)

Related Stories