8 ms·

Design Tip: Never Use Black (2012)

87 points by koopuluri 8y ago

TrinaryWorksToo 8y ago
I use an oled display on my phone. Black is really nice on it and I wonder if that changes things. Also I see this defense of not using black as an excuse to have a poor contrast ratio. I really enjoy black on white or vice versa because you can't beat that contrast.
- ahoka 8y ago
  I really like WP8 because of this. It's high contrast blacks were really good on an OLED. Easy on the eye and battery.
Rjevski 8y ago
Unrelated, but I just checked his other posts about design and I miss 2012-era design so much. Nowadays everything seems flat and boring with no personality.
- Double_a_92 8y ago
  Because it has to be made in a way that also works on smartphones...
  - Rjevski 8y ago
    Pre-iOS 7 apps prove that non-boring design can work on smartphones too.
    - bitL 8y ago
      IMO it was partially due to push to retina screens and limited vector authoring tools (SVG) that were available at that time (i.e. difficult to make beautiful scalable icons if your authoring tools offer you mostly single-color patches and at best some basic gradients). Not sure why are we still stuck on that horrible design paradigm though.
EvanKnowles 8y ago
Wow, Facebook has changed a lot - only thing that tipped me off that this was an older (but still relevant) article.
ericsoderstrom 8y ago
Just checked the gmail 'dark' background color, which always looked pretty black to me. Is actually #111111
blattimwind 8y ago
> When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out because it’s not natural. All of the “black” everyday objects around you have some amount of light bouncing off of them, which means they aren’t black, they’re dark gray. And that light probably has a tint to it, so they’re not even dark gray, they’re colored-dark gray. But black on a screen is not an unnatural black per se. On most screens you will get a baseline brightness and tint, and larger black areas pick up (diffuse or clear) reflections from the environment.
bitL 8y ago
Black looks absolutely gorgeous on OLED displays. I'll keep ignoring this "advice" (disclaimer: I studied visual arts for almost a decade and am entitled to my own opinion). I have seen so many contrarian statements: "Never mix red and green" - "Always put red and green together" that I just consider most designer advice a folklore.
- reustle 8y ago
  While I agree it looks nice on oled screens, most people aren't using those.
- asfdsfggtfd 8y ago
  5% of males are red-green colorblind. Never mix red and green. If you do 2.5% of your audience have just stopped using your product/looking at your presentation.
  - zaarn 8y ago
    Sorta, if the red-green is purely design and doesn't serve a functional purpose it would be fine. Ideally if you design some UI, do it in Black and White first, if it remains usable and somewhat pretty, add colors.
    - dspillett 8y ago
      > purely design and doesn't serve a functional purpose it would be fine Or if it does provide functional information (traffic-light style status displays for instance), it is fine if the information is also carried by other means. > do it in Black and White first ... then add colors. Exactly. That way anyone with reasonable vision[1] can use the result and it is enhanced for those with good colour vision, rather than requiring good colour vision to be properly usable. [1] Other serious visual impairments (up to and including complete blindness) should be considered too where possible, of course. Keep contrast high, try to design with screen readers and other common aids in mind, ...
      - 8y ago
lvncelot 8y ago
Regardless of whether I agree with his point or not, using a "real life" photo as an example, when it's heavily filtered is just ridiculous.
latte 8y ago
>> Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow isn’t black. Words on web pages aren’t black. A #000 pixel on the screen of your mobile or laptop isn't black, either. I strictly adhered to the principle of never using black until I was specifically asked by one of my users that has presbyopia (and most people over 50 or 60 have it, to some degree) to make the text black. Black text was much easier for them to read than the standard Bootstrap dark colour with the same font size.
- yathern 8y ago
  Your concern for less-than-perfect sighted users is laudable - however, there are accessibility specifications for contrast you can adhere to (4.5:1 I believe), to ensure your text is readable, without having to go #000 black on #fff white in all cases
- TheOtherHobbes 8y ago
  Can confirm. I'm >50, and I found the not-really-black text very hard to read.
- chadlavi 8y ago
  WCAG guidelines: https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast-contrast https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visu... the other commenter was right, 4.5:1 ratio minimum.
  - amluto 8y ago
    How do they define contrast? Is it the actual linear light (gamma corrected) contrast or are that saying that, if R==G==B, then you want R1/R2 >= 4.5?
