Never Use Black (2012)

I have been a professional artist for about twenty years and it is my considered opinion that any &quot;rule&quot; given out to beginners is actually a <i>warning</i>: violate this rule and making something that looks good becomes <i>a lot harder</i>, so you should probably better make sure you&#x27;re not violating any other &quot;rules&quot; unknowingly.<p>If you know damn well that you&#x27;re violating multiple rules then sure, go for it - break your perspective, fill the drawing with tangents, shade with black, etc, break the <i>fuck</i> out of these rules, and you can end up with something pretty good. You have to know your shit backwards and forwards to really pull this off; go look at how solid Picasso&#x27;s pre-Cubist stuff was, for instance.<p>There are good reasons to choose to use black and there are good reasons to avoid using it; this article talks about several. IIRC, one of the reasons painting teachers traditionally like to tell you to avoid it is because most commonly available black pigments can very quickly ruin the saturation of any other color you mix it with, ending up with unpleasantly grey shadows. But if you do more graphic work that treats each color as a largely separate entity then a lot of solid black can make stuff positively <i>glow</i>.

#000 on my screen isn&#x27;t going to be pure black either. There&#x27;s ambient light, the black level on the monitor, etc. Several of the examples of saturated grays in this article are low-contrast UI that&#x27;s hard to read. Please don&#x27;t do that.<p>&quot;Words on web pages aren&#x27;t black&quot;. But they should be #000 or close to it. Let the user&#x27;s screen and environment determine the rest.<p>Interfaces are artificial constructs designed to be as readable and understandable as possible. Looking at the color of shadows and physically dark things is unhelpful for designing readable interfaces with sufficient contrast.

I have a design background and have written a lot of CSS, and I have opinions so just interpret this all as a personal preference if you want.<p>* It&#x27;s basic floor&#x2F;ceiling stuff. Once you go #000000, you can&#x27;t go any darker. Are you 100% sure the thing you&#x27;re making #000000 is the absolute darkest thing on your site&#x2F;app you&#x27;ll ever need to declare?<p>* Conversely, never use white! Modern macOS sucks at this! A large window of Mail.app in light mode is pretty blinding. What if you want to add a subtle highlight to a button border on a white background? #fafafa was always a go-to white for me because its easy to remember.<p>* Shadows are really never black and your CSS shadows will look better if you don&#x27;t default to black. Toggle &#x27;tint shadows&#x27; on the _excellent_ css shadow palette generator: <a href="https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;shadow-palette&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;shadow-palette&#x2F;</a>. Play with background colors, you&#x27;ll see.<p>* Your design will never please everyone, especially anything close to a majority on certain tech news aggregators.

Huh, some of this may have to do with the medium?<p>Where I&#x27;ve done the most graphic design, offset printing, you get 4 colors (CMYK), and you can pay a little extra to run another plate of a spot color.<p>In that environment, if you use rich black instead of just K, you&#x27;ll see registration errors that hurt legibility, especially for small print and at any light&#x2F;dark boundary. I&#x27;ve got this deep, deep muscle memory of checking the separations to see if we used any accidental rich blacks -- fairly common with advertiser art, but also common in illustrations.<p>Of course on color pages things are a little different -- looking at the separations, and watching how our photo editors edited levels to make them look good in print, definitely made me think hard about how much hidden detail is in the blue part of an image and how colorful shadows are!<p>But we were usually on a budget and usually stuck in K. This has for sure colored my design choices, and it&#x27;s helpful to see the reminder to try designing away from pure black on the screen.

I hate that websites don’t use pure black for text anymore. As someone with an astigmatism, it makes the text much harder to read. I keep finding myself disabling css with inspector tools until the text is back to the user agent’s default of #000 again.

