Never Use Black (2012)

https://ianstormtaylor.com/design-tip-never-use-black/

by josephwegner • 5 years ago

320 218 5 years ago

tim3332• 5 years ago

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

mroche• 5 years ago

80-90% grey background with 10-15% grey foreground (text) is an ideal contrast ratio/color scheme, for me. It doesn't burn my eyes out at night on my panels, in contrast to white-on-black schemes.

During the day, though, black-on-white all the way.

steerablesafe• 5 years ago

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.

stopachka• 5 years ago

...this is a good point!

djsbs2• 5 years ago

Agreed 00000 is not black, but the reflection is not from the backing layer but from the transparent glass.

if the glass’ reflection is greater than the emissivity of the actual screen, isn't the screen black for all purposes? After all, even if you painted the back of a pane of glass with vantablack you would still have a reflection of the glass!

Minor49er• 5 years ago

This reminds me of some difficulty I've encountered with printing computer images. #000000 often comes out as just-off-black. Computers use RGB while printing uses CMYK, with the K meaning "black". So in some places, like Vistaprint, I would have to specifically set K to a max value to make it look right

cyber_kinetist• 5 years ago

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

moffkalast• 5 years ago

Well at least the left explorer windows in a somewhat higher value, so we have that going for us which is nice.

breakfastduck2• 5 years ago

Windows 10 dark mode is unusable.

I don't understand how anyone can read white on black without their eyes hurting.

When I first tried it out I was instantly taken aback at how MS had used full black for their darkmode. Not suprising, considering their inability to implement reasonable design, but ridiculous nonetheless. I can't fathom how no one on their design team stepped back and thought 'maybe there's a reason dark mode is usually a dark grey instead of black'.

tentacleuno• 5 years ago

When I first tried it out I was instantly taken aback at how MS had used full black for their darkmode. Not suprising, considering their inability to implement reasonable design, but ridiculous nonetheless. I can't fathom how no one on their design team stepped back and thought 'maybe there's a reason dark mode is usually a dark grey instead of black'.

It is most likely due to AMOLED and their big investment in mobile technology (Surface, etc.) I imagine a lot of them have AMOLED screens, so a pure-black dark mode pays off here. Nevertheless, I can't imagine it would be hard to just let people choose the colour of the dark variant, like GTK / Qt theming systems do on Linux.

betwixthewires2• 5 years ago

White text on black is terrible with LCDs, but with OLED it is wonderful. Imagine dimming your screen just right, the only thing you can see is the text you want to read. It is much more easy on the eyes than even paper or e ink devices IMO, as long as the display isn't turned up too bright.

qalmakka• 5 years ago

Most applications look very weird on Windows 10 dark mode, especially some older Win32 apps that were not clearly designed around a dark theme. Windows Explorer looks particularly bad IMHO, it's just too dark and the icons clash badly with those almost pitch black folder backgrounds.

I generally avoid dark themes because 1. they are IMHO very ugly, 2. I find that "night mode" apps like redshift are much better for tired eyes, and 3. I noticed that black themes users often end up keeping a higher screen brightness level than me, which counters IMHO any benefit you may ever gain from night mode.

discreditable• 5 years ago

Speak for yourself. I love it!

foobarbecue• 5 years ago

What a relief to click on this and see it isn't a screed against https://github.com/psf/black

gurleen_s• 5 years ago

Thought the same thing. It’s such a godsend, and the first thing I install on every new machine or virtualenv.

neves• 5 years ago

he, he, me too. It really transformed the way I program. No more mental cycles devoted to best formatting.

jlongster• 5 years ago

Funny too because Ian (author of the posted article) designed the Prettier logo

zuj2• 5 years ago

Same here, clicking on the link I was thinking, here we go, one more negative opinion on the opinionated python formatter out there.

wickedsight• 5 years ago

Since getting OLED displays I'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).

Klaster_1• 5 years ago

At night, I can barely see my finger against the empty Feedly screen. Too bad not all applications (looking at you, Strava and MFP) provide an OLED-compatible dark theme and the "Force dark mode" dev setting does not persist after a restart.

qubyte2• 5 years ago

This is why I use black for the background on my own site, and high-contrast dark themes where available.

LinAGKar• 5 years ago

Light on black severely hurts readability though.

campital• 5 years ago

There is the problem of "OLED smearing"[0] with pure black that makes using it somewhat unviable. It seems that some OLEDs are more susceptible than others, though. Also fairly certain that this only happens with #000.

