20 ms·

Never Use Black (2012)

320 points by josephwegner 5y ago

robertlagrant 5y 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.
amelius 5y ago
He should tell this artist: https://www.theguardian.com/artanddesign/2018/aug/21/holed-up-man-falls-into-art-installation-of-8ft-hole-painted-black https://www.theguardian.com/artanddesign/2018/aug/21/holed-u...
graycat 5y 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.
jetrink 5y 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.
4monthsaway 5y ago
So what would be better than #000 for text on a webpage? Got me curious now
zuj 5y 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.
DeathArrow 5y ago
I thought that is common knowledge most designers don't use pure black.
mmcnl 5y ago
I thought this was about the Python formatter called black, and I was already getting infuriated by the title alone.
tim333 5y 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 5y 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.
cyber_kinetist 5y 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 5y ago
  Well at least the left explorer windows in a somewhat higher value, so we have that going for us which is nice.
- breakfastduck 5y 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 5y 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.
    - breakfastduck 5y ago
      If anything AMOLED would make it even worse in terms of readability.
steerablesafe 5y 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 5y ago
  ...this is a good point!
- djsbs 5y 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 5y 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
foobarbecue 5y ago
What a relief to click on this and see it isn't a screed against https://github.com/psf/black https://github.com/psf/black
- zuj 5y ago
  Same here, clicking on the link I was thinking, here we go, one more negative opinion on the opinionated python formatter out there.
- jlongster 5y ago
  Funny too because Ian (author of the posted article) designed the Prettier logo
- gurleen_s 5y ago
  Thought the same thing. It’s such a godsend, and the first thing I install on every new machine or virtualenv.
  - neves 5y ago
    he, he, me too. It really transformed the way I program. No more mental cycles devoted to best formatting.
    - abdusco 5y ago
      `prettier`, `black`, `go fmt` and other opinionated formatters must have saved tens of thousands of man-hours. No more fiddling with getting format juuuust right. Save the file and accept the result. Sometimes it tries to break long lists that better stay horizontal or matrices into long lists, in which case, wrapping the block with `# fmt: on/off` saves the day.
      - slaymaker1907 5y ago
        I don't think the formatters need to be so opinionated. The problem with older tools is that they don't have the capability to fix things even when it is easy to fix in an automated way. For example, I don't really care about fixing line length issues, but I really don't want to sort my imports by hand or fix the line breaks with my blocks.
wickedsight 5y 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 5y 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.
- qubyte 5y ago
  This is why I use black for the background on my own site, and high-contrast dark themes where available.
  - LinAGKar 5y ago
    Light on black severely hurts readability though.
    - bryanlarsen 5y ago
      That depends on the background light in the room. In a dark room, light on black is the most readable.
      - kps 5y ago
        Light on black is wretched for people with astigmatism.
        bryanlarsen 5y ago
        I have pretty bad astigmatism and love white on black in a dark room on an AMOLED screen with the brightness turned way down. It's the only screen I can look at for over 10 hours without getting a head ache.
deleted 5y ago
[deleted]
Steltek 5y 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 5y 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.
  - Steltek 5y 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.
quercusa 5y 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_interaction_of_color_peter_halley_color_theory/ https://www.schirn.de/en/magazine/context/josef_albers_inter...
jacobmischka 5y ago
> Why does the Facebook Mobile interface feel so nice? Checks publication date Ah.
notRobot 5y ago
(2012)
tyleo 5y ago
Idk, I really like the contrast against pure black on OLED screens. For some reason it infuriates me on LCD though.
- gren236 5y 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.
deleted 5y ago
[deleted]
kuharich 5y ago
Past comments: https://news.ycombinator.com/item?id=6581253 https://news.ycombinator.com/item?id=6581253, https://news.ycombinator.com/item?id=24303042 https://news.ycombinator.com/item?id=24303042
- dang 5y ago
  Thanks! Macroexpanded: Design Tip: Never Use Black (2012) - https://news.ycombinator.com/item?id=24303042 https://news.ycombinator.com/item?id=24303042 - Aug 2020 (162 comments) Design Tip: Never Use Black (2012) - https://news.ycombinator.com/item?id=17334627 https://news.ycombinator.com/item?id=17334627 - June 2018 (44 comments) Design tip: Never use black (2012) - https://news.ycombinator.com/item?id=6581253 https://news.ycombinator.com/item?id=6581253 - Oct 2013 (63 comments) Design Tip: Never Use Black - https://news.ycombinator.com/item?id=4357002 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 https://news.ycombinator.com/item?id=21367116 - Oct 2019 (59 comments)