This 2012 advice has aged poorly, and as with all absolutes, fails to consider context, capabilities, and functional goals.<p>In the specific case of e-ink, where colour is usually nonexistent (there are some colour devices, these are the exception and have limited rendering), where greyscales are limited (16 shades on high-end devices, and often less), and total foreground&#x2F;background contrast is limited (restricted more by the dark &quot;white&quot; than the light &quot;black&quot;), the advice to avoid saturated blacks is quite poor.<p>This is most applicable to text, where the most frustrating experience is reading a greyed-out or coloured text, often on a shaded background. Firefox&#x27;s Reader Mode is a lifesaver, as is the EInkBro browser. <i>High-contrast text and black-on-white themes are strongly preferred.</i> Ironically, I use the Dark Reader extension to force <i>light</i> themes on numerous websites. The fact that the extension itself features a dark theme for its controls is ... unfortunate.<p>Generally for e-ink, I&#x27;d suggest:<p>- Use solid blacks and high-contrast whites where possible. This should <i>always</i> be the case for text if at all possible. Reversed white-on-black should be reserved for controls and emphasis.<p>- Line art and etchings render wonderfully. There&#x27;s a reason Onyx features these in its marketing and screensavers, they look truly delicious on the devices. See for example: <a href="https:&#x2F;&#x2F;blog.the-ebook-reader.com&#x2F;wp-content&#x2F;uploads&#x2F;2019&#x2F;03&#x2F;Onyx-Boox-Note-Pro.jpg" rel="nofollow">https:&#x2F;&#x2F;blog.the-ebook-reader.com&#x2F;wp-content&#x2F;uploads&#x2F;2019&#x2F;03...</a> and <a href="https:&#x2F;&#x2F;www.e-readerweb.nl&#x2F;test&#x2F;data&#x2F;articles&#x2F;images&#x2F;lightbox&#x2F;big&#x2F;onyx-boox-nova-3_60587_5.jpg" rel="nofollow">https:&#x2F;&#x2F;www.e-readerweb.nl&#x2F;test&#x2F;data&#x2F;articles&#x2F;images&#x2F;lightbo...</a><p>- For photographic and shaded images, halftoned or dithered images are an improvement over shading which is at best posterised. The high DPI (200--300 on most screens) achieves near-photographic quality at a modest viewing distance.<p>- For icons and UI elements, line- and solid-block art is much clearer and more distinctive than shaded or coloured elements. The top four lines of icons in this image are Onyx-provided applications, the lower rows are third-party apps. Onyx&#x27;s icons are much better suited to the device: <a href="https:&#x2F;&#x2F;sm.pcmag.com&#x2F;t&#x2F;pcmag_au&#x2F;review&#x2F;o&#x2F;onyx-boox-&#x2F;onyx-boox-max-lumi_n9tp.1200.jpg" rel="nofollow">https:&#x2F;&#x2F;sm.pcmag.com&#x2F;t&#x2F;pcmag_au&#x2F;review&#x2F;o&#x2F;onyx-boox-&#x2F;onyx-boo...</a><p>- Yes, there are some colour devices available. They&#x27;re the minority, saturation is limited, and hue fidelity varies markedly from original art. See: <a href="https:&#x2F;&#x2F;www.liseuses.net&#x2F;wp-content&#x2F;uploads&#x2F;2020&#x2F;08&#x2F;onyx-boox-nova-2-color-liseuse.jpg" rel="nofollow">https:&#x2F;&#x2F;www.liseuses.net&#x2F;wp-content&#x2F;uploads&#x2F;2020&#x2F;08&#x2F;onyx-boo...</a><p>Keep in mind that <i>all</i> display systems offer limited ranges of darkness, intensity, hue range, and saturation, and that their <i>best</i> capabilities can be severely degraded depending on viewing conditions. Emissive displays achieve their best results under dark ambient conditions, and become difficult or impossible to read under bright light or sunlight, whilst e-ink devices shine (or more accurately, <i>reflect</i>) at their brightest under direct sunlight.

Now you have a new problem of no one agreeing on a standard saturation level. I&#x27;m noticing this more with &quot;dark themes&quot;: everyone has a different idea of dark gray.<p>Since dark themes naturally lead to subduing all other colors except for little accent pieces, the screen is a collage of dark grays to the point that, instead of the background fading away, the background is now stealing the show from everything else. It&#x27;s this dismal bouquet of gloomy colors and it&#x27;s hard to focus on the content.<p>Contrast this (pun!) with terminals and console apps: your terminal is a constant background color while you&#x27;re working. It doesn&#x27;t change its shade of gray as you go so it really does stay as a &quot;background&quot; and isn&#x27;t distracting.<p>Finally, I feel dark themes exhibit this more than light themes. I feel years of different subtle paper whites has made me less sensitive to variations.

Since getting OLED displays I&#x27;ve started using more all black themes. Especially at night it helps decrease the amount of light my phone emits significantly (or so it seems).

Article&#x27;s CSS:<p><pre><code> --black: #113654 </code></pre> Ok, black enough for me. The problem is when you see shit like:<p><pre><code> color: #555 </code></pre> (or worse)<p>On text that&#x27;s supposed to be dark. Tires your eyes and makes reading anything long painful. But hurrrrr it&#x27;s not black it&#x27;s modern!!1.