[0] https://twitter.com/marcedwards/status/1053519077958803456?l...

wizzwizz44• 5 years ago

That's only relevant for animations.

account42• 5 years ago

All LCD technologies have pixel transition times that vary based on the old and new colors and are often larger than the refresh rate, this is nothing new with OLED. Typically these do get improved over time. I've compared the video on my OLED phone and non-OLED monitor and the smearing is not significantly different.

betwixthewires2• 5 years ago

I do the same thing. Black background with white text is by far the best contrast setup for reading hands down, it's better than reading paper or e ink. The only thing entering my eyes is the information I want to see, since I started reading this way I cannot purchase a mobile device without OLED.

uplifter• 5 years ago

And OLED screens power consumption is proportional to how much color/white is displayed, so black uses less power. Good for your battery, and the environment too.

In a dark room or outside at night, black on an OLED is truly black and everything else floats magically in the void, it's a wonderful effect.

nottorp• 5 years ago

Back when we had CRTs where black also meant no light, you could have real dark in the room if you only had a terminal with green on black or white on black on the screen :)

Steltek2• 5 years ago

Now you have a new problem of no one agreeing on a standard saturation level. I'm noticing this more with "dark themes": everyone has a different idea of dark gray.

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's this dismal bouquet of gloomy colors and it's hard to focus on the content.

Contrast this (pun!) with terminals and console apps: your terminal is a constant background color while you're working. It doesn't change its shade of gray as you go so it really does stay as a "background" and isn't distracting.

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.

dspillett• 5 years ago

everyone has a different idea of dark gray.

There are a few factors causing this:

* People have monitors with different gamma curves, and even if you try to match them slight different output for top white and bottom black. Heck, on bad monitors these things can vary across the screen or if you aren't sitting perfectly head-on.

* People are working in different environments so ambient like that they are seeing the screen against (home & office lighting, light from windows, reflections of those off home/office decor, and so forth) will vary.

* Peoples eyes vary in a considerable number of ways, even ignoring those with variations significant enough to be considered “defects” from the norm.

* These things can all vary over time, over different cycle times.

It doesn't just affect blacks and grays: on a simple dashboard I've created pastel colour backgrounds are used as subtle highlights (used to separate things, guide the eye a little, to indicate status of things (though there are other, less subtle, indicators when this is significant), and to just make it look nicer (as coldly objective as I can sometimes be, even I appreciate a bit of effort there)) that are useful (you miss them if they go) but don't want to be attention grabbing. I've needed to tweak the colours chosen because while they did the job on my screens they were too similar or too almost-not-there-at-all on other people's.

Steltek2• 5 years ago

I think the variations are intentional. If I were a designer and looking to match backgrounds, I wouldn't eyeball it. I'd screenshot the target and eyedropper the color - that's independent of panel differences. But maybe I'm old fashioned and not a designer anyway.

"Dark themes" are the new sexy right now and everyone's having a play at making their design palette stand out. I think good usability is taking a back seat to artistic freedom and expression.

tshaddox3• 5 years ago

And don't forget about the most obvious factor, which is that people simply want their website to look a certain way and don't want all websites to look the same.

quercusa• 5 years ago

Along the same lines, Edward Tufte recommends Josef Albers's book Interaction of Color, which teaches that there's no absolute colors - it's all relative.

Magazine piece on Albers and his work: https://www.schirn.de/en/magazine/context/josef_albers_inter...

jacobmischka• 5 years ago

Why does the Facebook Mobile interface feel so nice?

Checks publication date

Ah.

notRobot• 5 years ago

(2012)

tyleo• 5 years ago

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

gren236• 5 years ago

Agree, it's a different thing for OLED displays. Black here can be as pleasant as any other color. I guess it's the same for projectors.

kuharich• 5 years ago

Past comments: https://news.ycombinator.com/item?id=6581253, https://news.ycombinator.com/item?id=24303042

dang• 5 years ago

Thanks! Macroexpanded:

Design Tip: Never Use Black (2012) - https://news.ycombinator.com/item?id=24303042 - Aug 2020 (162 comments)

Design Tip: Never Use Black (2012) - https://news.ycombinator.com/item?id=17334627 - June 2018 (44 comments)

Design tip: Never use black (2012) - https://news.ycombinator.com/item?id=6581253 - Oct 2013 (63 comments)

Design Tip: Never Use Black - https://news.ycombinator.com/item?id=4357002 - Aug 2012 (210 comments)