mherdeg 5y 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.
- junon 5y ago
  Rich black, for anyone wondering, is when you not only use K (black) pigment, but layer on C, M, and Y, too.
- deltarholamda 5y 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 5y 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 5y 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 5y 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 5y ago
    Monitors have contrast setting for this exact same purpose
- jerrre 5y 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 https://en.wikipedia.org/wiki/Dither#Digital_audio
  - stefan_ 5y 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..).
dredmorbius 5y 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/Onyx-Boox-Note-Pro.jpg https://blog.the-ebook-reader.com/wp-content/uploads/2019/03... and https://www.e-readerweb.nl/test/data/articles/images/lightbox/big/onyx-boox-nova-3_60587_5.jpg 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-boox-max-lumi_n9tp.1200.jpg 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-boox-nova-2-color-liseuse.jpg 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 5y 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 5y ago
Your screen probably can't display black anyway.
gadrev 5y 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 5y ago
  Nice even hex numbers is a telltale of "designed by engineer".
  - abdusco 5y 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.
- wffurr 5y ago
  As an experiment, I edited the body text to be #000 instead of dark blue and it was instantly easier to read.
laserbeam 5y 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-flakes 5y 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 5y ago
Don't go to far in the other direction. Especially when it comes to text: https://www.contrastrebellion.com/ https://www.contrastrebellion.com/
deleted 5y ago
[deleted]
bin_bash 5y 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 5y ago
And suddently, OLED screens become useless
ericb 5y ago
I really like the crispness of actual black. Note: the font you're reading right now is #000000.
opan 5y 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.
djsbs 5y 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 5y 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 https://blog.karenying.com/posts/github-darkmode-sucks
fabiospampinato 5y 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 5y 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.
deleted 5y ago
[deleted]
efields 5y 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/ 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 5y 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.
  - efields 5y ago
    What a missed opportunity.
  - brianwawok 5y ago
    Could have been blackblack or blacker. Leaves room for the next level to be blackblackblack or blackest.
    - tim333 5y ago
      Blackadder maybe.
    - IggleSniggle 5y ago
      1) darker_blackblackest vs 2) darkest_blackblack, vote for the one closer to #000, GO!
deleted 5y ago
[deleted]
deleted 5y ago
[deleted]
david2ndaccount 5y 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.
- r00fus 5y 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).
- dredmorbius 5y 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).
  - chrismorgan 5y 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; } }
- praash 5y 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.
w0mbat 5y 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 5y 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 5y 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 5y ago
What’s the actual research on reading performance with various colour schemes on relatively modern screens?
k__ 5y ago
For me, it helped to stay away from RGB and CMYK. HSL and the like delivered better results.
lgleason 5y 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).
wffurr 5y 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.
- lhorie 5y 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_ 5y ago
    Not only that (dyslexic) but I see blurry faster if I Read epub whit black and white than Grey and white
    - wizzwizz4 5y ago
      And some people can't really see writing at all if it's grey and white. The best solution is user agents that actually convey a modicum of agency to the user. The second-best solution is adjusting your monitor; most monitors, you can reduce the contrast, but you can't really increase it.
  - layer8 5y 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.
corysama 5y 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.
dwighttk 5y ago
Maybe, but now that I have an OLED, I really want blacks to be truly black.
namelosw 5y 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/ https://vercel.com/
catsarebetter 5y ago
Thought you meant the python linter, was already crafting an argument for it before I read your article lol
intrasight 5y 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 5y 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 5y ago
But can we still paint the bike shed black?
bob332 5y ago
Agree, the use of the colour black is also racist too
deleted 5y ago
[deleted]
sofard 5y 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.
- dylan604 5y ago
  But you're not using black. So never is applying to you as well.