Now turn off your monitor! Do you see pure black, or maybe you see the reflection of your room and yourself? #000000 might not be pure black.

Talking about text, as my eyes get older I need more contrast to make things legible. This low-contrast nonsense is anti-accesibility and makes the web harder to read for a lot of the population.<p>As for artwork, using this for foreground artwork makes things look hazy and over-exposed. Have a look at a good quality black and white print and see how black the blacks are. I want to see real blacks in images.

This is terrible advice for a world with OLED. In an OLED display #000 means the light is off which about as &quot;natural&quot; as you can get.

A lot of blogs over the last decade took this advice too seriously and set up dark grey on light grey color schemes that are really hard to read.<p>I can see using 08 for general text so that headers and other stand-out bits can be 00. And, I can see using an off-white to tone down a bit from paper-white.<p>But, monitors in general only cover a tiny bit of the brightness range you are accustomed to in daily life. Pretty much the range from &quot;black paper&quot; to &quot;white paper&quot; in a normal office setting. Certainly not &quot;Vanta Black^(TM)&quot; to &quot;Staring at the Sun&quot;. And, 256 steps is only just barely enough to cover that tiny range semi-smoothly. Using that tiny range effectively is a struggle. Restricting yourself to subset of that range is an even bigger challenge.

Along the same lines, Edward Tufte recommends Josef Albers&#x27;s book <i>Interaction of Color</i>, which teaches that there&#x27;s no absolute colors - it&#x27;s all relative.<p>Magazine piece on Albers and his work: <a href="https:&#x2F;&#x2F;www.schirn.de&#x2F;en&#x2F;magazine&#x2F;context&#x2F;josef_albers_interaction_of_color_peter_halley_color_theory&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.schirn.de&#x2F;en&#x2F;magazine&#x2F;context&#x2F;josef_albers_inter...</a>

&gt; Whenever you’re working with grays, add a bit of color to them and they will feel less dull.<p>This is such a great advice, and one that&#x27;s easy to not think about if you are not experienced enough. Just tweaking grayscale colors a bit like that makes a huge difference.<p>I&#x27;m not sure I agree when OP says that shadows are not black though, like sure a road with a whole bunch of stuff around it and some lighting source somewhere can look blue-ish, that&#x27;s not measuring the color of the shadow though (whatever that means, it&#x27;s not like shadows are actual physical things), that&#x27;s measuring the color of the road.

Windows 10&#x27;s dark theme basically has this problem: it makes everything #000000 black, which is not most people usually want. It&#x27;s really tiring to the eyes and I switched back to the light theme instantly.

Past comments: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=6581253" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=6581253</a>, <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24303042" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24303042</a>

I don&#x27;t have an extensive design background, but took art classes through out high school and college. What he is saying as absolutely true for painting and drawing images - pure black or even mixing with black puts a hole in the page that is almost never the effect you are going for.<p>But when we moved on to graphic design, that advice changed. Pure black ink on white has been used as an art form for centuries. The sharp lines and contrast create an effect that really pops which is often what you want. And the gamut of (non-HDR) monitors isn&#x27;t wider than what you would get in these mediums, so that isn&#x27;t a concern.<p>You don&#x27;t want to use it everywhere, but it absolutely has its place. If anything, the trend towards low-contrast design is worse than over-use of high contrast elements these days.

I really like the crispness of actual black.<p>Note: the font you&#x27;re reading right now is #000000.

<i>non-black shadows</i><p>That’s cool until it doesn’t match with the lighting in your room. I believe that designers love to work in a complete darkness, otherwise all these shadows start looking very unnatural to the surroundings. We never get the “real” coloring (or contrast, or curves) on our screens, no need to make it worse by adding light sources that aren’t there. You can’t even make two identical part number displays look the same side to side, they’re all different (esp. in 2012).<p>The text in the article is blue, not dark. Paintings look very off too. Maybe that’s the point, but my light isn’t acid orange to begin with. Also, I feel dizzy by looking at colored shadows that some video bloggers use, it feels like looking at the cheap “white but not really, blinding but not bright” led bulbs.

That said I rather like black and white for readability. I&#x27;ve even got a chrome extension to be able to read stuff without all the grey on grey, cool but almost can&#x27;t read it stuff.

