14 ms·

Design Tip: Never Use Black (2012)

158 points by declanhaigh 6y ago

dang 6y ago
If curious see also 2018 https://news.ycombinator.com/item?id=17334627 https://news.ycombinator.com/item?id=17334627 2013 https://news.ycombinator.com/item?id=6581253 https://news.ycombinator.com/item?id=6581253 Discussed at the time: https://news.ycombinator.com/item?id=4357002 https://news.ycombinator.com/item?id=4357002
sascha_sl 6y ago
What if you're designing for OLED panels, where black is a stand in for "pixel off", which saves power and can help to hide bezels or (as with the default iPhone X Wallpapers) a notch. Sure, it's not trivial to get right, and it should definitely not be used outside backgrounds, but never is a harsh word.
dvfjsdhgfv 6y ago
The problem is, people misinterpreted it in all possible ways, the result being low contrast between the background and foreground text you can find everywhere. The second culprit after the font being too small.
Broken_Hippo 6y ago
This is just bad advice. From an artist's perspective, folks just have to realize why they are making the choice. If you want a painting to look natural, by all means - avoid black most of the time. Black, like grey, is generally something that has color to it where a standard black paint really won't have the depth. But not everything needs to look natural. Black text? Just fine. I do a lot of abstract art: Black works well. I'm not going to give up black ink linework any time soon.
- deleted 6y ago
  [deleted]
- mudita 6y ago
  His bottom line "when you find #000000 in your color picker, ask yourself if you really want pure black. You’re probably better off with something more natural. And if you’re feeling adventurous, try staying away from the left edge of the color picker altogether" is much less radical than his title "never use black". I think this more subtle statement is fair advice to beginners in design, who might sometimes make an unreflected choice of black or not be aware that shadows aren't just black. So in my opinion it's probably bad advice for more experienced artists like you, but it might be very helpful advice for somebody else.
  - hairofadog 6y ago
    Great minds, etc.
  - a1369209993 6y ago
    > His bottom line "[...] You're probably better off with something more natural. [...]" The point is that this is false. In the vast majority of cases, you are not doing purely non-functional visual artwork, usability matters, and naturalness (or pretentions thereof) is undesireable.
  - Broken_Hippo 6y ago
    It isn't helpful, though. It creates false rules for folks, and his conclusion is false. It doesn't take long to explain where such rules came from and the effect they have. He's just parroting an "art rule" that isn't and then explaining some of his own process while acting like it is a hard-and-fast rule. I should mention that this "art rule" is the most commonly repeated "art rule" that folks repeat. I've had this conversation before. (Seriously, I'm sitting here from the side of helping others people do art when they are a beginner, and have for some years. I've taught a weekend art class for children and have been making art since I was young - I started oil painting before I was 10. I'm over 40 now).
- hairofadog 6y ago
  I agree with you mostly - it’s bad advice for people who know what they’re doing or have a specific reason for doing it, but it’s a good rule of thumb for a beginner or for someone who doesn’t have time to master design work who nonetheless does it frequently, like most small-shop web developers. “Don’t use the flash on your camera” would be a similar rule of thumb for beginners, even though there’s lots of great flash photography and there are many circumstances where you’d have no picture at all without the flash. I’d wager 95% of people probably go through their complete lives without ever thinking about how color works in visual media, and I appreciate posts like this one that may crack a few of those nuts.
corty 6y ago
This might all be true for paintings, but on a screen, #000 isn't black. It is usually a dark gray, depending on the backlight and contrast of your screen. And even with OLEDs, it might be darker, but it isn't really black. So imho, no need to be afraid of black for screen design. As for print, it depends on the process. Anything that composes colors from CMYK pixels will look ugly and blurry if you do not use pure colors e.g. for fonts at low resolutions or close up. Just compare black fonts and dark brown or grey fonts out of a color laser printer for an example. So no, only avoid black if it is really black you are avoiding and if it doesn't cause other problems.
- klodolph 6y ago
  Black isn't the total absence of light in the first place. It's just a relative absence of light. It works the same way for paintings, screens, oleds, etc. So when the author is talking about "black" they're using it in the same way that a normal person would talk about "black"--it's a very dark color.
  - corty 6y ago
    In that interpretation, the authors point is even less valid. In that case he just advocates substituting a dark color by a less dark one, wrecking contrast and thereby acccessability.
    - klodolph 6y ago
      > In that interpretation, the authors point is even less valid. The author's point is quite valid. #000 is a bit harsh and should be used sparingly. > In that case he just advocates substituting a dark color by a less dark one, wrecking contrast and thereby acccessability. That's pretty dramatic... just by swapping out black for a dark color you wreck contrast? No, that's wrong. Check out the WCAG guidelines. Recommended contrast ratios for body text are 3:1 (minimum), 4.5:1 (level AA), or 7:1 (level AAA). The linked article uses #113654 on #FFFFFF, which has a contrast ratio of 12.5:1, which meets the highest level of the accessibility guidelines for body text contrast. Meanwhile HN has text #828282 on #F6F6EF with a 3.54:1 contrast ratio. Barely meets minimum contrast guidelines for people with good eyesight. HN even features some #AFAFAF text, with a barely-readable 2.02:1 contrast ratio.
