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.
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.
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.
> 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.
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.
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.
> 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, ...
For Screen Readers I've found it helpful to use elinks or lynx to develop the initial HTML.
If your application remains readable and functional on a terminal output, chances are high a screen reader can handle it (since I can't afford any of the screen readers people seem to use, that's what I'm stuck with, aside from following general guidelines on this)
Progressive enhancing, the process of having a working HTML page, enhance with CSS/Images and then enhance with JS, is sadly a rather lost art in modern webdevs.
As a red-green colourblind male. I'd temper that statement to don't mix red and green for encoding information. Ideally don't use colour as the sole means of encoding information anywhere.
The experience of colourblind people can vary wildly but for me other colours are harder to discern than red vs green. Blues, purples and pinks all are all very tricky.
If however you want to use red and green for some styling element, knock yourself out!
Exactly, I'm also slightly red-green colorblind, but I have only really have difficulty with green and yellow when I need to differentiate them quickly.
Red-green was in the context of mixing colors, not color-blindness here. If you e.g. mix oil/tempera colors, red and green give you a really ugly grey color; on the edges between red and green patches you'd get something similar.
I have the opposite issue - my color perception is 100%, so I can distinguish very slight differences in color tones. What might look acceptable to you might be unacceptable to me and vice versa ;-)
It is pretty binary. If I can't understand your slides because you have one set of points in red and the other in green I walk away and ignore your presentation.
Colorblindness also has very well established definitions. Note: learning what words mean should come before trying to redefine them.
Those definitions are mostly wrong. On HN (my experience) people associate colorblindness with and only with "red-green color blindness". This is obviously wrong, or at least not well defined.
It's not binary. There is a range from not colorblind to minor defience to fully red-green colorblind
Same. I used to buy into this when I was so afraid of "breaking rules" but this is before I realized it was often just parroted advice from dated guidance. I've recently switched to using a lot more standard monochrome styles for websites and find them to be more accessible and clear.
There is also a reason some of the largest news pubs do it too.
>> 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.
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
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.
> 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.
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!
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.
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.
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'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.
45 comments
[ 3.2 ms ] story [ 88.4 ms ] threadBut 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.
Ideally if you design some UI, do it in Black and White first, if it remains usable and somewhat pretty, add colors.
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, ...
If your application remains readable and functional on a terminal output, chances are high a screen reader can handle it (since I can't afford any of the screen readers people seem to use, that's what I'm stuck with, aside from following general guidelines on this)
Progressive enhancing, the process of having a working HTML page, enhance with CSS/Images and then enhance with JS, is sadly a rather lost art in modern webdevs.
The experience of colourblind people can vary wildly but for me other colours are harder to discern than red vs green. Blues, purples and pinks all are all very tricky.
If however you want to use red and green for some styling element, knock yourself out!
I have the opposite issue - my color perception is 100%, so I can distinguish very slight differences in color tones. What might look acceptable to you might be unacceptable to me and vice versa ;-)
Colorblindness also has very well established definitions. Note: learning what words mean should come before trying to redefine them.
It's not binary. There is a range from not colorblind to minor defience to fully red-green colorblind
Then my brother walked by and told me that in fact it was green....
Some LEDs are a nightmare, and I work in IT
There is also a reason some of the largest news pubs do it too.
https://www.nytimes.com #000 #333 https://www.washingtonpost.com #2a2a2a
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.
the other commenter was right, 4.5:1 ratio minimum.
Though with modern OLED screens they get really close.
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.
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.
http://contrastrebellion.com/
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!
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.