egypturnash 5y 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.
- eternityforest 5y 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.
- e12e 5y 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/ https://mymodernmet.com/picasso-early-work/
  - pvaldes 5y 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.
darepublic 5y ago
Years ago a dev on my team would harp on this. We replaced black colors with #333.
bovermyer 5y 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.
- officeplant 5y ago
  The vantablack void
rogual 5y ago
If nothing is truly black, the black paint isn't black either, so I can use it. Checkmate!
Jemm 5y ago
Please please please us black. The web is not a painting Be nice to us folks with less than perfect vision.
lxe 5y 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 5y 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 5y 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 5y 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.

320 points by josephwegner 5y 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.

amelius 5y ago

He should tell this artist: https://www.theguardian.com/artanddesign/2018/aug/21/holed-up-man-falls-into-art-installation-of-8ft-hole-painted-black https://www.theguardian.com/artanddesign/2018/aug/21/holed-u...

graycat 5y 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.

jetrink 5y 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.

4monthsaway 5y ago

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

zuj 5y 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.

DeathArrow 5y ago

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

mmcnl 5y ago

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

tim333 5y 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 5y 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.

cyber_kinetist 5y 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 5y ago
Well at least the left explorer windows in a somewhat higher value, so we have that going for us which is nice.
breakfastduck 5y 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 5y 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.
  - breakfastduck 5y ago
    If anything AMOLED would make it even worse in terms of readability.

steerablesafe 5y 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 5y ago
...this is a good point!
djsbs 5y 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 5y 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

foobarbecue 5y ago

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

zuj 5y ago
Same here, clicking on the link I was thinking, here we go, one more negative opinion on the opinionated python formatter out there.
jlongster 5y ago
Funny too because Ian (author of the posted article) designed the Prettier logo
gurleen_s 5y ago
Thought the same thing. It’s such a godsend, and the first thing I install on every new machine or virtualenv.
- neves 5y ago
  he, he, me too. It really transformed the way I program. No more mental cycles devoted to best formatting.
  - abdusco 5y ago
    `prettier`, `black`, `go fmt` and other opinionated formatters must have saved tens of thousands of man-hours. No more fiddling with getting format juuuust right. Save the file and accept the result. Sometimes it tries to break long lists that better stay horizontal or matrices into long lists, in which case, wrapping the block with `# fmt: on/off` saves the day.
    - slaymaker1907 5y ago
      I don't think the formatters need to be so opinionated. The problem with older tools is that they don't have the capability to fix things even when it is easy to fix in an automated way. For example, I don't really care about fixing line length issues, but I really don't want to sort my imports by hand or fix the line breaks with my blocks.

wickedsight 5y 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 5y 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.
qubyte 5y ago
This is why I use black for the background on my own site, and high-contrast dark themes where available.
- LinAGKar 5y ago
  Light on black severely hurts readability though.
  - bryanlarsen 5y ago
    That depends on the background light in the room. In a dark room, light on black is the most readable.
    - kps 5y ago
      Light on black is wretched for people with astigmatism.
      - bryanlarsen 5y ago
        I have pretty bad astigmatism and love white on black in a dark room on an AMOLED screen with the brightness turned way down. It's the only screen I can look at for over 10 hours without getting a head ache.

deleted 5y ago

[deleted]

Steltek 5y 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 5y 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.
- Steltek 5y 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.

quercusa 5y 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_interaction_of_color_peter_halley_color_theory/ https://www.schirn.de/en/magazine/context/josef_albers_inter...

jacobmischka 5y ago

> Why does the Facebook Mobile interface feel so nice? Checks publication date Ah.

notRobot 5y ago

(2012)

tyleo 5y ago

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

gren236 5y 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.

deleted 5y ago

[deleted]

kuharich 5y ago

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