Except! For backgrounds on powerpoint slides around images. That black on a projector becomes invisible and you&#x27;re left with just the image, or they just blend with the border of the monitor and you&#x27;re left with just the image.

Don&#x27;t go to far in the other direction. Especially when it comes to text: <a href="https:&#x2F;&#x2F;www.contrastrebellion.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.contrastrebellion.com&#x2F;</a>

I know that this is meant more towards design for digital screens, but I recently learned something interesting about black and gray tints when I was looking for colors to repaint some rooms in my house and ran across full spectrum colors.<p>The theory behind this is that actual black and gray tints put in paints absorb light and most main stream paint colors use it to tone down colors. It does the job and is less expensive, and will make the color a bit more consistent in all light settings, but the colors tend to be a bit more muddy looking.<p>This was why the impressionist painters generally didn&#x27;t use black or gray tints directly. If they wanted a shade that looked black etc. they would combine tints from the ROYGBIV spectrum to create them which is why you see a bit of a vibrance in their paintings.<p>Now that I&#x27;ve done a few rooms with the full spectrum and can compare you can definitely see the difference. Another fun benefit it that the full spectrum has more nuance depending on the light etc.. It is also why it is impossible to get an accurate color match of expensive full spectrum colors such as those by Farrow and Ball to try to save money with a less expensive paint. One is using several tints, the better ones a minimum of 7 different ones with no black and grey, while the standard paints use 4 (maybe 5).

&gt; Why does the Facebook Mobile interface feel so nice?<p><i>Checks publication date</i><p>Ah.

I always make my text black by overriding CSS that makes it some stupid shade of grey.<p>But &quot;never use black&quot; is a good rule for backgrounds. I worked in military and nuclear UX, and the standards there were pretty clear to not use black backgrounds in software interfaces. Driven by solid human factors research I had always assumed.

Idk, I really like the contrast against pure black on OLED screens. For some reason it infuriates me on LCD though.

And we have to live with the consequences of this advice today. People misinterpreted it in all possible ways, often by using gray instead of black - which might be nice for some, but is terrible fore readability. Fortunately we have the reader mode so I can ignore their design choices.

I would say it&#x27;s more of a fashion thing.<p>Back when many people are still using black, more nuanced coloring would pleasantly stand out because it makes the former look <i>blunt</i>.<p>Now, after the doctrine has taken over the world for quite some years (the article was from 2012), designs like Vercel landing page[0] feel like fresh air to me. I like the aesthetics because it&#x27;s <i>clean and straightforward</i>, and how it communicates in a clear way by punching important information in my face.<p>There&#x27;s a certain dynamic behind the game, since what I perceived as <i>blunt</i> before, I perceive as <i>clean and straightforward</i> now.<p>[0] <a href="https:&#x2F;&#x2F;vercel.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;vercel.com&#x2F;</a>

Thought you meant the python linter, was already crafting an argument for it before I read your article lol

On a mostly unrelated note, I&#x27;ve always thought that there should be two color scales for a display; one for UI elements and text, and another for images. For full-screen video, I can switch the brightness levels on my monitor, but for websites with embedded videos and white backgrounds, I have to choose between the video being too dark or my monitor doing a fair imitation of an SAD lamp.

Friends who work in the VFX compositing departments always talk about how they integrate the cg elements into the video by doing something called &quot;lifting the blacks&quot;. They can say it better, but this is what I understood the process as.<p>When you render out your 3D elements you can get a realistic output but it won&#x27;t match to the real environment they should be part of. So with a bit of tooling and artistic eyeballing they match the darkest point of the real video to the darkest part of the cg render resulting in the feeling of the 3D element integrated in the real environment. They call it &quot;lifting the blacks&quot; because usually the 3D elements which are rendered are pretty dark, as in the shadows and stuff being black and they need to saturate them and add more light to be able to fit into the real environment, which is mostly done in a compositing software like Nuke.

I recall reading this once before, but I quite like full black backgrounds with full white text on them. I think it looks clean and sharp. Even on my IPS monitors.<p>I&#x27;ve always been annoyed with dark modes using grays instead of black. Thankfully OLED stuff is getting more popular and I can use the setting meant for them on whatever screen I want.

Please please please us black. The web is not a painting Be nice to us folks with less than perfect vision.

The whole premise that “nothing in nature or the real world is true black” does not address the fact that text, language, and words are not of the real, physical world. So why should I make my words the color of the deep ocean instead of vast interstellar voids?<p>What is the natural color of language?

Your screen probably can&#x27;t display black anyway.

