
Design Tip: Never Use Black (2012) - declanhaigh
https://ianstormtaylor.com/design-tip-never-use-black/
======
mrob
Pure black is the correct color for text. Ink and paper manufacturers go to
great lengths to make inks and papers with the darkest blacks and brightest
whites, and there's no reason text on screen should be any different.
Firefox's Reader View foolishly throws away contrast with gray text, but this
can be fixed in chrome/userContent.css in the Firefox profile directory:

    
    
      @-moz-document url-prefix("about:reader") {
        body {
          background-color: #FFFFFF !important;
          color: #000000 !important;
        }
      }
    

toolkit.legacyUserProfileCustomizations.stylesheets needs to be set to true in
about:config for recent versions of Firefox to load userContent.css

Some people complain about excessive brightness being hard on their eyes. They
likely have their monitor brightness set too high. Most monitors can have
their brightness set using DDC/CI (this sometimes needs to be enabled from the
monitor's OSD). Most Linux distributions include "ddcutil". Install it and
give the user who'll run it permissions to access I2C. In Debian, this can be
accomplished by adding them to the i2c group.

Find out which I2C buses your monitors are attached too:

    
    
      ddcutil detect
    

Now you can change brightness from the command line:

    
    
      ddcutil --bus=6 setvcp 10 50
    

The first number after setvcp is the feature value to set. "10" is the
standard feature value for brightness. The second number is the percentage
brightness. I suggest picking values for low/medium/high brightness for each
monitor, and binding a script that sets all them at once to the otherwise
rarely used PrtScn/ScrLk/Pause keys. Presumably there is some way to do the
same thing on other operating systems.

~~~
jhardy54
> Pure black is the correct color for text. Ink and paper manufacturers go to
> great lengths to make inks and papers with the darkest blacks and brightest
> whites, and there's no reason text on screen should be any different.

Is this your opinion or is this widely accepted as fact? I've read countless
design suggestions to reduce contrast and avoid using pure black or white on
an LED display. I'm curious whether there's research that supports either
side.

~~~
bmitc
> I've read countless design suggestions to reduce contrast and avoid using
> pure black or white on an LED display.

I have seen those suggestions too, but they seem to be just parroted off of
each other. I have never seen a single one link to any reasoning or studies
that support the claims of better readability. They all seem to say it because
someone else said it in a game of design telephone.

In my personal experience, I find gray text on an off-white background to be
very difficult and straining to read, and additionally, I don't think it looks
good.

I can see some merit in reducing the whiteness and thus brightness of the
background, but I don't see why reducing black to some lighter black or gray
helps at all. Having text in a nice solid black or near-black with an off-
white background seems reasonable to me. That matches more closely with
reading things on actual paper, where dark black inks are possible but the
background is not pure white. That leaves legibility in place and reduces
background brightness.

It's possible this whole "reduce the contrast" thing has gotten off track,
when to me at least, the goal seems to be to reduce the blinding background
blasting you with light and not to simply reduce contrast.

~~~
unicornporn
> I have seen those suggestions too, but they seem to be just parroted off of
> each other. I have never seen a single one link to any reasoning or studies
> that support the claims of better readability. They all seem to say it
> because someone else said it in a game of design telephone.

I so wish I could find that research that once and for all debunked the "UX
expert" urban myth that #fff + #000 = evil. It made me consider past mistakes
and I go for all black on all white whenever I can. Doesn't hurt from a WCAG
perspective.

~~~
httpsterio
I debunk your debunk with the following paper.

Rello, Kanvinde, & Baeza-Yates, 2011. Layout Guidelines for Web Text and a Web
Service to Improve Accessibility for Dyslexics.

If you suffer from astigmatism you might experience halations or if you have
contrast sensitivity, visual distortions.

[https://dm-ed.com/info/contrast-sensitivity/](https://dm-
ed.com/info/contrast-sensitivity/)

------
crazygringo
This is bizarre and just completely and utterly wrong.

The first part is true... yes, obviously shadows aren't black.

But in the real world (including screens and pigments) _nothing_ is black if
there's a lighting source somewhere. The #000 on your monitor is just dark
gray, because your black pixel is still being lit by nearby pixels, ambient
light, etc. And the LCD component (or unlit OLED) isn't perfect black anyways.

Actual good graphic design advice is to _aim for a comfortable level of
contrast_. Not too little, and not too much. Which is why most good websites
don't use pure-black-on-pure-white, it's a little too strong.

But another big reason for not using pure black or white for backgrounds is
that they allow you to use #000 or #FFF for emphasis highlights that really
"pop".

But absolutely none of this has anything to do with #000 being "too black"
that's "not natural". That's just utter nonsense.

~~~
Al-Khwarizmi
A honest question: why books do traditionally use pure black on white? Is it a
matter of ink costs and they would also look better with a slightly lighter
ink, or do different principles apply than on screens?

~~~
crazygringo
Two things. First, most books aren't -- the paper is gray-ish and the black is
matte so under lighting it's more like dark gray.

Second, the contrast is limited to ambient lighting. Whereas the white on
computer screens is often far brighter than a sheet of white paper nearby,
which is why avoiding extreme contrast is even more important.

------
corty
This might all be true for paintings, but on a screen, #000 isn't black. It is
usually a dark gray, depending on the backlight and contrast of your screen.
And even with OLEDs, it might be darker, but it isn't really black. So imho,
no need to be afraid of black for screen design.

As for print, it depends on the process. Anything that composes colors from
CMYK pixels will look ugly and blurry if you do not use pure colors e.g. for
fonts at low resolutions or close up. Just compare black fonts and dark brown
or grey fonts out of a color laser printer for an example.

So no, only avoid black if it is really black you are avoiding and if it
doesn't cause other problems.

~~~
klodolph
Black isn't the total absence of light in the first place. It's just a
relative absence of light.

It works the same way for paintings, screens, oleds, etc. So when the author
is talking about "black" they're using it in the same way that a normal person
would talk about "black"\--it's a very dark color.

~~~
corty
In that interpretation, the authors point is even less valid. In that case he
just advocates substituting a dark color by a less dark one, wrecking contrast
and thereby acccessability.

~~~
klodolph
> In that interpretation, the authors point is even less valid.

The author's point is quite valid. #000 is a bit harsh and should be used
sparingly.

> In that case he just advocates substituting a dark color by a less dark one,
> wrecking contrast and thereby acccessability.

That's pretty dramatic... just by swapping out black for a dark color you
_wreck_ contrast? No, that's wrong.

Check out the WCAG guidelines. Recommended contrast ratios for body text are
3:1 (minimum), 4.5:1 (level AA), or 7:1 (level AAA). The linked article uses
#113654 on #FFFFFF, which has a contrast ratio of 12.5:1, which meets the
highest level of the accessibility guidelines for body text contrast.

Meanwhile HN has text #828282 on #F6F6EF with a 3.54:1 contrast ratio. Barely
meets minimum contrast guidelines for people with _good_ eyesight. HN even
features some #AFAFAF text, with a barely-readable 2.02:1 contrast ratio.

~~~
jasode
_> Meanwhile HN has text #828282 _

To clarify a bit... the #828282 is for some header info like story url domain
in (parentheses) next the title, HN user names, relative timestamps, etc.

The main body text of _comments_ which is the majority of content is _#000000
total black_ and because of that, the high contrast makes it very readable. I
hope HN never succumbs to fads and copies other websites that think it's
stylish to use hard-to-read gray text on white or off-white backgrounds.

------
Broken_Hippo
This is just bad advice. From an artist's perspective, folks just have to
realize why they are making the choice. If you want a painting to look
natural, by all means - avoid black most of the time. Black, like grey, is
generally something that has color to it where a standard black paint really
won't have the depth.

But not everything needs to look natural. Black text? Just fine. I do a lot of
abstract art: Black works well. I'm not going to give up black ink linework
any time soon.

~~~
mudita
His bottom line "when you find #000000 in your color picker, ask yourself if
you really want pure black. You’re probably better off with something more
natural. And if you’re feeling adventurous, try staying away from the left
edge of the color picker altogether" is much less radical than his title
"never use black".

I think this more subtle statement is fair advice to beginners in design, who
might sometimes make an unreflected choice of black or not be aware that
shadows aren't just black.

So in my opinion it's probably bad advice for more experienced artists like
you, but it might be very helpful advice for somebody else.

~~~
Broken_Hippo
It isn't helpful, though. It creates false rules for folks, and his conclusion
is false.

It doesn't take long to explain where such rules came from and the effect they
have. He's just parroting an "art rule" that isn't and then explaining some of
his own process while acting like it is a hard-and-fast rule. I should mention
that this "art rule" is the most commonly repeated "art rule" that folks
repeat. I've had this conversation before.

(Seriously, I'm sitting here from the side of helping others people do art
when they are a beginner, and have for some years. I've taught a weekend art
class for children and have been making art since I was young - I started oil
painting before I was 10. I'm over 40 now).

------
foxdev
>> _Here’s a bit of a contrived example… Dribbble has a pretty awesome feature
that lets you search for shots by color. If you search for shots with pure
black and shots with “real black” which ones feel better? Not the ones with
pure black in them._

They both look fantastic on my new matte screen laptop in 2020. That's why
updating your assumptions on the regular is a good idea. It's only 8 years
later and this is already getting out of date.

~~~
MereInterest
A bit of a tangent, bit where have you found a matte screen laptop recently? I
much prefer them for handling glare, but glossy screens seem to have taken
over completely.

~~~
dguo
Lenovo ThinkPad X1 Carbon and Extreme laptops have anti-glare options for the
display:
[https://www.lenovo.com/us/en/laptops/thinkpad/thinkpad-x1/c/...](https://www.lenovo.com/us/en/laptops/thinkpad/thinkpad-x1/c/thinkpadx1#compareSection)

------
dang
If curious see also

2018
[https://news.ycombinator.com/item?id=17334627](https://news.ycombinator.com/item?id=17334627)

2013
[https://news.ycombinator.com/item?id=6581253](https://news.ycombinator.com/item?id=6581253)

Discussed at the time:
[https://news.ycombinator.com/item?id=4357002](https://news.ycombinator.com/item?id=4357002)

------
blauditore
The argumentation basically boils down to the fact that black induces too much
contrast with other design elements. That's because those were not made with
such context in mind.

If you look at the metro design language as used by Windows Phones[0] a few
years back, this worked perfectly fine, was pleasant to use, and very gentle
on phone batteries.

[0]: Random example:
[https://i.pinimg.com/originals/63/b6/bd/63b6bd3d59cc3f65782b...](https://i.pinimg.com/originals/63/b6/bd/63b6bd3d59cc3f65782b85fac04aca96.png)

------
thordenmark
Black is beautiful. You get this bad advice in art school to not use black
from some instructors who are almost religious about it. When you study great
painters from the past, like Sargent, black was an essential color on their
palette. Frazetta made stunning use of pure black.

~~~
rrrrrrrrrrrryan
Like all things in art, chiaroscuro has fallen in and out of fashion over the
centuries. That said, things have undoubtedly accelerated - we cycle through
trends more quickly today.

At some point in the early 90s, songs were either soft, or they were loud, and
it gave Nirvana a beautiful opening to dial that contrast up to the max.

The moment all our websites become shades of gray, some rebellious designers
will buck the trend, create stunning interfaces with pure blacks and bright
whites, and the cycle will begin anew.

These sorts of absolute "rules" like "don't use pure black" are silly, of
course. We have to have some understanding of the context: Is this a website
for marketing purposes, or something which must be read for hours on end? On
what kind of screen is this being viewed? (LCD? OLED? E-paper?)

But even if the rules of thumb are silly, they're still important to learn - a
good artist has a deep enough understanding of the rules to know when to break
them.

~~~
mlyle
Yup, it's more like.... "are you REALLY SURE you want to use pure black?"

------
nottorp
Do use black. Use whatever gives you high contrast, to start with. Pretty !=
usable.

Not to mention that staring at a screen that is basically a light bulb pointed
at your face is bad for the eyes. Anything that reduces the amount of light
you're bombarded with is good.

------
sascha_sl
What if you're designing for OLED panels, where black is a stand in for "pixel
off", which saves power and can help to hide bezels or (as with the default
iPhone X Wallpapers) a notch.

Sure, it's not trivial to get right, and it should definitely not be used
outside backgrounds, but never is a harsh word.

------
Jemm
For accessibility, please use black text. Just look at Hacker News and grey
text on bone background. It is not good for those of us with vision
impairments.

------
dathinab
> Black overpowers everything else.

Exactly that's why there is one single wide spread place where black is the
default, one place where companies probably could have saved money by using
gray but didn't.

And that's text.

Not titles, not headlines or other similar text based constructs but boring
continuous text.

Another thing well known to be important about text is readability.

But one companies designer had a wonderful idea to use gray text on gray
background and do so at a place which works as a model for other.

And now it's everywhere.

It's annoying, it's exhausting and it's drives me mad.

Luckily the designer of this page knew what he did.

He used dark blue, which has a strong contrast and can be mistaken with black
when sleepy.

But you who made low contrast gray on gray a thing, know that I don't like you
as you have cause me many troubles ;=)

------
dvfjsdhgfv
The problem is, people misinterpreted it in all possible ways, the result
being low contrast between the background and foreground text you can find
everywhere. The second culprit after the font being too small.

------
strogonoff
Reducing blackness of text to color is a mistake. Effective perceived contrast
really depends on weight, size, tracking and leading. Same color looks darker
with heavier font and less contrasty with thinner type set more speciously.
Compare body text in Swift docs in Safari (uses macOS system font stack so may
look differently on other systems) and Django docs for an example.

------
flixic
The popularity of “pure black” themes for apps on OLED screens is the biggest
counterpoint. When designing dark mode for mobile, please use #000.

~~~
frosted-flakes
This works well for static screens like ebooks, but scrolling text on a pure
black OLED background causes smearing because it takes longer for the pixel to
turn on than to change colours. This effect is especially noticeable on my
phone at low screen brightnesses.

On Android, many apps actually have three colour themes: light, dark, and
black, where dark uses a dark grey background.

I also like how Samsung One UI handles this, where any text is on a frame with
a grey background, but everything else has a pure black background. Example
here:
[https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/...](https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/Samsung_One_UI_1.jpg)

------
BurningFrog
My idea for making pay websites work is that you always serve all articles,
but those who pay get a much better rendering of the text.

If the Economist lets me read all their articles, but it pink on gray comic
sans text, I get a chance to become hooked on their great articles, _and_ a
reason to upgrade.

------
specialist
I love opinionated esthetics like this. They're like schools of thought. Back
when I did user interface design and technical writing, I would sometimes
consider black design elements, like doing the squint test to see how headings
balanced body text.

FWIW, physically printing black can be very interesting. "Rich black" includes
the other colorants (cyan, magenta, yellow). IIRC double black is having more
than one (lithographic) plate with black. Really subtle stuff that you don't
notice until something seems wrong.

[https://www.prepressure.com/design/basics/rich-
black](https://www.prepressure.com/design/basics/rich-black)

Then of course there were many partisans of the misc suppliers of black ink,
each claiming superiorities.

------
mouzogu
This article is so true. I really have trouble reading white on black, or
differentiating different shades of black and gray, it all blends together,
further exacerbated by using a low blue light setting on my monitor.

This is something that worries me about the trend towards dark modes and often
complete lack of light mode alternatives (Steam). And as others have
mentioned, the complaint about light modes being too bright is often a
brightness setting issue and not a design issue.

There was a trend a few years back of using really light text colours on
white, that's awful too. We need to respect the rules of contrast before what
may "look" appeasing to the designer.

------
gherkinnn
2012 tag is very fitting. I remember being bored by all the off-black designs
produced back then (2008-2013?). It all looked mushy and spineless.

When The Verge came on the scene in 2011, they showed just how pretty the
proper use of black can be.

------
necovek
If you are in a room with no light sources, shuttered windows, what colour do
you see? I would call that black.

Sure, it's rare to be in such a setting nowadays (at least your cellphone
indicating it's charging will be there, or there'd be stars or moon outside),
but I think caves are perfectly natural, and you get pure absence of light
there. Or 10km below the sea level.

As others have pointed out, you rarely even get pure black, especially with
text: on top of reasons others have mentioned, displays use subpixel rendering
to make an illusion of higher dpi (similar techniques are employed in the
print industry).

------
baumgarn
There is nothing wrong with 100% black. It's good to understand the author's
reasoning, but better to regulary break one's self imposed rules. Design
doesn't have to be smooth all the time.

------
kbutler
Design tip: There is no such thing in the real world of materials and displays
as pure black or pure white.

Even if we had pure black and white, the real environment of the user would
tweak the white balance.

The same design or page, taken from a dark bedroom to an office to bright
sunlight will range from unusable through fine (and maybe back again).

So a designer can say #000 against #fff is too high-contrast for some
environment, but some users will be in environments where it is not.

------
Finnucane
In ye olde days, print designers avoided pure black because it didn’t print
well. Sometimes you’d put a light screen of blue or red over it so it didn’t
look dead.

------
guenthert
Is this a good place to complain about the choice of colour in KDE's konsole
and threaten the developers with physical violence?
[https://stackoverflow.com/questions/38277542/minicom-
black-b...](https://stackoverflow.com/questions/38277542/minicom-black-
background-color-is-not-respected)

------
amelius
My computer is black. My keyboard is black. My mouse is black-ish.

Many beautiful things are black. Like a grand piano, or its black keys.

~~~
chrismorgan
Take regular photos of these things, and you’ll find that they’re not _black_
black.

This article is specifically about the blackest black possible on screens.

~~~
pessimizer
My monitor when turned off, is also not _black_ black. So the blackest black
possible on my screen is around the same color as these other black things.

~~~
chrismorgan
Yeah, but the point here is that everything’s relative: #000 is the blackest
black possible on screens, so within the scope of the screen if you use it you
can’t get anything blacker. Within the scope of the screen, the items you
describe won’t be #000.

------
ajani
Design Tip: Never say never. Decide what's appropriate. Rules change in
different contexts.

------
cercatrova
#000 is the correct color for backgrounds on articles, and #fff is the correct
color for text on that background. I wish I could make everything have an OLED
pure black theme, but sadly many apps use gray, very annoying.

------
sporkologist
I really don't dig the dark blue text. Historically that's the color of HTML
links.... just make it black, everyone's used to it already.

------
antonvs
Is the Facebook friend request screenshot intended to show what happens when
you have a tendency write long, detailed articles about the color black?

------
numpad0
User: selects dark mode

Website: shows bright gray

User: _screams_

------
adultSwim
The text on this page is a little hard to read. It could use more contrast.

Black?

------
tuatoru
Design tip: don't listen to designers who talk in absolutes.

------
xenonite
Is that why I prefer the iPhone design with a white front cover until iPhone
8? This is by the way also much easier on the eyes when reading because it
reduces contrast, thus avoids ghost images.