Also somehow related:

Never Use White Text on Black: Astygmatism and Conference Slides (2017) - https://news.ycombinator.com/item?id=21367116 - Oct 2019 (59 comments)

mherdeg• 5 years ago

Huh, some of this may have to do with the medium?

Where I'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.

In that environment, if you use rich black instead of just K, you'll see registration errors that hurt legibility, especially for small print and at any light/dark boundary. I'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.

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!

But we were usually on a budget and usually stuck in K. This has for sure colored my design choices, and it's helpful to see the reminder to try designing away from pure black on the screen.

junon4• 5 years ago

Rich black, for anyone wondering, is when you not only use K (black) pigment, but layer on C, M, and Y, too.

deltarholamda• 5 years ago

Wow, this threw me back to the early 90s when I did print graphic design.

It's common to use one of the Pantone "rich black" options for spot color, because our eyes see it as "blacker" than 100% K. But yep, if you were doing 4 color work, it was a different kettle of fish.

wodenokoto• 5 years ago

I got similar advise from a graphic designer with a background in printing when I wanted to design my own business card.

Don't tint your black, black is one of the most amazing colors you can choose, there's a reason why it's such a classic.

QuadrupleA• 5 years ago

Whatever. Why throw away 8% of your monitor's color gamut / 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.

It'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're listening in either, or your own inner ear. Doesn't mean you have to add those sounds to the audio.

throwuxiytayq• 5 years ago

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.

While I agree with your sentiment, none of those are good solutions. Turning up the brightness influences the bright pixels much more than the black pixels (especially on decent displays). The desk light and bleeding backlight sound like a nightmare.

A much better idea would be to change your monitor's calibration (either in the OSD or in the OS settings), or to use a browser extension for color adjustments.

YetAnotherNick• 5 years ago

Monitors have contrast setting for this exact same purpose

jerrre• 5 years ago

Funnily most digital audio is never fully silent for a different reason. Noise is added for the least significant bit, because otherwise you can hear artifacts (deemed less attractive than noise) on silent parts that are close to the threshold of the bitdepth.

https://en.wikipedia.org/wiki/Dither#Digital_audio

stefan_• 5 years ago

Dither works for images too, e.g. for cheap displays that only have 5 bits of color depth. It's hardly a problem for audio anymore which is now almost universally 24 bits (and arguably already wasn't an issue at 16..).

tshaddox3• 5 years ago

That's the noise floor, which should be below the threshold of human hearing unless you turn the volume up so high that the loudest signals would be uncomfortably/damagingly loud. 16-bit digital audio has a dynamic range of 96 dB. Even in an extremely well-insulated anechoic chamber where we (unrealistically) assume the ambient noise level is 0 db, you would theoretically hear extremely quiet white noise when playing back a plain old 16-bit CD, but that CD would still be able to blast out 96 dB which in nearly all imaginable circumstances would be louder than desired. In a more realistic scenario wearing well-isolating headphones in a very quiet normal room, the ambient noise level is probably more like 30 dB, and plain old 16-bit audio gives you plenty of dynamic range to perfect reproduce any conceivable digital audio signal for the vast majority of use cases. Certainly for things like music, I think it would be quite rare for a recording to have a dynamic range greater than, say, 60-70 dB.

kurthr• 5 years ago

Honestly, I just find this kind of weird. Unless you had a plasma display in 2012 (or a CRT?) you were using an LCD which have a realistic luminance ratio of ~200:1. Even the good FFS/IPS panels weren't better and the rest of the luminance range was taken up in the backlight... and unless you're in a blacked out basement you have reflection/scatter off the screen, which is already additive.

Most screen gammas are/were roughly square law (sRGB=2.2) above a small linear region below 16 (8bit) so green 0xFF is more than 256x brighter than 0x0F. This has changed with HDR and modern OLED and miniLED backlights that in a perfect environment (not your office) can achieve >1000:1 luminance ratios.

namibj• 5 years ago

Even AMVA3 goes to 5000:1, and that's just a "normal" LCD panel, usually used edgelit from my experience with them.

dredmorbius5• 5 years ago

This 2012 advice has aged poorly, and as with all absolutes, fails to consider context, capabilities, and functional goals.

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/background contrast is limited (restricted more by the dark "white" than the light "black"), the advice to avoid saturated blacks is quite poor.

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's Reader Mode is a lifesaver, as is the EInkBro browser. High-contrast text and black-on-white themes are strongly preferred. Ironically, I use the Dark Reader extension to force light themes on numerous websites. The fact that the extension itself features a dark theme for its controls is ... unfortunate.