- WorldMaker 8y ago
  > A #000 pixel on the screen of your mobile or laptop isn't black, either. Though with modern OLED screens they get really close.
vidarh 8y ago
First thing I did when clicking through to the article was to hit my shortcut to switch the colours so the background is black to avoid the glare... Incidentally I also read HN with a black background, use black terminal backgrounds, black editor backgrounds. Sometimes I toy with brighter backgrounds, but I prefer thigher contrast to brighter backgrounds every time. Of course that might well be because no screen I have will give a pure black.
- WorldMaker 8y ago
  > Of course that might well be because no screen I have will give a pure black. OLED screens and their close approximations to "pure black" (unlit pixels) I think are more reason to use dark themes with real black as background. It uses less energy, is good for batteries, and sends less overall light into our over-stimulated eyeballs.
Tepix 8y ago
I like saturated colours more than the average guy. However, while pumping up those colours, don't ignore contrast! http://contrastrebellion.com/ http://contrastrebellion.com/
kbutler 8y ago
> Black overpowers everything else This is the key idea of the article - very high contrast is powerful visually, and you should avoid too high contrast if that isn't what you want. This can be good advice, but realize that #000 is not pure black (colors on the screen are also colors in the environment, so they may get reflection or be emitting light, even if they are displaying #000), and some users may prefer or need high contrast for accessibility, especially in very bright environments. But if you want to see the closest to pure black you can get, go to a total eclipse - that disk of the moon surrounded by the sun's corona was _amazing_! Such an intense contrast, and it really did overpower everything else. And yes, even that isn't "pure black" - but it sure felt like it!
- jpindar 8y ago
  Another example of very dark black is the side of a stack of razor blades or Xacto knife blades. Because of the geometry, light goes in, but doesn't reflect back out.
mynegation 8y ago
Design tip: never use blue for regular text either. My first immediate impression from the page was that it is one giant hyperlink (probably visited).
- SomeHacker44 8y ago
  I have a hard time reading blue text (especially if it is small, and even when wearing glasses) due to chromatic aberration caused by my astigmatism in my eyes. The first thing I do in any app which allows it is change all the mostly blue colors to mixtures like cyan.
SomeHacker44 8y ago
Speaking solely for myself, I really dislike apps which use dark gray and light gray instead of full black and full white (or something very close to it) in their "dark UI." It gets worse as you age and presbyopia sets in. It is so much easier (for me, at least) to read high contrast text than this modern trend of "gosh don't use real black and white" in the UI. Additionally, actual pixel black is very (um, perfectly) energy efficient on OLED displays like my iPhone X and Alienware 13. I like the discussion of black in art, though.
tabtab 8y ago
This is highly subjective. Different people like different things.
matty22 8y ago
I'm glad this fad has shifted away from using washed out fonts on white backgrounds since this article was posted in 2012. I am no designer and choosing/judging color palettes is probably my weakest area, but man the whole 'never use black' thing was/is awful in my opinion. I strongly prefer a website that uses #000 text on #fff background over some washed out gray that's impossible to read on #fff background.
frexo2 8y ago
In most cases black is not the best color, but I don't agree with the word never. There are cases where black color is the best choice.
rurban 8y ago
That's my biggest hope for GitHub. That the now black title bar will become blueish. Black is horrible.

87 points by koopuluri 8y ago

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

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

Rjevski 8y ago

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

Double_a_92 8y ago
Because it has to be made in a way that also works on smartphones...
- Rjevski 8y ago
  Pre-iOS 7 apps prove that non-boring design can work on smartphones too.
  - bitL 8y ago
    IMO it was partially due to push to retina screens and limited vector authoring tools (SVG) that were available at that time (i.e. difficult to make beautiful scalable icons if your authoring tools offer you mostly single-color patches and at best some basic gradients). Not sure why are we still stuck on that horrible design paradigm though.

EvanKnowles 8y ago

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

ericsoderstrom 8y ago

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

blattimwind 8y ago

> When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out because it’s not natural. All of the “black” everyday objects around you have some amount of light bouncing off of them, which means they aren’t black, they’re dark gray. And that light probably has a tint to it, so they’re not even dark gray, they’re colored-dark gray. But black on a screen is not an unnatural black per se. On most screens you will get a baseline brightness and tint, and larger black areas pick up (diffuse or clear) reflections from the environment.

bitL 8y ago

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

