
Design Tip: Never Use Black (2012) - koopuluri
https://ianstormtaylor.com/design-tip-never-use-black/
======
latte
>> Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow
isn’t black. Words on web pages aren’t black.

A #000 pixel on the screen of your mobile or laptop isn't black, either.

I strictly adhered to the principle of never using black until I was
specifically asked by one of my users that has presbyopia (and most people
over 50 or 60 have it, to some degree) to make the text black. Black text was
much easier for them to read than the standard Bootstrap dark colour with the
same font size.

~~~
chadlavi
WCAG guidelines: [https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-
visu...](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-
contrast-contrast)

the other commenter was right, 4.5:1 ratio minimum.

~~~
amluto
How do they define contrast? Is it the actual linear light (gamma corrected)
contrast or are that saying that, if R==G==B, then you want R1/R2 >= 4.5?

------
bitL
Black looks absolutely gorgeous on OLED displays. I'll keep ignoring this
"advice" (disclaimer: I studied visual arts for almost a decade and am
entitled to my own opinion). I have seen so many contrarian statements: "Never
mix red and green" \- "Always put red and green together" that I just consider
most designer advice a folklore.

~~~
asfdsfggtfd
5% of males are red-green colorblind. Never mix red and green. If you do 2.5%
of your audience have just stopped using your product/looking at your
presentation.

~~~
VBprogrammer
As a red-green colourblind male. I'd temper that statement to don't mix red
and green for encoding information. Ideally don't use colour as the sole means
of encoding information anywhere.

The experience of colourblind people can vary wildly but for me other colours
are harder to discern than red vs green. Blues, purples and pinks all are all
very tricky.

If however you want to use red and green for some styling element, knock
yourself out!

~~~
asfdsfggtfd
You are in many ways correct. Except that styling often crosses over into
encoding information without the styler realizing it.

------
blattimwind
> When you put pure black next to a set of meticulously picked colors, the
> black overpowers everything else. It stands out because it’s not natural.
> All of the “black” everyday objects around you have some amount of light
> bouncing off of them, which means they aren’t black, they’re dark gray. And
> that light probably has a tint to it, so they’re not even dark gray, they’re
> colored-dark gray.

But black on a screen is not an unnatural black per se. On most screens you
will get a baseline brightness and tint, and larger black areas pick up
(diffuse or clear) reflections from the environment.

------
TrinaryWorksToo
I use an oled display on my phone. Black is really nice on it and I wonder if
that changes things. Also I see this defense of not using black as an excuse
to have a poor contrast ratio. I really enjoy black on white or vice versa
because you can't beat that contrast.

~~~
ahoka
I really like WP8 because of this. It's high contrast blacks were really good
on an OLED. Easy on the eye and battery.

------
kbutler
> Black overpowers everything else

This is the key idea of the article - very high contrast is powerful visually,
and you should avoid too high contrast if that isn't what you want.

This can be good advice, but realize that #000 is not pure black (colors on
the screen are also colors in the environment, so they may get reflection or
be emitting light, even if they are displaying #000), and some users may
prefer or need high contrast for accessibility, especially in very bright
environments.

But if you want to see the closest to pure black you can get, go to a total
eclipse - that disk of the moon surrounded by the sun's corona was _amazing_!
Such an intense contrast, and it really did overpower everything else.

And yes, even that isn't "pure black" \- but it sure felt like it!

~~~
jpindar
Another example of very dark black is the side of a stack of razor blades or
Xacto knife blades. Because of the geometry, light goes in, but doesn't
reflect back out.

------
SomeHacker44
Speaking solely for myself, I really dislike apps which use dark gray and
light gray instead of full black and full white (or something very close to
it) in their "dark UI."

It gets worse as you age and presbyopia sets in.

It is so much easier (for me, at least) to read high contrast text than this
modern trend of "gosh don't use real black and white" in the UI. Additionally,
actual pixel black is very (um, perfectly) energy efficient on OLED displays
like my iPhone X and Alienware 13.

I like the discussion of black in art, though.

------
lvncelot
Regardless of whether I agree with his point or not, using a "real life" photo
as an example, when it's heavily filtered is just ridiculous.

------
Rjevski
Unrelated, but I just checked his other posts about design and I miss 2012-era
design so much. Nowadays everything seems flat and boring with no personality.

~~~
Double_a_92
Because it has to be made in a way that also works on smartphones...

~~~
Rjevski
Pre-iOS 7 apps prove that non-boring design can work on smartphones too.

~~~
bitL
IMO it was partially due to push to retina screens and limited vector
authoring tools (SVG) that were available at that time (i.e. difficult to make
beautiful scalable icons if your authoring tools offer you mostly single-color
patches and at best some basic gradients). Not sure why are we still stuck on
that horrible design paradigm though.

------
Tepix
I like saturated colours more than the average guy. However, while pumping up
those colours, don't ignore contrast!

[http://contrastrebellion.com/](http://contrastrebellion.com/)

------
mynegation
Design tip: never use blue for regular text either. My first immediate
impression from the page was that it is one giant hyperlink (probably
visited).

~~~
SomeHacker44
I have a hard time reading blue text (especially if it is small, and even when
wearing glasses) due to chromatic aberration caused by my astigmatism in my
eyes. The first thing I do in any app which allows it is change all the mostly
blue colors to mixtures like cyan.

------
matty22
I'm glad this fad has shifted away from using washed out fonts on white
backgrounds since this article was posted in 2012. I am no designer and
choosing/judging color palettes is probably my weakest area, but man the whole
'never use black' thing was/is awful in my opinion. I strongly prefer a
website that uses #000 text on #fff background over some washed out gray
that's impossible to read on #fff background.

------
vidarh
First thing I did when clicking through to the article was to hit my shortcut
to switch the colours so the background is black to avoid the glare...

Incidentally I also read HN with a black background, use black terminal
backgrounds, black editor backgrounds. Sometimes I toy with brighter
backgrounds, but I prefer thigher contrast to brighter backgrounds every time.

Of course that might well be because no screen I have will give a pure black.

~~~
WorldMaker
> Of course that might well be because no screen I have will give a pure
> black.

OLED screens and their close approximations to "pure black" (unlit pixels) I
think are more reason to use dark themes with real black as background. It
uses less energy, is good for batteries, and sends less overall light into our
over-stimulated eyeballs.

------
ericsoderstrom
Just checked the gmail 'dark' background color, which always looked pretty
black to me. Is actually #111111

------
frexo2
In most cases black is not the best color, but I don't agree with the word
never. There are cases where black color is the best choice.

------
rurban
That's my biggest hope for GitHub. That the now black title bar will become
blueish. Black is horrible.

------
tabtab
This is highly subjective. Different people like different things.

------
EvanKnowles
Wow, Facebook has changed a lot - only thing that tipped me off that this was
an older (but still relevant) article.