Generally for e-ink, I'd suggest:

- Use solid blacks and high-contrast whites where possible. This should always be the case for text if at all possible. Reversed white-on-black should be reserved for controls and emphasis.

- Line art and etchings render wonderfully. There's a reason Onyx features these in its marketing and screensavers, they look truly delicious on the devices. See for example: https://blog.the-ebook-reader.com/wp-content/uploads/2019/03... and https://www.e-readerweb.nl/test/data/articles/images/lightbo...

- 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.

- 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's icons are much better suited to the device: https://sm.pcmag.com/t/pcmag_au/review/o/onyx-boox-/onyx-boo...

- Yes, there are some colour devices available. They're the minority, saturation is limited, and hue fidelity varies markedly from original art. See: https://www.liseuses.net/wp-content/uploads/2020/08/onyx-boo...

Keep in mind that all display systems offer limited ranges of darkness, intensity, hue range, and saturation, and that their best 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, reflect) at their brightest under direct sunlight.

at_a_remove• 5 years ago

From Fast Show to artistic advice: I shall have to get the black out.

I just don't know, "never" is a big word. Black can be useful in kind of an absolute, floating in space, NOTHING IS HERE fashion.

Sosh101• 5 years ago

Your screen probably can't display black anyway.

gadrev• 5 years ago

Article's CSS:

    --black: #113654

Ok, black enough for me. The problem is when you see shit like:

    color: #555

(or worse)

On text that's supposed to be dark. Tires your eyes and makes reading anything long painful. But hurrrrr it's not black it's modern!!1.

progre• 5 years ago

Nice even hex numbers is a telltale of "designed by engineer".

abdusco2• 5 years ago

I design in the CSS and always stick to shades of gray until I get the layout and interactions right, which are easy to reason and conjure off the top of my head. I can always tell `#ccc` is lighter than `#cacaca` but it's not easy tell how luminant a color is just by looking at its hex.

Lately, I've been playing with HSL, which makes the calculations easier, but luminescence is still difficult. Hopefully, LAB color space will be useful in that regard.

wffurr4• 5 years ago

As an experiment, I edited the body text to be #000 instead of dark blue and it was instantly easier to read.

laserbeam• 5 years ago

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

frosted-flakes2• 5 years ago

For phones with OLED displays, I like to use pure black background for this reason. It feels like I'm interacting with an object, rather than a portal into a 2D world.

discreteevent• 5 years ago

Don't go to far in the other direction. Especially when it comes to text: https://www.contrastrebellion.com/

bin_bash• 5 years ago

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

seyz• 5 years ago

And suddently, OLED screens become useless

ericb• 5 years ago

I really like the crispness of actual black.

Note: the font you're reading right now is #000000.

opan• 5 years ago

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.

I'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.

djsbs2• 5 years ago

Very interesting and true.

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.

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).

ahurmazda• 5 years ago

One of the reason I was so disturbed by Github'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.

[1] https://blog.karenying.com/posts/github-darkmode-sucks

fabiospampinato• 5 years ago

Whenever you’re working with grays, add a bit of color to them and they will feel less dull.

This is such a great advice, and one that's easy to not think about if you are not experienced enough. Just tweaking grayscale colors a bit like that makes a huge difference.