baumgarn 6y ago
There is nothing wrong with 100% black. It's good to understand the author's reasoning, but better to regulary break one's self imposed rules. Design doesn't have to be smooth all the time.
nottorp 6y ago
Do use black. Use whatever gives you high contrast, to start with. Pretty != usable. Not to mention that staring at a screen that is basically a light bulb pointed at your face is bad for the eyes. Anything that reduces the amount of light you're bombarded with is good.
thordenmark 6y ago
Black is beautiful. You get this bad advice in art school to not use black from some instructors who are almost religious about it. When you study great painters from the past, like Sargent, black was an essential color on their palette. Frazetta made stunning use of pure black.
- pbhjpbhj 6y ago
  Isn't the instructors advice relevant to student artists though. It's like 'never use goto', until you understand your craft as a master then it's useful advice.
- rrrrrrrrrrrryan 6y ago
  Like all things in art, chiaroscuro has fallen in and out of fashion over the centuries. That said, things have undoubtedly accelerated - we cycle through trends more quickly today. At some point in the early 90s, songs were either soft, or they were loud, and it gave Nirvana a beautiful opening to dial that contrast up to the max. The moment all our websites become shades of gray, some rebellious designers will buck the trend, create stunning interfaces with pure blacks and bright whites, and the cycle will begin anew. These sorts of absolute "rules" like "don't use pure black" are silly, of course. We have to have some understanding of the context: Is this a website for marketing purposes, or something which must be read for hours on end? On what kind of screen is this being viewed? (LCD? OLED? E-paper?) But even if the rules of thumb are silly, they're still important to learn - a good artist has a deep enough understanding of the rules to know when to break them.
  - mlyle 6y ago
    Yup, it's more like.... "are you REALLY SURE you want to use pure black?"
flixic 6y ago
The popularity of “pure black” themes for apps on OLED screens is the biggest counterpoint. When designing dark mode for mobile, please use #000.
- frosted-flakes 6y ago
  This works well for static screens like ebooks, but scrolling text on a pure black OLED background causes smearing because it takes longer for the pixel to turn on than to change colours. This effect is especially noticeable on my phone at low screen brightnesses. On Android, many apps actually have three colour themes: light, dark, and black, where dark uses a dark grey background. I also like how Samsung One UI handles this, where any text is on a frame with a grey background, but everything else has a pure black background. Example here: https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/Samsung_One_UI_1.jpg https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/...
foxdev 6y ago
>> Here’s a bit of a contrived example… Dribbble has a pretty awesome feature that lets you search for shots by color. If you search for shots with pure black and shots with “real black” which ones feel better? Not the ones with pure black in them. They both look fantastic on my new matte screen laptop in 2020. That's why updating your assumptions on the regular is a good idea. It's only 8 years later and this is already getting out of date.
- MereInterest 6y ago
  A bit of a tangent, bit where have you found a matte screen laptop recently? I much prefer them for handling glare, but glossy screens seem to have taken over completely.
  - foxdev 6y ago
    https://www.bhphotovideo.com/c/product/1560979-REG/hp_3h662ut_aba_445_g7_ryzen_5.html https://www.bhphotovideo.com/c/product/1560979-REG/hp_3h662u... I don't know why it says it has a touch screen, but it doesn't have one. The price premium over the 45% NTSC/250 nit version ("Standard") reflects the better light and color, not a touch screen. The performance is good. I threw 6 Wavetable instances at it in Ableton Live before I admitted defeat. AMD set a new standard with the 2020 mobile chips. The only downside is I haven't had a matte screen in ages and forgot you can see the matte diffuser if you really look for it. But every single color except #FFFFFF is brilliant, and even that is fine. Off-center viewing angles can be a little funky even with the privacy screen off, but it's fine once you get used to it. Buy another 8GB stick of RAM to fill the second slot to make it dual channel. It opens with a Phillips head screwdriver. HP posts service videos: https://www.youtube.com/watch?v=gxMMjSF4QFw https://www.youtube.com/watch?v=gxMMjSF4QFw
  - dguo 6y ago
    Lenovo ThinkPad X1 Carbon and Extreme laptops have anti-glare options for the display: https://www.lenovo.com/us/en/laptops/thinkpad/thinkpad-x1/c/thinkpadx1#compareSection https://www.lenovo.com/us/en/laptops/thinkpad/thinkpad-x1/c/...
  - 6y ago
