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.
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.
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.
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.
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! :)
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.
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 :)
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.
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.
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".
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.
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.
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.
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.
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.
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.
> 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.
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.
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 ;)
Right. It's impossible to genuinely read any page on my site in <40 seconds, so I can treat an increase in >40seconders as an increase in reading time.
> 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
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.
I think single-value changes won't make a big difference (as you've proven yourself), but did you look into something like [1]?
But I have to admit, I hardly ever read your articles from top to bottom, but just skim through them, looking for paragraphs I find interesting. Your current design works well for that, most readability enhancing matters usually help reading the entire thing (like a story or an article in a magazine), but at the cost of the ability to quickly glance over it.
> I think single-value changes won't make a big difference (as you've proven yourself)
But it can still help. A local optima is still higher than not being in the local optima.
I haven't looked at Readability a lot. For a while, it wasn't displaying gwern.net pages at all... and it's still messing up a lot. Apparently the Readability view starts halfway down the page! /hits the report-bug button yet again.
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.
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;
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.
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.
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
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.
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?
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.
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.
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.
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).
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.
65 comments
[ 3.7 ms ] story [ 123 ms ] threadhttps://gist.github.com/chrismealy/7075460
I do like a nice gray, though.
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.
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! :)
https://news.ycombinator.com/item?id=4357002
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.
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.
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".
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.
Your second statement supports my argument.
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.
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.
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.
- 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.
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.
His articles are long, and take more than 40 seconds to read.
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-redux
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/
As in line height? Already tried that: http://www.gwern.net/AB%20testing#line-height
> [1] http://www.beelinereader.com/
I emailed them when they came out for a JS version which I could use. I guess they are still working on it because I haven't heard anything lately.
[1] http://www.readability.com/read?url=http://www.gwern.net/AB%...
But it can still help. A local optima is still higher than not being in the local optima.
I haven't looked at Readability a lot. For a while, it wasn't displaying gwern.net pages at all... and it's still messing up a lot. Apparently the Readability view starts halfway down the page! /hits the report-bug button yet again.
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.
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.
If it was it would burn a hole in the canvas ;)
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.
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...
[2] http://webaim.org/resources/contrastchecker/
[3] http://snook.ca/technical/colour_contrast/colour.html
[4] http://contrastchecker.com/
Not everybody uses IPS panels with glossy coating.
edit - grammar
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.
Never use blue as a foreground colour...
There goes another principle.
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