
Design tip: Never use black (2012) - co_pl_te
http://ianstormtaylor.com/design-tip-never-use-black
======
gwern
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](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.

~~~
ianstormtaylor
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.

~~~
gwern
> 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](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.

~~~
ianstormtaylor
Right, which is why I don't recommend designing by A/B testing single-variable
changes in the first place. Instead of assuming that your site does better
with extremely long lines of tiny type, even thought that goes against pretty
much every typographer's recommendation, I'd assume that you started at a
small local maximum if the results really do suggest you are best optimized.

    
    
                       _
                      / \
                     /   \    
        you?        /     \
         _         /       \
      __/ \_______/         \_______________
    
    

Another thing that came to mind: read time could actually be working against
you, how do you know people are leaving because they can't read the type vs.
they are leaving because it was so easy to read they finished earlier ;)

~~~
gwern
> Instead of assuming that your site does better with extremely long lines of
> tiny type, even thought that goes against pretty much every typographer's
> recommendation

It's not really an assumption though, I've already looked at long lines with
the `max-width` variable, and the very wide/long versions performed pretty
well; see [http://www.gwern.net/AB%20testing#max-
width](http://www.gwern.net/AB%20testing#max-width) &
[http://www.gwern.net/AB%20testing#max-width-
redux](http://www.gwern.net/AB%20testing#max-width-redux)

~~~
ianstormtaylor
That was a single-variable test, right? I just talked about that...

------
ars
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.

~~~
ianstormtaylor
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.

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

------
chrismealy
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](https://gist.github.com/chrismealy/7075460)

I do like a nice gray, though.

~~~
ris
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
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.

------
blehn
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](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://a2.mzstatic.com/us/r1000/083/Purple/v4/94/fb/c6/94fbc657-48bb-b6d3-f1c7-0e8a1a694a19/mzl.wyodoypv.1136x1136-75.jpg)

[http://static.squarespace.com/static/5006a00824ac21f35d8e2de...](http://static.squarespace.com/static/5006a00824ac21f35d8e2de9/51bca157e4b0008f24e5be90/51bca15ee4b0b3d30b8630cb/1371317105053/vsco-
cam-sidebar-menu05.PNG)

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
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.

~~~
blehn
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/](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".

~~~
Rumudiez
Creating successful "unnatural" imagery is very difficult and often not the
case for artists, and almost never for designers.

In regards to LCD screens and other devices not being "natural," RGB linear
color transformations don't create natural color palettes--the real world is
far different than our digital recreations.

~~~
blehn
Your first statement is just plain false. Much of the contemporary art world
(and Modernism and Postmodernism) can be characterized by a rejection of
realism and strict representations of nature. Have you been to a contemporary
art show recently? The same goes for the design world.

Your second statement supports my argument.

------
gaplus
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](http://www.teenageengineering.com/products/op-1/overview)

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

------
vacri
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.

~~~
Rumudiez
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_esspe
It have a poor contrast for text.

~~~
deificx
No, it doesn't, the foreground color is #57534a and background is #ffffff
which gives a ratio of 7.7:1

WCAG 2.0 requires a contrast of 7:1 to reach AAA levels. [1]

you can test it yourself with a bunch of tools but I couldn't find link to
results on any of them [2][3][4].

[1] [http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-
contr...](http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast7)

[2]
[http://webaim.org/resources/contrastchecker/](http://webaim.org/resources/contrastchecker/)

[3]
[http://snook.ca/technical/colour_contrast/colour.html](http://snook.ca/technical/colour_contrast/colour.html)

[4] [http://contrastchecker.com/](http://contrastchecker.com/)

~~~
mike_esspe
My eyes prefer better contrast. I've read WCAG 2.0 and 7:1 is a minimum
contrast, not optimum. The logic is that it's a minimum contrast for a user
with 20/80 vision.

------
pfortuny
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](http://en.wikipedia.org/wiki/The_Blue_Boy)).

Never use blue as a foreground colour...

There goes another principle.

------
DigitalSea
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.

~~~
ianstormtaylor
[http://paulgraham.com/taste.html](http://paulgraham.com/taste.html)

~~~
igravious
or The Judgment of Taste [http://plato.stanford.edu/entries/aesthetic-
judgment/#1](http://plato.stanford.edu/entries/aesthetic-judgment/#1)

------
hsmyers
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](http://www.sdragons.org) to show what I mean by my
own use of black. Warning, prolonged exposure may deepen existing depression
:)

------
ris
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.

------
caster_cp
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](http://en.wikipedia.org/wiki/Pierre_Soulages)

------
bjornornorn
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.

------
001sky
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](https://news.ycombinator.com/item?id=4357002)

------
pcurve
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.

------
wavesum
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.

------
campinhos
Or use black on your website and win an Apple design award:
[http://www.bohemiancoding.com/sketch/](http://www.bohemiancoding.com/sketch/)

~~~
srik
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.

~~~
campinhos
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;

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

------
grumblestumble
Better design tip: Never use 'never'.

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

edit - grammar

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

------
thewarrior
Try telling that to the guys who designed Windows Phone.

------
sTevo-In-VA
I use black so my lines can show up when photocopied.

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

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