And suddently, OLED screens become useless

From Fast Show to artistic advice: I shall have to get the black out.<p>I just don&#x27;t know, &quot;never&quot; is a big word. Black can be useful in kind of an absolute, floating in space, NOTHING IS HERE fashion.

Very interesting and true.<p>Reminds me when my mom taught me that in oil paintings the “black” colour of a scene should be made by mixing all the colours used - there is information in “black”. Look closely at an oil painting, you’ll see that “black” has hues of red in it.<p>Also interesting, in the winter an asphalt road is even less black than typical due to the evaporated salt on it. This is a key way to notice if your tires will have grip on it (if a patch looks black, it could be black ice).

One of the reason I was so disturbed by Github&#x27;s dark mode when they first introduced it. And I was not the only one [1]. Thankfully, they have tried to address with different shades of dark (`dark dimmed` and `dark high contrast`) since then.<p>[1] <a href="https:&#x2F;&#x2F;blog.karenying.com&#x2F;posts&#x2F;github-darkmode-sucks" rel="nofollow">https:&#x2F;&#x2F;blog.karenying.com&#x2F;posts&#x2F;github-darkmode-sucks</a>

The reason outdoor shadows appear blue is obvious in retrospect (think about it for a second if you want to...):<p>Objects in the sun&#x27;s shadow are usually lit primarily by the sky and the sky is blue! Maybe this occurs naturally to others, but I never thought about it until it was pointed out to me in a photography article.

He should tell this artist:<p><a href="https:&#x2F;&#x2F;www.theguardian.com&#x2F;artanddesign&#x2F;2018&#x2F;aug&#x2F;21&#x2F;holed-up-man-falls-into-art-installation-of-8ft-hole-painted-black" rel="nofollow">https:&#x2F;&#x2F;www.theguardian.com&#x2F;artanddesign&#x2F;2018&#x2F;aug&#x2F;21&#x2F;holed-u...</a>

What’s the actual research on reading performance with various colour schemes on relatively modern screens?

I don’t see a compelling reason not to use black? Actually since he argues nothing really is black, probably it’s harmless to use it!<p>I’m also not sure if this article is about print, screen, or both.<p>I prefer black on white for default on a page, the user can adjust their monitor or use a css patch to their liking.

True black - that is, a black that absorbs almost 100% of light - is actually really freaking scary. And disorienting.<p>I&#x27;m not talking about the absence of light, here - pitch black is something else - I&#x27;m talking about paint or other coloration that absorbs light.<p>Black 3.0 is one of these.

On choosing colors, I might remind designers that about 25% of males are <i>partially red-green</i> color blind. They can easily distinguish fire engine red from emerald green, but otherwise a lot of reds, greens, and browns look much the same.

Maybe, but now that I have an OLED, I really want blacks to be truly black.

For me, it helped to stay away from RGB and CMYK.<p>HSL and the like delivered better results.

I struggle with any article that uses the word &quot;never.&quot; We use black (or near to it #101010) on our mobile app. It&#x27;s great for usability and makes select use of colors standout.

When I did (pre-GCSE) art at school I remember the teacher saying that shadows look like the opposite (yes, I can&#x27;t remember on what axis!) colour to the light casting them.

I miss these design trends of decades past. The gradients. The skeuomorphism. The rounded corners. The buttons that look like buttons. The letterpress text.

I thought this was about the Python formatter called black, and I was already getting infuriated by the title alone.

But can we still paint the bike shed black?

If nothing is truly black, the black paint isn&#x27;t black either, so I can use it. Checkmate!

Years ago a dev on my team would harp on this. We replaced black colors with #333.

I thought that is common knowledge most designers don&#x27;t use pure black.

So what would be better than #000 for text on a webpage? Got me curious now

Whatever. Why throw away 8% of your monitor&#x27;s color gamut &#x2F; dynamic range? Tip to the author, just turn up brightness on the monitor, or shine a desk light on it. Or get a monitor that bleeds some backlight or light from neighboring pixels. Unnaturalness fixed.<p>It&#x27;s like saying digitized audio should never have complete silence in it because you rarely hear that in nature. Well, you rarely hear that in the room you&#x27;re listening in either, or your own inner ear. Doesn&#x27;t mean you have to add those sounds to the audio.

What a relief to click on this and see it isn&#x27;t a screed against <a href="https:&#x2F;&#x2F;github.com&#x2F;psf&#x2F;black" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;psf&#x2F;black</a>

(2012)