13 ms·

Design tip: Never use black (2012)

173 points by co_pl_te 13y ago

biot 13y ago
From last year (219 comments): https://news.ycombinator.com/item?id=4357002 https://news.ycombinator.com/item?id=4357002
chrismealy 13y 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 https://gist.github.com/chrismealy/7075460 I do like a nice gray, though.
- ris 13y 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.
  - deleted 13y ago
    [deleted]
  - Tuna-Fish 13y 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 13y 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 13y 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 13y 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! :)
  - chrismealy 13y ago
    I forgot who wrote it. I've been using it since 2004 at least.
- dspeyer 13y ago
  Thank you. I've been doing that by hand.
- jonahx 13y 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.
  - chrismealy 13y ago
    I use f.lux too. I actually like off-white backgrounds too. It's the gray on gray that gets to me.
001sky 13y 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 https://news.ycombinator.com/item?id=4357002
ahmetalpb1 13y ago
this has been discussed back in August 2012. Somebody please add "(2012)" to title.
hsmyers 13y 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 http://www.sdragons.org to show what I mean by my own use of black. Warning, prolonged exposure may deepen existing depression :)
elwell 13y ago
white supremacist propaganda; move along... no, was good read; love that Wayne Thiebaud sf hills piece.
blehn 13y 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 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/94fbc657-48bb-b6d3-f1c7-0e8a1a694a19/mzl.wyodoypv.1136x1136-75.jpg http://a2.mzstatic.com/us/r1000/083/Purple/v4/94/fb/c6/94fbc... http://static.squarespace.com/static/5006a00824ac21f35d8e2de9/51bca157e4b0008f24e5be90/51bca15ee4b0b3d30b8630cb/1371317105053/vsco-cam-sidebar-menu05.PNG 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 13y 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.
  - blehn 13y 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/ 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".
ris 13y 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.
gwern 13y 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 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 13y 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.
  - gwern 13y 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 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.
campinhos 13y ago
Or use black on your website and win an Apple design award: http://www.bohemiancoding.com/sketch/ http://www.bohemiancoding.com/sketch/
- srik 13y 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.
  - campinhos 13y 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 13y 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 13y ago
  Also note: Space is pretty black, why do things have to look like nature?
- ianstormtaylor 13y 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.
  - dspeyer 13y ago
    Depends on the lighting conditions. Compared to paper reflecting indirect sunlight, computer screens are quite dim.
DigitalSea 13y 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.
- ianstormtaylor 13y ago
  http://paulgraham.com/taste.html http://paulgraham.com/taste.html
  - igravious 13y ago
    or The Judgment of Taste http://plato.stanford.edu/entries/aesthetic-judgment/#1 http://plato.stanford.edu/entries/aesthetic-judgment/#1
gaplus 13y 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 http://www.teenageengineering.com/products/op-1/overview
vacri 13y 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.
- Rumudiez 13y 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_esspe 13y ago
    It have a poor contrast for text.
    - deificx 13y ago
      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-contrast7 http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contr... [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 13y ago
        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.
sTevo-In-VA 13y ago
I use black so my lines can show up when photocopied.
pcurve 13y 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 13y ago
Better design tip: Never use 'never'.
wavesum 13y 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 13y ago
By using grey for backgrounds you can still use black for shadows, as both the Sublime and Calendar examples do. edit - grammar
Kiro 13y ago
segment.io needs more pure black. It seriously looks really dull.
bjornornorn 13y 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 13y 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 http://en.wikipedia.org/wiki/The_Blue_Boy). Never use blue as a foreground colour... There goes another principle.
thewarrior 13y ago
Try telling that to the guys who designed Windows Phone.
caster_cp 13y 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 http://en.wikipedia.org/wiki/Pierre_Soulages
icoder 13y ago
We talked about this before. There's no such thing as black. The actual residual reflectiveness of 'black' depends on the medium.
jayseattle 13y ago
Of all the nuances of design to ponder in life or in your profession, this seems trivial. Also, according to Marissa Meyer, never use straight lines as they don't exist in nature (just like Black!). http://marissamayr.tumblr.com/post/60336044815/geeking-out-on-the-logo http://marissamayr.tumblr.com/post/60336044815/geeking-out-o... You can create great, readable design or a logotype using 100% (digital) black or even straight lines.

173 points by co_pl_te 13y ago

biot 13y ago

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

chrismealy 13y 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 https://gist.github.com/chrismealy/7075460 I do like a nice gray, though.

ris 13y 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.
- deleted 13y ago
  [deleted]
- Tuna-Fish 13y 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 13y 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 13y 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 13y 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! :)
- chrismealy 13y ago
  I forgot who wrote it. I've been using it since 2004 at least.
dspeyer 13y ago
Thank you. I've been doing that by hand.
jonahx 13y 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.
- chrismealy 13y ago
  I use f.lux too. I actually like off-white backgrounds too. It's the gray on gray that gets to me.

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

ahmetalpb1 13y ago

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

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

elwell 13y ago

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

blehn 13y 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 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/94fbc657-48bb-b6d3-f1c7-0e8a1a694a19/mzl.wyodoypv.1136x1136-75.jpg http://a2.mzstatic.com/us/r1000/083/Purple/v4/94/fb/c6/94fbc... http://static.squarespace.com/static/5006a00824ac21f35d8e2de9/51bca157e4b0008f24e5be90/51bca15ee4b0b3d30b8630cb/1371317105053/vsco-cam-sidebar-menu05.PNG 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 13y 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.
- blehn 13y 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/ 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".

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

gwern 13y 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 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 13y 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.
- gwern 13y 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 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.

campinhos 13y ago

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

srik 13y 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.
- campinhos 13y 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 13y 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 13y ago
Also note: Space is pretty black, why do things have to look like nature?
ianstormtaylor 13y 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.
- dspeyer 13y ago
  Depends on the lighting conditions. Compared to paper reflecting indirect sunlight, computer screens are quite dim.

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

ianstormtaylor 13y ago
http://paulgraham.com/taste.html http://paulgraham.com/taste.html
- igravious 13y ago
  or The Judgment of Taste http://plato.stanford.edu/entries/aesthetic-judgment/#1 http://plato.stanford.edu/entries/aesthetic-judgment/#1

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

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

Rumudiez 13y 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_esspe 13y ago
  It have a poor contrast for text.
  - deificx 13y ago
    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-contrast7 http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contr... [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 13y ago
      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.

sTevo-In-VA 13y ago

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

pcurve 13y 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 13y ago

Better design tip: Never use 'never'.

wavesum 13y 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 13y ago

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

Kiro 13y ago

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

bjornornorn 13y 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 13y 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 http://en.wikipedia.org/wiki/The_Blue_Boy). Never use blue as a foreground colour... There goes another principle.

thewarrior 13y ago

Try telling that to the guys who designed Windows Phone.

caster_cp 13y 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 http://en.wikipedia.org/wiki/Pierre_Soulages

icoder 13y ago

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

jayseattle 13y ago

Of all the nuances of design to ponder in life or in your profession, this seems trivial. Also, according to Marissa Meyer, never use straight lines as they don't exist in nature (just like Black!). http://marissamayr.tumblr.com/post/60336044815/geeking-out-on-the-logo http://marissamayr.tumblr.com/post/60336044815/geeking-out-o... You can create great, readable design or a logotype using 100% (digital) black or even straight lines.