I'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's not measuring the color of the shadow though (whatever that means, it's not like shadows are actual physical things), that's measuring the color of the road.

Tagbert• 5 years ago

A shadow is not a physical thing, it is the area where the light sources are blocked by objects. Objects in that area are darker but never black due to ambient light from the general environment. If there is only one light source and very little other scattered light from the environment, you can get a very dark shadow that will seem close to black. Situations where the lighting is so extreme are rare and it makes them look unnatural.

efields4• 5 years ago

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.

* It's basic floor/ceiling stuff. Once you go #000000, you can't go any darker. Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare?

* 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.

* Shadows are really never black and your CSS shadows will look better if you don't default to black. Toggle 'tint shadows' on the _excellent_ css shadow palette generator: https://www.joshwcomeau.com/shadow-palette/. Play with background colors, you'll see.

* Your design will never please everyone, especially anything close to a majority on certain tech news aggregators.

fatbird• 5 years ago

A colleague who's a CSS wizard was working on a site where a defined colour in SCSS was "black" and it was #333333. He added a darker black at #222222, and then didn't call it "dark_black" and I've never forgiven him.

efields4• 5 years ago

What a missed opportunity.

brianwawok• 5 years ago

Could have been blackblack or blacker. Leaves room for the next level to be blackblackblack or blackest.

jawilson2• 5 years ago

How does a software engineer pass up the opportunity to reference either Spinal Tap or Douglas Adams?

jraph2• 5 years ago

if the white is blinding, isn't it because your screen is too bright?

If you force me a reduced contrast, I can't adjust. If you give me black on white, I can always set my screen at a comfortable level for me.

With reduced contrast, you also might force me to increase the brightness of my non OLED screen, which will use draw more power from my battery.

efields4• 5 years ago

Maybe not blinding but not pleasant. Keeping brightness in check is something I do often but I doubt many people do — notice how bright everyones devices are in public next time you're in a restaurant or theater.

I'm with you that you want high contrast, but you also want balance. I think the #000 on #FFF of this textarea I'm in works because the leading is tight, the kerning is appropriate… its information dense. The NYT website is information dense.

If I squint and I see a grayish blob I feel like good decisions were made. If I still see mostly white then there's work to be done.

Sohcahtoa82• 5 years ago

I've always been of the opinion that if you find a completely white screen to be blinding or even painful, then you either need to turn down your brightness or add additional ambient light to your room, or both.

andrei_says_• 5 years ago

Most of the apps text editors etc. I use are in dark mode. So yes, my screen brightness is set to above 50%. When I switch to a white-background page I get instantly blinded.

hcarvalhoalves• 5 years ago

This. People use 100% screen brightness then try to compensate w/ low contrast colours.

I see a lot of colleagues messing with low-contrast color themes for their editors. I use the default Emacs one (black on white), but my screen brightness is always at around 20-30%.

I've learned the rule is to set your screen brightness _as if_ it were a piece of paper being illuminated by the ambient light.

notriddle• 5 years ago

What's blinding when it fills the whole screen might not be blinding if it was used in moderation.

For example, take this photograph: https://monovisions.com/wp-content/uploads/2015/04/10-famous...

There is pure #fff in that photograph, but it's used very sparingly, so the overall picture is still pretty dark.

GekkePrutser4• 5 years ago

A lot of screens are too bright even at 0% even at night. My LG 4K screen is such an example, I work on 0% during the day with 70% contrast and it's just about ok.

During the night it's wayy too bright though and I need to reduce contrast to almost 0% which helps but kills colour depth.

Screen manufacturers optimise for high brightness way too much. I guess because it looks good on the shop floor.

In summer I often work with the windows open at night but the lights off to avoid attracting bugs. All my displays are horrible in this scenario. Except my old amber vt520 which I can set so low I can barely read it in a dark room, or so bright it is easily readable in sunlight. It also has amazingly convenient brightness and contrast dials instead of a frustrating OSD menu. Some display qualities of CRTs have still not been matched.

dredmorbius5• 5 years ago

Device-specific limitations and concerns should be addressed on-device rather than globally.

If a device's white is excessive then have that device correct for it. Attempting to treat special or exceptional cases as a general rule, or even the current primary modality leave you with such disasters as presuming all devices will have some fixed maximum display size (320, or 640, or 800, or 1024, or ... pixels), or refresh rates, or palettes ("Web-safe" colours, anyone), etc., etc.

We're working in a digital medium. The domain we can control is the content itself --- text, the source images, audio, etc. All of those are going to be interpreted and mediated by the devices and tools through which they're accessed.

NB: In my far-more ambitous youth, I'd have said "people can choose their own preferences. While I'd very much prefer that that capability be preserved, in the overwhelming majority of cases, people stick with defaults and won't change even the most basic of settings.* This is why both content and UI/UX designers and device manufacturers should ensure that 1) defaults are sane and that 2) automatic adjustments occur and are well-suited to circumstances.

Pixel-perfect presentation is a persistant pox on publishing predicated on ... the Web. (I ran out of Ps....)

I've railed against it for decades.

wizzwizz44• 5 years ago

(I ran out of Ps....)

Predicated on poorly-picked presumptions. (On the web.)

userbinator• 5 years ago

The default brightness of a monitor is optimised for looking good in a brightly-lit showroom (and also for stressing the backlight enough to ensure it fails just outside of warranty, but I digress...), not for comfortable reading in an average room.

I started with brightness and contrast set to 0 on a pair of LCDs over a decade ago, and they've only gone up to around 20 after all this time to compensate for wear.

ddingus• 5 years ago

I much prefer managing my own contrast levels. Always have.

The product of all these attempts to do things for people results in a mess. It's one of those, "if only everyone would..." scenarios. Fact is they just won't.

All that said, leaving some room makes sense. That's likely in the median of the mess and not contributing to it all that much.

macOS doesn't suck at all. It's the device performance being exemplary and people not realizing what that means that sucks.

krisoft• 5 years ago

Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare?

What kind of fear mongering is this? :D If I ever feel we should have made something less dark I will just change it. It's not like I signed a deal with the devil which locks me into that particular colour choice.

I understand if you ask a similarly worded question about some choice in a database schema, but colours on a UI? Fleeting like a butterfly.

lumens• 5 years ago

Consider the following: if your design expertise was as significant as your database expertise, perhaps your view of the downstream implications of decisions in each would be more alike than not.

dsizzle• 5 years ago

This site uses white (on the sides). Does that bother you? Seems fine to me.

dredmorbius5• 5 years ago

My preferred custom CSS for HN swaps the page background and text-area colours.

Give me black-on-white for text.

(It's also annoying on e-ink, as you might expect.)

tshaddox3• 5 years ago

Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare?

Assuming you have a well-managed CSS architecture, you could use black for the darkest thing on your site now and change it later if it absolutely becomes necessary! I don't quite follow the logic of not using pure black now because you might need it in the future, since that same argument will apply just as much at that future time! Besides, there are only 256 shades of neutral gray (black #000000 to white #FFFFFF), so even if your "black" background is #333333 one could still argue "Are you 100% sure there won't be more than 50 darker shades of grey on your site you'll ever need to declare?"

kitsunesoba• 5 years ago

* 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.

I always thought the grey window backgrounds used by the Classic Mac OS Platinum appearance were great for this. Bright enough to not be dingy and depressing like the more middle-greys used by Win9x, but dark enough to not be blinding, and also dark enough to use actual black for text to maintain high contrast ratios.

Platinum was designed at the height of CRTs, which were considerably brighter and higher contrast compared to the LCDs that followed them — even run of the mill budget CRTs outperformed the average early LCD, and consumer LCDs didn’t really catch up for a good 10-15 years after CRTs went out of style (in some aspects, LCDs are still playing catch-up). I wonder how much the hardware was responsible for shaping screen content design trends.

layer87• 5 years ago

A large window of Mail.app in light mode is pretty blinding.

Honestly, if that is the case then the display is set much too bright.

dylan6043• 5 years ago

* It's basic floor/ceiling stuff. Once you go #000000, you can't go any darker. Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare?

That's kind of like in BASIC incrementing line numbers by 10 instead of one so you can more easily add lines that you will eventually realize are needed to be shoehorned in.

GekkePrutser4• 5 years ago

* 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.

Yes this is why I love dark modes these days. So many apps totally overdo it with the white. MacOS indeed but also pretty much all Google apps and sites are light gray on white. It's too blinding and I can't reduce my screen brightness as I'm already at 0% during the day. Screen manufacturers are now optimising for high brightness that stands out in the shop but ignore low levels.

And so I reduce my contast as the only option but it reduces colour depth too much.

Dark modes are not a perfect option either because they make the apps that don't support it be ultra bright in comparison.

But either way it starts with misguided design principles from Apple and Google IMO. The old Grey window fabric of windows 2000 was boring but it really balanced things out.

robertlagrant• 5 years ago

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

david2ndaccount• 5 years ago

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.

dredmorbius5• 5 years ago

Where you can do so, use your browser's Reader Mode.

It's possible to further tune Reader Mode (using userContent.css) to your personal preferences, though I believe you can also directly set colours, typically to Black-on-White, White-on-Black, or a Sepia (usually dark brown on smokey white) theme.

When using a full-powered desktop, I'll use Stylish to adjust site CSS to my preferences, usually nuking distractions, though also occasionally modifying colour schemes. That's problematic as there are often many elements to change (nuking all but the principle payload has the side benefit of simplifying this problem).

chrismorgan3• 5 years ago

Relevant excerpt from my Firefox profile’s userContent.css as an example:

  @-moz-document url("about:reader") {
      body.dark {
          --main-background: #000;
          --main-foreground: #aaa;
      }
  }

r00fus• 5 years ago

Just use a reader mode / extension that respects your preferences. I honestly have set my iPhone to open all pages in reader mode (and if that doesn't work, I turn it off or whitelist the site).

praash2• 5 years ago

I don't understand the reasoning behind using some "designer black" for large blocks of text. Especially when the background is also chosen to be a softer tone, contrast is reduced even further.

Imagine you're walking outside, trying to read an article with your phone, having trouble reading the text due to bright reflections. After finally managing to maximize your display's brightness, you realize that the website designer has decided to use these "nice" colors. You crouch down, cupping your hands over your phone to educate yourself about how to never ever use #000000 black.

dylan6043• 5 years ago

Imagine you're walking outside, trying to read an article with your phone,

I'd suggest stop walking and reading a phone at the same time.

hypertele-Xii2• 5 years ago

Imagine you're trying to listen to classical music at a steel mill, but because the piece is mixed "correctly", you can't actually hear it. You turn up the volume to max but it's still too quiet to hear through the industrial noise and your ear protectors.

Now, is it the mixer's fault you're trying to listen to the music at a steel mill?

A lot of people answered "yes" and that's how we ended up with the "loudness wars" lowering the quality of all music to shit. A mistake that's ruined entire generations of music, only available at crap, compressed radio quality.

chrismorgan3• 5 years ago

The advice against using pure black is reasonable and sound for areas of colour and for art that is trying to match how things appear in nature; but I don’t believe it was ever correct to apply it to simple text when your goal is reading rather than art.

The original article here doesn’t even not use pure black, it uses a quite saturated dark blue for its text, which I find quite obnoxious. I find fully desaturating its #113654 to #303030 improves things markedly, and darkening it to #000 makes it even better.

Mind you, I’ve recently shifted to using mildly-off-black (no lighter than #222, which is I think about the lightest you should go) for normal text and true black for bold text and titles (currently demonstrated on my personal website). I think this works pretty well.

w0mbat• 5 years ago

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.

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.

wruza• 5 years ago

non-black shadows

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).

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.

hdjjhhvvhga• 5 years ago

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.

thom• 5 years ago

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

k__• 5 years ago

For me, it helped to stay away from RGB and CMYK.

HSL and the like delivered better results.

lgleason• 5 years ago

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.

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.

This was why the impressionist painters generally didn'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.

Now that I'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).

wffurr4• 5 years ago

#000 on my screen isn't going to be pure black either. There'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's hard to read. Please don't do that.

"Words on web pages aren't black". But they should be #000 or close to it. Let the user's screen and environment determine the rest.

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.

lhorie3• 5 years ago

But they should be #000 or close to it

You should use moderation. Guidelines for accessibility suggest a 3:1 contrast ratio as the minimum contrast level, but having too much contrast can also make reading more difficult (e.g. for people w/ dislexia)

imachine1980_• 5 years ago

Not only that (dyslexic) but I see blurry faster if I Read epub whit black and white than Grey and white

layer87• 5 years ago

Black text on white background (#000 on #fff) used to be standard on computer displays, and still is for many desktop applications. The expectation is that one's display is set to a reasonable brightness & contrast settings for that, which usually means less than 50% brightness setting. In addition, as the GP notes, black usually isn't very black on LCD displays (IPS panels in particular).

Web sites using noticably lower text contrast are bad in that one has to constantly adjust the display settings depending on the web site or app. Having less-than-optimal eyesight, I struggle with anything significantly less than pure black on white for running text, with regular contrast/brightness settings.

wffurr4• 5 years ago

3:1 isn't anywhere close to enough. That's the recommendation for graphics and UI components. For body text, WCAG suggests 7:1 and even that can be too light if the font is a thin style or is small.

Not to mention the various environmental factors that affect the contrast ratio in practice. Crappy LCDs in poorly lit environments rendering with buggy software. Err on the side of darker is better.

Here's an eminently readable site. Now sure it doesn't use #000 but it's also way more than 3:1 contrast ratio and uses reasonably sized generously-bodied fonts: https://www.contrastrebellion.com/

simondotau• 5 years ago

If too much contrast is a problem for someone, that should be solved on the client side. And arguably by the operating system not the web browser.

corysama• 5 years ago

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.

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.

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 "black paper" to "white paper" in a normal office setting. Certainly not "Vanta Black^(TM)" to "Staring at the Sun". 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.

jetrink• 5 years ago

The reason outdoor shadows appear blue is obvious in retrospect (think about it for a second if you want to...):

Objects in the sun'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.

dwighttk• 5 years ago

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

namelosw• 5 years ago

I would say it's more of a fashion thing.

Back when many people are still using black, more nuanced coloring would pleasantly stand out because it makes the former look blunt.

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's clean and straightforward, and how it communicates in a clear way by punching important information in my face.

There's a certain dynamic behind the game, since what I perceived as blunt before, I perceive as clean and straightforward now.

[0] https://vercel.com/

catsarebetter• 5 years ago

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

intrasight• 5 years ago

I always make my text black by overriding CSS that makes it some stupid shade of grey.

But "never use black" 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.

pavon• 5 years ago

I don'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.

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't wider than what you would get in these mediums, so that isn't a concern.

You don'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.

felizuno• 5 years ago

But can we still paint the bike shed black?

amelius• 5 years ago

He should tell this artist:

https://www.theguardian.com/artanddesign/2018/aug/21/holed-u...

sofard• 5 years ago

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

dylan6043• 5 years ago

But you're not using black. So never is applying to you as well.

egypturnash2• 5 years ago

I have been a professional artist for about twenty years and it is my considered opinion that any "rule" given out to beginners is actually a warning: violate this rule and making something that looks good becomes a lot harder, so you should probably better make sure you're not violating any other "rules" unknowingly.

If you know damn well that you're violating multiple rules then sure, go for it - break your perspective, fill the drawing with tangents, shade with black, etc, break the fuck 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's pre-Cubist stuff was, for instance.

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 glow.

e12e3• 5 years ago

> go look at how solid Picasso's pre-Cubist stuff was, for instance
“It took me four years to paint like Raphael,” he famously explained, “but a lifetime to paint like a child.

https://mymodernmet.com/picasso-early-work/

egypturnash2• 5 years ago

“Drawing like a kid” is it’s own special part of the craft. You have to deliberately step back from a lot of the skills you’ve learnt about what makes a “good drawing”, and yet since you usually have a reason to make a drawing that looks like a kid’s work, you still have to keep in mind all the skills that apply even if your rendering and anatomy is deliberately lacking and broken. You can’t even just draw a stick figure because after a serious education your stick figures are bursting with life and anatomy. So you look at a bunch of kid’s drawings, recall a few of your own special kid-art quirks, and you make sure the composition is crystal clear, maybe add a few labels in a childish scrawl or a neat parental addition...

pvaldes• 5 years ago

You can paint like a child, as long as you has the network of social relationships that Picasso had.

Artists provide often a connection between the rigid wealthy class and the low classes seen as more free to experiment. We can see it in Picasso, but also in Warhol or Bacon, for example. Context is everything, and in that context drugs, sex or friendship play a big part, so is not just as simple as paint anything and sell if for an obscene amount of money.

Today videogames and internet provide similar experiences of living a second life and hanging up with interesting people so making the same impact as Picasso as a new artist would be much more difficult.

eternityforest• 5 years ago

Rules are great for when us non-pros make something that looks bad, but we don't exactly know why, we just know we made something we aren't happy with.

I mostly like skeuomorphic designs, so I'll definitely keep this one in mind next time something looks off.

darepublic• 5 years ago

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

bovermyer• 5 years ago

True black - that is, a black that absorbs almost 100% of light - is actually really freaking scary. And disorienting.

I'm not talking about the absence of light, here - pitch black is something else - I'm talking about paint or other coloration that absorbs light.

Black 3.0 is one of these.

officeplant3• 5 years ago

The vantablack void

rogual• 5 years ago

If nothing is truly black, the black paint isn't black either, so I can use it. Checkmate!

Jemm• 5 years ago

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

lxe• 5 years ago

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

BSOhealth• 5 years ago

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?

What is the natural color of language?

quickthrower2• 5 years ago

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!

I’m also not sure if this article is about print, screen, or both.

I prefer black on white for default on a page, the user can adjust their monitor or use a css patch to their liking.

aidenn0• 5 years ago

On a mostly unrelated note, I'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.

4monthsaway• 5 years ago

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

zuj2• 5 years ago

Friends who work in the VFX compositing departments always talk about how they integrate the cg elements into the video by doing something called "lifting the blacks". They can say it better, but this is what I understood the process as.

When you render out your 3D elements you can get a realistic output but it won'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 "lifting the blacks" 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.

graycat2• 5 years ago

On choosing colors, I might remind designers that about 25% of males are partially red-green 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.

DeathArrow• 5 years ago

I thought that is common knowledge most designers don't use pure black.

mmcnl• 5 years ago

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

Never Use Black (2012)

Related Stories