numpad0 6y ago
User: selects dark mode Website: shows bright gray User: screams
crazygringo 6y ago
This is bizarre and just completely and utterly wrong. The first part is true... yes, obviously shadows aren't black. But in the real world (including screens and pigments) nothing is black if there's a lighting source somewhere. The #000 on your monitor is just dark gray, because your black pixel is still being lit by nearby pixels, ambient light, etc. And the LCD component (or unlit OLED) isn't perfect black anyways. Actual good graphic design advice is to aim for a comfortable level of contrast. Not too little, and not too much. Which is why most good websites don't use pure-black-on-pure-white, it's a little too strong. But another big reason for not using pure black or white for backgrounds is that they allow you to use #000 or #FFF for emphasis highlights that really "pop". But absolutely none of this has anything to do with #000 being "too black" that's "not natural". That's just utter nonsense.
- deleted 6y ago
  [deleted]
- brmgb 6y ago
  > But absolutely none of this has anything to do with #000 being "too black" that's "not natural". That's just utter nonsense. It would be if that point was made anywhere in the article. Thankfully, it's not. The article points are : - you are surrounded by black which are actually not black but rather dark grey with a significant amount of color mixed in ; - pure black should be avoided as it tends to overpower other colors in a palette ; - mixing an increasing amount of color to your grey as they get darker will make them softer and feels less dull.
  - crazygringo 6y ago
    > It would be if that point was made anywhere in the article. Thankfully, it's not. The article literally says: "When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out because it’s not natural." Pretty sure that's exactly the point I'm describing. The author literally uses the words "not natural". And my point is that the author's worries about pure black are irrelevant because #000 isn't pure black either. It's already just dark gray on any real screen, so there's no need to avoid it.
xenonite 6y ago
Is that why I prefer the iPhone design with a white front cover until iPhone 8? This is by the way also much easier on the eyes when reading because it reduces contrast, thus avoids ghost images.
blauditore 6y ago
The argumentation basically boils down to the fact that black induces too much contrast with other design elements. That's because those were not made with such context in mind. If you look at the metro design language as used by Windows Phones[0] a few years back, this worked perfectly fine, was pleasant to use, and very gentle on phone batteries. [0]: Random example: https://i.pinimg.com/originals/63/b6/bd/63b6bd3d59cc3f65782b85fac04aca96.png https://i.pinimg.com/originals/63/b6/bd/63b6bd3d59cc3f65782b...
Finnucane 6y ago
In ye olde days, print designers avoided pure black because it didn’t print well. Sometimes you’d put a light screen of blue or red over it so it didn’t look dead.
necovek 6y ago
If you are in a room with no light sources, shuttered windows, what colour do you see? I would call that black. Sure, it's rare to be in such a setting nowadays (at least your cellphone indicating it's charging will be there, or there'd be stars or moon outside), but I think caves are perfectly natural, and you get pure absence of light there. Or 10km below the sea level. As others have pointed out, you rarely even get pure black, especially with text: on top of reasons others have mentioned, displays use subpixel rendering to make an illusion of higher dpi (similar techniques are employed in the print industry).
- dajomu 6y ago
  Surely one issue with the example of a lightless room (or cave, or trench) is that there is no contrast and no image, just one default colour. The minute you add a light that gives you any kind of contrast you will in the majority of cases get reflections which will make most of the dark areas not completely black.