dang 5y ago
Thanks! Macroexpanded: Design Tip: Never Use Black (2012) - https://news.ycombinator.com/item?id=24303042 https://news.ycombinator.com/item?id=24303042 - Aug 2020 (162 comments) Design Tip: Never Use Black (2012) - https://news.ycombinator.com/item?id=17334627 https://news.ycombinator.com/item?id=17334627 - June 2018 (44 comments) Design tip: Never use black (2012) - https://news.ycombinator.com/item?id=6581253 https://news.ycombinator.com/item?id=6581253 - Oct 2013 (63 comments) Design Tip: Never Use Black - https://news.ycombinator.com/item?id=4357002 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 https://news.ycombinator.com/item?id=21367116 - Oct 2019 (59 comments)

mherdeg 5y 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.

junon 5y ago
Rich black, for anyone wondering, is when you not only use K (black) pigment, but layer on C, M, and Y, too.
deltarholamda 5y 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 5y 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 5y 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 5y 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 5y ago
  Monitors have contrast setting for this exact same purpose
jerrre 5y 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 https://en.wikipedia.org/wiki/Dither#Digital_audio
- stefan_ 5y 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..).

dredmorbius 5y 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/Onyx-Boox-Note-Pro.jpg https://blog.the-ebook-reader.com/wp-content/uploads/2019/03... and https://www.e-readerweb.nl/test/data/articles/images/lightbox/big/onyx-boox-nova-3_60587_5.jpg 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-boox-max-lumi_n9tp.1200.jpg 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-boox-nova-2-color-liseuse.jpg 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 5y 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 5y ago

Your screen probably can't display black anyway.

gadrev 5y 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 5y ago
Nice even hex numbers is a telltale of "designed by engineer".
- abdusco 5y 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.
wffurr 5y ago
As an experiment, I edited the body text to be #000 instead of dark blue and it was instantly easier to read.

laserbeam 5y 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-flakes 5y 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 5y ago

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

deleted 5y ago

[deleted]

bin_bash 5y 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 5y ago

And suddently, OLED screens become useless

ericb 5y ago

I really like the crispness of actual black. Note: the font you're reading right now is #000000.

opan 5y 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.

djsbs 5y 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 5y 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 https://blog.karenying.com/posts/github-darkmode-sucks

fabiospampinato 5y 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 5y 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.

deleted 5y ago

[deleted]

efields 5y 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/ 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 5y 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.
- efields 5y ago
  What a missed opportunity.
- brianwawok 5y ago
  Could have been blackblack or blacker. Leaves room for the next level to be blackblackblack or blackest.
  - tim333 5y ago
    Blackadder maybe.
  - IggleSniggle 5y ago
    1) darker_blackblackest vs 2) darkest_blackblack, vote for the one closer to #000, GO!

deleted 5y ago

[deleted]

deleted 5y ago

[deleted]

david2ndaccount 5y 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.

r00fus 5y 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).
dredmorbius 5y 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).
- chrismorgan 5y 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; } }
praash 5y 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.

w0mbat 5y 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 5y 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 5y 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 5y ago

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

k__ 5y ago

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

lgleason 5y 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).

wffurr 5y 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.

lhorie 5y 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_ 5y ago
  Not only that (dyslexic) but I see blurry faster if I Read epub whit black and white than Grey and white
  - wizzwizz4 5y ago
    And some people can't really see writing at all if it's grey and white. The best solution is user agents that actually convey a modicum of agency to the user. The second-best solution is adjusting your monitor; most monitors, you can reduce the contrast, but you can't really increase it.
- layer8 5y 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.

corysama 5y 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.

dwighttk 5y ago

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

namelosw 5y 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/ https://vercel.com/

catsarebetter 5y ago

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

intrasight 5y 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 5y 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 5y ago

But can we still paint the bike shed black?

bob332 5y ago

Agree, the use of the colour black is also racist too

deleted 5y ago

[deleted]

sofard 5y 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.

dylan604 5y ago
But you're not using black. So never is applying to you as well.

egypturnash 5y 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.

eternityforest 5y 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.
e12e 5y 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/ https://mymodernmet.com/picasso-early-work/
- pvaldes 5y 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.

darepublic 5y ago

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

bovermyer 5y 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.

officeplant 5y ago
The vantablack void

rogual 5y ago

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

Jemm 5y ago

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

lxe 5y 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 5y 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 5y 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 5y 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.