reustle 8y ago
While I agree it looks nice on oled screens, most people aren't using those.
asfdsfggtfd 8y ago
5% of males are red-green colorblind. Never mix red and green. If you do 2.5% of your audience have just stopped using your product/looking at your presentation.
- zaarn 8y ago
  Sorta, if the red-green is purely design and doesn't serve a functional purpose it would be fine. Ideally if you design some UI, do it in Black and White first, if it remains usable and somewhat pretty, add colors.
  - dspillett 8y ago
    > purely design and doesn't serve a functional purpose it would be fine Or if it does provide functional information (traffic-light style status displays for instance), it is fine if the information is also carried by other means. > do it in Black and White first ... then add colors. Exactly. That way anyone with reasonable vision[1] can use the result and it is enhanced for those with good colour vision, rather than requiring good colour vision to be properly usable. [1] Other serious visual impairments (up to and including complete blindness) should be considered too where possible, of course. Keep contrast high, try to design with screen readers and other common aids in mind, ...
    - 8y ago

lvncelot 8y ago

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

latte 8y ago

>> Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow isn’t black. Words on web pages aren’t black. A #000 pixel on the screen of your mobile or laptop isn't black, either. I strictly adhered to the principle of never using black until I was specifically asked by one of my users that has presbyopia (and most people over 50 or 60 have it, to some degree) to make the text black. Black text was much easier for them to read than the standard Bootstrap dark colour with the same font size.

yathern 8y ago
Your concern for less-than-perfect sighted users is laudable - however, there are accessibility specifications for contrast you can adhere to (4.5:1 I believe), to ensure your text is readable, without having to go #000 black on #fff white in all cases
TheOtherHobbes 8y ago
Can confirm. I'm >50, and I found the not-really-black text very hard to read.
chadlavi 8y ago
WCAG guidelines: https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast-contrast https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visu... the other commenter was right, 4.5:1 ratio minimum.
- amluto 8y ago
  How do they define contrast? Is it the actual linear light (gamma corrected) contrast or are that saying that, if R==G==B, then you want R1/R2 >= 4.5?
WorldMaker 8y ago
> A #000 pixel on the screen of your mobile or laptop isn't black, either. Though with modern OLED screens they get really close.

vidarh 8y ago

First thing I did when clicking through to the article was to hit my shortcut to switch the colours so the background is black to avoid the glare... Incidentally I also read HN with a black background, use black terminal backgrounds, black editor backgrounds. Sometimes I toy with brighter backgrounds, but I prefer thigher contrast to brighter backgrounds every time. Of course that might well be because no screen I have will give a pure black.

WorldMaker 8y ago
> Of course that might well be because no screen I have will give a pure black. OLED screens and their close approximations to "pure black" (unlit pixels) I think are more reason to use dark themes with real black as background. It uses less energy, is good for batteries, and sends less overall light into our over-stimulated eyeballs.

Tepix 8y ago

I like saturated colours more than the average guy. However, while pumping up those colours, don't ignore contrast! http://contrastrebellion.com/ http://contrastrebellion.com/

kbutler 8y ago

> Black overpowers everything else This is the key idea of the article - very high contrast is powerful visually, and you should avoid too high contrast if that isn't what you want. This can be good advice, but realize that #000 is not pure black (colors on the screen are also colors in the environment, so they may get reflection or be emitting light, even if they are displaying #000), and some users may prefer or need high contrast for accessibility, especially in very bright environments. But if you want to see the closest to pure black you can get, go to a total eclipse - that disk of the moon surrounded by the sun's corona was _amazing_! Such an intense contrast, and it really did overpower everything else. And yes, even that isn't "pure black" - but it sure felt like it!

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

mynegation 8y ago

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

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

SomeHacker44 8y ago

Speaking solely for myself, I really dislike apps which use dark gray and light gray instead of full black and full white (or something very close to it) in their "dark UI." It gets worse as you age and presbyopia sets in. It is so much easier (for me, at least) to read high contrast text than this modern trend of "gosh don't use real black and white" in the UI. Additionally, actual pixel black is very (um, perfectly) energy efficient on OLED displays like my iPhone X and Alienware 13. I like the discussion of black in art, though.

tabtab 8y ago

This is highly subjective. Different people like different things.

matty22 8y ago

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

frexo2 8y ago

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

rurban 8y ago

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