mrob 6y ago
Pure black is the correct color for text. Ink and paper manufacturers go to great lengths to make inks and papers with the darkest blacks and brightest whites, and there's no reason text on screen should be any different. Firefox's Reader View foolishly throws away contrast with gray text, but this can be fixed in chrome/userContent.css in the Firefox profile directory: @-moz-document url-prefix("about:reader") { body { background-color: #FFFFFF !important; color: #000000 !important; } } toolkit.legacyUserProfileCustomizations.stylesheets needs to be set to true in about:config for recent versions of Firefox to load userContent.css Some people complain about excessive brightness being hard on their eyes. They likely have their monitor brightness set too high. Most monitors can have their brightness set using DDC/CI (this sometimes needs to be enabled from the monitor's OSD). Most Linux distributions include "ddcutil". Install it and give the user who'll run it permissions to access I2C. In Debian, this can be accomplished by adding them to the i2c group. Find out which I2C buses your monitors are attached too: ddcutil detect Now you can change brightness from the command line: ddcutil --bus=6 setvcp 10 50 The first number after setvcp is the feature value to set. "10" is the standard feature value for brightness. The second number is the percentage brightness. I suggest picking values for low/medium/high brightness for each monitor, and binding a script that sets all them at once to the otherwise rarely used PrtScn/ScrLk/Pause keys. Presumably there is some way to do the same thing on other operating systems.
- 0-_-0 6y ago
  To find your profile directory, go to about:support To only apply the tweak to the dark theme, you can do: @-moz-document url-prefix("about:reader") { body.dark { color: #FFFFFF !important; background-color: #000000 !important; } }
- limomium 6y ago
  There are multiple blatantly obvious reasons why text on screen SHOULD be different. For one, IT'S NOT PAPER. Second, you should avoid blasting unnecessary light into your users' eyes. Third, bright screens consume more power than dark ones.
  - 6y ago
Jemm 6y ago
For accessibility, please use black text. Just look at Hacker News and grey text on bone background. It is not good for those of us with vision impairments.
ajani 6y ago
Design Tip: Never say never. Decide what's appropriate. Rules change in different contexts.
amelius 6y ago
My computer is black. My keyboard is black. My mouse is black-ish. Many beautiful things are black. Like a grand piano, or its black keys.
- chrismorgan 6y ago
  Take regular photos of these things, and you’ll find that they’re not black black. This article is specifically about the blackest black possible on screens.
  - amelius 6y ago
    Reminds me of an artwork that was specifically created to be the "blackest" possible black. And a man fell into it ... [1] [1] 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...
  - pessimizer 6y ago
    My monitor when turned off, is also not black black. So the blackest black possible on my screen is around the same color as these other black things.
    - chrismorgan 6y ago
      Yeah, but the point here is that everything’s relative: #000 is the blackest black possible on screens, so within the scope of the screen if you use it you can’t get anything blacker. Within the scope of the screen, the items you describe won’t be #000.
specialist 6y ago
I love opinionated esthetics like this. They're like schools of thought. Back when I did user interface design and technical writing, I would sometimes consider black design elements, like doing the squint test to see how headings balanced body text. FWIW, physically printing black can be very interesting. "Rich black" includes the other colorants (cyan, magenta, yellow). IIRC double black is having more than one (lithographic) plate with black. Really subtle stuff that you don't notice until something seems wrong. https://www.prepressure.com/design/basics/rich-black https://www.prepressure.com/design/basics/rich-black Then of course there were many partisans of the misc suppliers of black ink, each claiming superiorities.
gherkinnn 6y ago
2012 tag is very fitting. I remember being bored by all the off-black designs produced back then (2008-2013?). It all looked mushy and spineless. When The Verge came on the scene in 2011, they showed just how pretty the proper use of black can be.
BurningFrog 6y ago
My idea for making pay websites work is that you always serve all articles, but those who pay get a much better rendering of the text. If the Economist lets me read all their articles, but it pink on gray comic sans text, I get a chance to become hooked on their great articles, and a reason to upgrade.
kbutler 6y ago
Design tip: There is no such thing in the real world of materials and displays as pure black or pure white. Even if we had pure black and white, the real environment of the user would tweak the white balance. The same design or page, taken from a dark bedroom to an office to bright sunlight will range from unusable through fine (and maybe back again). So a designer can say #000 against #fff is too high-contrast for some environment, but some users will be in environments where it is not.
guenthert 6y ago
Is this a good place to complain about the choice of colour in KDE's konsole and threaten the developers with physical violence? https://stackoverflow.com/questions/38277542/minicom-black-background-color-is-not-respected https://stackoverflow.com/questions/38277542/minicom-black-b...
sporkologist 6y ago
I really don't dig the dark blue text. Historically that's the color of HTML links.... just make it black, everyone's used to it already.
strogonoff 6y ago
Reducing blackness of text to color is a mistake. Effective perceived contrast really depends on weight, size, tracking and leading. Same color looks darker with heavier font and less contrasty with thinner type set more speciously. Compare body text in Swift docs in Safari (uses macOS system font stack so may look differently on other systems) and Django docs for an example.
tuatoru 6y ago
Design tip: don't listen to designers who talk in absolutes.
antonvs 6y ago
Is the Facebook friend request screenshot intended to show what happens when you have a tendency write long, detailed articles about the color black?
dathinab 6y ago
> Black overpowers everything else. Exactly that's why there is one single wide spread place where black is the default, one place where companies probably could have saved money by using gray but didn't. And that's text. Not titles, not headlines or other similar text based constructs but boring continuous text. Another thing well known to be important about text is readability. But one companies designer had a wonderful idea to use gray text on gray background and do so at a place which works as a model for other. And now it's everywhere. It's annoying, it's exhausting and it's drives me mad. Luckily the designer of this page knew what he did. He used dark blue, which has a strong contrast and can be mistaken with black when sleepy. But you who made low contrast gray on gray a thing, know that I don't like you as you have cause me many troubles ;=)
cercatrova 6y ago
#000 is the correct color for backgrounds on articles, and #fff is the correct color for text on that background. I wish I could make everything have an OLED pure black theme, but sadly many apps use gray, very annoying.
mouzogu 6y ago
This article is so true. I really have trouble reading white on black, or differentiating different shades of black and gray, it all blends together, further exacerbated by using a low blue light setting on my monitor. This is something that worries me about the trend towards dark modes and often complete lack of light mode alternatives (Steam). And as others have mentioned, the complaint about light modes being too bright is often a brightness setting issue and not a design issue. There was a trend a few years back of using really light text colours on white, that's awful too. We need to respect the rules of contrast before what may "look" appeasing to the designer.
adultSwim 6y ago
The text on this page is a little hard to read. It could use more contrast. Black?

158 points by declanhaigh 6y ago

dang 6y ago

If curious see also 2018 https://news.ycombinator.com/item?id=17334627 https://news.ycombinator.com/item?id=17334627 2013 https://news.ycombinator.com/item?id=6581253 https://news.ycombinator.com/item?id=6581253 Discussed at the time: https://news.ycombinator.com/item?id=4357002 https://news.ycombinator.com/item?id=4357002

sascha_sl 6y ago

What if you're designing for OLED panels, where black is a stand in for "pixel off", which saves power and can help to hide bezels or (as with the default iPhone X Wallpapers) a notch. Sure, it's not trivial to get right, and it should definitely not be used outside backgrounds, but never is a harsh word.

dvfjsdhgfv 6y ago

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

Broken_Hippo 6y ago

This is just bad advice. From an artist's perspective, folks just have to realize why they are making the choice. If you want a painting to look natural, by all means - avoid black most of the time. Black, like grey, is generally something that has color to it where a standard black paint really won't have the depth. But not everything needs to look natural. Black text? Just fine. I do a lot of abstract art: Black works well. I'm not going to give up black ink linework any time soon.

deleted 6y ago
[deleted]
mudita 6y ago
His bottom line "when you find #000000 in your color picker, ask yourself if you really want pure black. You’re probably better off with something more natural. And if you’re feeling adventurous, try staying away from the left edge of the color picker altogether" is much less radical than his title "never use black". I think this more subtle statement is fair advice to beginners in design, who might sometimes make an unreflected choice of black or not be aware that shadows aren't just black. So in my opinion it's probably bad advice for more experienced artists like you, but it might be very helpful advice for somebody else.
- hairofadog 6y ago
  Great minds, etc.
- a1369209993 6y ago
  > His bottom line "[...] You're probably better off with something more natural. [...]" The point is that this is false. In the vast majority of cases, you are not doing purely non-functional visual artwork, usability matters, and naturalness (or pretentions thereof) is undesireable.
- Broken_Hippo 6y ago
  It isn't helpful, though. It creates false rules for folks, and his conclusion is false. It doesn't take long to explain where such rules came from and the effect they have. He's just parroting an "art rule" that isn't and then explaining some of his own process while acting like it is a hard-and-fast rule. I should mention that this "art rule" is the most commonly repeated "art rule" that folks repeat. I've had this conversation before. (Seriously, I'm sitting here from the side of helping others people do art when they are a beginner, and have for some years. I've taught a weekend art class for children and have been making art since I was young - I started oil painting before I was 10. I'm over 40 now).
hairofadog 6y ago
I agree with you mostly - it’s bad advice for people who know what they’re doing or have a specific reason for doing it, but it’s a good rule of thumb for a beginner or for someone who doesn’t have time to master design work who nonetheless does it frequently, like most small-shop web developers. “Don’t use the flash on your camera” would be a similar rule of thumb for beginners, even though there’s lots of great flash photography and there are many circumstances where you’d have no picture at all without the flash. I’d wager 95% of people probably go through their complete lives without ever thinking about how color works in visual media, and I appreciate posts like this one that may crack a few of those nuts.

corty 6y ago

This might all be true for paintings, but on a screen, #000 isn't black. It is usually a dark gray, depending on the backlight and contrast of your screen. And even with OLEDs, it might be darker, but it isn't really black. So imho, no need to be afraid of black for screen design. As for print, it depends on the process. Anything that composes colors from CMYK pixels will look ugly and blurry if you do not use pure colors e.g. for fonts at low resolutions or close up. Just compare black fonts and dark brown or grey fonts out of a color laser printer for an example. So no, only avoid black if it is really black you are avoiding and if it doesn't cause other problems.

klodolph 6y ago
Black isn't the total absence of light in the first place. It's just a relative absence of light. It works the same way for paintings, screens, oleds, etc. So when the author is talking about "black" they're using it in the same way that a normal person would talk about "black"--it's a very dark color.
- corty 6y ago
  In that interpretation, the authors point is even less valid. In that case he just advocates substituting a dark color by a less dark one, wrecking contrast and thereby acccessability.
  - klodolph 6y ago
    > In that interpretation, the authors point is even less valid. The author's point is quite valid. #000 is a bit harsh and should be used sparingly. > In that case he just advocates substituting a dark color by a less dark one, wrecking contrast and thereby acccessability. That's pretty dramatic... just by swapping out black for a dark color you wreck contrast? No, that's wrong. Check out the WCAG guidelines. Recommended contrast ratios for body text are 3:1 (minimum), 4.5:1 (level AA), or 7:1 (level AAA). The linked article uses #113654 on #FFFFFF, which has a contrast ratio of 12.5:1, which meets the highest level of the accessibility guidelines for body text contrast. Meanwhile HN has text #828282 on #F6F6EF with a 3.54:1 contrast ratio. Barely meets minimum contrast guidelines for people with good eyesight. HN even features some #AFAFAF text, with a barely-readable 2.02:1 contrast ratio.

baumgarn 6y ago

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

nottorp 6y ago

Do use black. Use whatever gives you high contrast, to start with. Pretty != usable. Not to mention that staring at a screen that is basically a light bulb pointed at your face is bad for the eyes. Anything that reduces the amount of light you're bombarded with is good.

thordenmark 6y ago

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

pbhjpbhj 6y ago
Isn't the instructors advice relevant to student artists though. It's like 'never use goto', until you understand your craft as a master then it's useful advice.
rrrrrrrrrrrryan 6y ago
Like all things in art, chiaroscuro has fallen in and out of fashion over the centuries. That said, things have undoubtedly accelerated - we cycle through trends more quickly today. At some point in the early 90s, songs were either soft, or they were loud, and it gave Nirvana a beautiful opening to dial that contrast up to the max. The moment all our websites become shades of gray, some rebellious designers will buck the trend, create stunning interfaces with pure blacks and bright whites, and the cycle will begin anew. These sorts of absolute "rules" like "don't use pure black" are silly, of course. We have to have some understanding of the context: Is this a website for marketing purposes, or something which must be read for hours on end? On what kind of screen is this being viewed? (LCD? OLED? E-paper?) But even if the rules of thumb are silly, they're still important to learn - a good artist has a deep enough understanding of the rules to know when to break them.
- mlyle 6y ago
  Yup, it's more like.... "are you REALLY SURE you want to use pure black?"

flixic 6y ago

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

frosted-flakes 6y ago
This works well for static screens like ebooks, but scrolling text on a pure black OLED background causes smearing because it takes longer for the pixel to turn on than to change colours. This effect is especially noticeable on my phone at low screen brightnesses. On Android, many apps actually have three colour themes: light, dark, and black, where dark uses a dark grey background. I also like how Samsung One UI handles this, where any text is on a frame with a grey background, but everything else has a pure black background. Example here: https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/Samsung_One_UI_1.jpg https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/...

foxdev 6y ago

>> Here’s a bit of a contrived example… Dribbble has a pretty awesome feature that lets you search for shots by color. If you search for shots with pure black and shots with “real black” which ones feel better? Not the ones with pure black in them. They both look fantastic on my new matte screen laptop in 2020. That's why updating your assumptions on the regular is a good idea. It's only 8 years later and this is already getting out of date.

MereInterest 6y ago
A bit of a tangent, bit where have you found a matte screen laptop recently? I much prefer them for handling glare, but glossy screens seem to have taken over completely.
- foxdev 6y ago
  https://www.bhphotovideo.com/c/product/1560979-REG/hp_3h662ut_aba_445_g7_ryzen_5.html https://www.bhphotovideo.com/c/product/1560979-REG/hp_3h662u... I don't know why it says it has a touch screen, but it doesn't have one. The price premium over the 45% NTSC/250 nit version ("Standard") reflects the better light and color, not a touch screen. The performance is good. I threw 6 Wavetable instances at it in Ableton Live before I admitted defeat. AMD set a new standard with the 2020 mobile chips. The only downside is I haven't had a matte screen in ages and forgot you can see the matte diffuser if you really look for it. But every single color except #FFFFFF is brilliant, and even that is fine. Off-center viewing angles can be a little funky even with the privacy screen off, but it's fine once you get used to it. Buy another 8GB stick of RAM to fill the second slot to make it dual channel. It opens with a Phillips head screwdriver. HP posts service videos: https://www.youtube.com/watch?v=gxMMjSF4QFw https://www.youtube.com/watch?v=gxMMjSF4QFw
- dguo 6y ago
  Lenovo ThinkPad X1 Carbon and Extreme laptops have anti-glare options for the display: https://www.lenovo.com/us/en/laptops/thinkpad/thinkpad-x1/c/thinkpadx1#compareSection https://www.lenovo.com/us/en/laptops/thinkpad/thinkpad-x1/c/...
- 6y ago

numpad0 6y ago

User: selects dark mode Website: shows bright gray User: screams

crazygringo 6y ago

This is bizarre and just completely and utterly wrong. The first part is true... yes, obviously shadows aren't black. But in the real world (including screens and pigments) nothing is black if there's a lighting source somewhere. The #000 on your monitor is just dark gray, because your black pixel is still being lit by nearby pixels, ambient light, etc. And the LCD component (or unlit OLED) isn't perfect black anyways. Actual good graphic design advice is to aim for a comfortable level of contrast. Not too little, and not too much. Which is why most good websites don't use pure-black-on-pure-white, it's a little too strong. But another big reason for not using pure black or white for backgrounds is that they allow you to use #000 or #FFF for emphasis highlights that really "pop". But absolutely none of this has anything to do with #000 being "too black" that's "not natural". That's just utter nonsense.

deleted 6y ago
[deleted]
brmgb 6y ago
> But absolutely none of this has anything to do with #000 being "too black" that's "not natural". That's just utter nonsense. It would be if that point was made anywhere in the article. Thankfully, it's not. The article points are : - you are surrounded by black which are actually not black but rather dark grey with a significant amount of color mixed in ; - pure black should be avoided as it tends to overpower other colors in a palette ; - mixing an increasing amount of color to your grey as they get darker will make them softer and feels less dull.
- crazygringo 6y ago
  > It would be if that point was made anywhere in the article. Thankfully, it's not. The article literally says: "When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out because it’s not natural." Pretty sure that's exactly the point I'm describing. The author literally uses the words "not natural". And my point is that the author's worries about pure black are irrelevant because #000 isn't pure black either. It's already just dark gray on any real screen, so there's no need to avoid it.

xenonite 6y ago

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

blauditore 6y ago

The argumentation basically boils down to the fact that black induces too much contrast with other design elements. That's because those were not made with such context in mind. If you look at the metro design language as used by Windows Phones[0] a few years back, this worked perfectly fine, was pleasant to use, and very gentle on phone batteries. [0]: Random example: https://i.pinimg.com/originals/63/b6/bd/63b6bd3d59cc3f65782b85fac04aca96.png https://i.pinimg.com/originals/63/b6/bd/63b6bd3d59cc3f65782b...

Finnucane 6y ago

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

necovek 6y ago

If you are in a room with no light sources, shuttered windows, what colour do you see? I would call that black. Sure, it's rare to be in such a setting nowadays (at least your cellphone indicating it's charging will be there, or there'd be stars or moon outside), but I think caves are perfectly natural, and you get pure absence of light there. Or 10km below the sea level. As others have pointed out, you rarely even get pure black, especially with text: on top of reasons others have mentioned, displays use subpixel rendering to make an illusion of higher dpi (similar techniques are employed in the print industry).

dajomu 6y ago
Surely one issue with the example of a lightless room (or cave, or trench) is that there is no contrast and no image, just one default colour. The minute you add a light that gives you any kind of contrast you will in the majority of cases get reflections which will make most of the dark areas not completely black.

mrob 6y ago

Pure black is the correct color for text. Ink and paper manufacturers go to great lengths to make inks and papers with the darkest blacks and brightest whites, and there's no reason text on screen should be any different. Firefox's Reader View foolishly throws away contrast with gray text, but this can be fixed in chrome/userContent.css in the Firefox profile directory: @-moz-document url-prefix("about:reader") { body { background-color: #FFFFFF !important; color: #000000 !important; } } toolkit.legacyUserProfileCustomizations.stylesheets needs to be set to true in about:config for recent versions of Firefox to load userContent.css Some people complain about excessive brightness being hard on their eyes. They likely have their monitor brightness set too high. Most monitors can have their brightness set using DDC/CI (this sometimes needs to be enabled from the monitor's OSD). Most Linux distributions include "ddcutil". Install it and give the user who'll run it permissions to access I2C. In Debian, this can be accomplished by adding them to the i2c group. Find out which I2C buses your monitors are attached too: ddcutil detect Now you can change brightness from the command line: ddcutil --bus=6 setvcp 10 50 The first number after setvcp is the feature value to set. "10" is the standard feature value for brightness. The second number is the percentage brightness. I suggest picking values for low/medium/high brightness for each monitor, and binding a script that sets all them at once to the otherwise rarely used PrtScn/ScrLk/Pause keys. Presumably there is some way to do the same thing on other operating systems.

0-_-0 6y ago
To find your profile directory, go to about:support To only apply the tweak to the dark theme, you can do: @-moz-document url-prefix("about:reader") { body.dark { color: #FFFFFF !important; background-color: #000000 !important; } }
limomium 6y ago
There are multiple blatantly obvious reasons why text on screen SHOULD be different. For one, IT'S NOT PAPER. Second, you should avoid blasting unnecessary light into your users' eyes. Third, bright screens consume more power than dark ones.
- 6y ago

Jemm 6y ago

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

ajani 6y ago

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

amelius 6y ago

My computer is black. My keyboard is black. My mouse is black-ish. Many beautiful things are black. Like a grand piano, or its black keys.

chrismorgan 6y ago
Take regular photos of these things, and you’ll find that they’re not black black. This article is specifically about the blackest black possible on screens.
- amelius 6y ago
  Reminds me of an artwork that was specifically created to be the "blackest" possible black. And a man fell into it ... [1] [1] 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...
- pessimizer 6y ago
  My monitor when turned off, is also not black black. So the blackest black possible on my screen is around the same color as these other black things.
  - chrismorgan 6y ago
    Yeah, but the point here is that everything’s relative: #000 is the blackest black possible on screens, so within the scope of the screen if you use it you can’t get anything blacker. Within the scope of the screen, the items you describe won’t be #000.

specialist 6y ago

I love opinionated esthetics like this. They're like schools of thought. Back when I did user interface design and technical writing, I would sometimes consider black design elements, like doing the squint test to see how headings balanced body text. FWIW, physically printing black can be very interesting. "Rich black" includes the other colorants (cyan, magenta, yellow). IIRC double black is having more than one (lithographic) plate with black. Really subtle stuff that you don't notice until something seems wrong. https://www.prepressure.com/design/basics/rich-black https://www.prepressure.com/design/basics/rich-black Then of course there were many partisans of the misc suppliers of black ink, each claiming superiorities.

gherkinnn 6y ago

2012 tag is very fitting. I remember being bored by all the off-black designs produced back then (2008-2013?). It all looked mushy and spineless. When The Verge came on the scene in 2011, they showed just how pretty the proper use of black can be.

BurningFrog 6y ago

My idea for making pay websites work is that you always serve all articles, but those who pay get a much better rendering of the text. If the Economist lets me read all their articles, but it pink on gray comic sans text, I get a chance to become hooked on their great articles, and a reason to upgrade.

kbutler 6y ago

Design tip: There is no such thing in the real world of materials and displays as pure black or pure white. Even if we had pure black and white, the real environment of the user would tweak the white balance. The same design or page, taken from a dark bedroom to an office to bright sunlight will range from unusable through fine (and maybe back again). So a designer can say #000 against #fff is too high-contrast for some environment, but some users will be in environments where it is not.

guenthert 6y ago

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

sporkologist 6y ago

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

strogonoff 6y ago

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

tuatoru 6y ago

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

antonvs 6y ago

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

dathinab 6y ago

> Black overpowers everything else. Exactly that's why there is one single wide spread place where black is the default, one place where companies probably could have saved money by using gray but didn't. And that's text. Not titles, not headlines or other similar text based constructs but boring continuous text. Another thing well known to be important about text is readability. But one companies designer had a wonderful idea to use gray text on gray background and do so at a place which works as a model for other. And now it's everywhere. It's annoying, it's exhausting and it's drives me mad. Luckily the designer of this page knew what he did. He used dark blue, which has a strong contrast and can be mistaken with black when sleepy. But you who made low contrast gray on gray a thing, know that I don't like you as you have cause me many troubles ;=)

cercatrova 6y ago

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

mouzogu 6y ago

This article is so true. I really have trouble reading white on black, or differentiating different shades of black and gray, it all blends together, further exacerbated by using a low blue light setting on my monitor. This is something that worries me about the trend towards dark modes and often complete lack of light mode alternatives (Steam). And as others have mentioned, the complaint about light modes being too bright is often a brightness setting issue and not a design issue. There was a trend a few years back of using really light text colours on white, that's awful too. We need to respect the rules of contrast before what may "look" appeasing to the designer.

adultSwim 6y ago

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