6 ms·

Weirdly, this site uses `color: #1b1b1b` instead of black. Why? The difference is barely noticeable, but black provides more contrast and IMO looks better than

Weirdly, this site uses `color: #1b1b1b` instead of black. Why? The difference is barely noticeable, but black provides more contrast and IMO looks better than #1b1b1b. I've seen many designers assert that being slightly off-black is "better" for some reason, but isn't this the same argument that eventually leads to low-contrast designs? Why is a little bit of contrast reduction good, but a lot is bad? Pure black always looks (slightly) better to me (I commonly open the inspector and toggle the color to test this). And anyway, the variation in people's monitor settings is probably much wider than the difference between #1b1b1b and black, so what is even the point? Why waste brainpower trying to decide exactly how much contrast reduction is good, and risk going too far for some people while creating an imperceptible difference for others? (To be clear, if it's not obvious, I'm a big fan of this site's message... but apparently I'd go even further.)

kdazzle 3y ago
First time I read an argument against all black in design was this 2012 article. Something about it not being a color found in nature. Then, yeah, some people seemed to interpret it as “use gray on gray”. https://ianstormtaylor.com/design-tip-never-use-black/ https://ianstormtaylor.com/design-tip-never-use-black/
- amelius 3y ago
  Funny, all these strange glyphs also don't seem to appear in nature ...
  - gumby 3y ago
    There is a theory that the reason those glyphs (in most languages, whether characters or ideograms) tend to have a similar, conservative aspect ratio is that they use a part of the early visual system that was useful in finding/tracking footprints (evidence of prey or threats) In the case of characters, especially hanzi/kanji, ones that are hard to recognize/distinguish either evolve (simplify and/or develop disambiguating features) or fall into disuse. Clearly “hard to recognize” is driven by physiological structures that are by definition “natural”
    - amelius 3y ago
      If true then why are Latin and Arabic glyphs so different?
      - gumby 3y ago
        I wrote “in most languages” specifically thinking of Arabic-derived scripts, but don’t know of any others. Older scripts, and those descended from other roots, seem to have this property. Of course in practice Arabic writing is as easy or hard for humans to learn as any other system, so the evolutionary pressure/affordance to get rid of hard parts still applies. But the theory of early visual system affordance could in principle be studied (though I don’t think fmri is really solid enough yet). Any historical implications of course will always have to remain theoretical. Writing has technological constraints as well; look at cuneiform vs, say, Pali. Since Arabic evolved after predecessor systems already existed, technological affordances clearly had a, or the, major influence. Edit: I read your comment again, and just to be clear: your question is really “why is Arabic different”. Latin, Georgian, Aramaic, Brahmic, Chinese, Egyptian Hieroglyphs, Maya pictographs, all have roughly the same form factor.
      - lmm 3y ago
        They're not?
- pmontra 3y ago
  Backlit screens are not found in nature too. Maybe 100% black is appropriate in that unnatural environment. It's great on my screen.
- layer8 3y ago
  What this argument overlooks is that pure black also isn’t found on computer displays. Even for OLED, black is really dark gray if you have any amount of ambient lighting. Displays are a part of nature in that sense.
- marcosdumay 3y ago
  That is a very old lesson, for painting. A few things are truly black, because you don't get to see their color. But "nothing" has actually the color black. Anyway, even for painting, the fact that they have a paint for it means it happens on nature. It's just very rare, so everybody has to learn the lesson that no, you don't use black paint for that black thing you are seeing. For computer interfaces the entire thing is obviously bullshit since the beginning. But well, our area has a thing for accepting obvious bullshit.
- masswerk 3y ago
  Mind that the site in question is from 2011 (compare the site-of-the-day link). So this is a reaction to trends even prior to this.
- mcdonje 3y ago
  The central idea there is to tweak the darks to align with the color palette, not to just make them gray.
- davemp 3y ago
  I don’t get the “found in nature” arguments. We’ve likely been using black (carbon) markings for thousands of years.
epiccoleman 3y ago
It's funny, because I've never really thought hard about this, but I made a similar decision on my personal site. My site has a "dark mode" style theme - dark background and "white" text. When I was initially designing the theme, I opted for a slightly-less-white text color, and as I've spent more time on it, I ended up bumping that color to be closer to pure white. (I'm using Tailwind, so this change amounted to "text-neutral-400" -> "text-neutral-300".) I think I did this because the "more white" color seemed... sharper (very insightful, I know)? Like it was "an assault on the eye" to have the color be so bright. As I continued working on the site, I decided, in short, that that was stupid, and that I should have more contrast. This was a good reminder for me that some of my pages need that styling updated, but it works out well for demonstrating the difference: This page has the old, less contrasting color for the body text (text-neutral-400): https://epiccoleman.com/posts/2023-03-07-how-i-built-this-site.html https://epiccoleman.com/posts/2023-03-07-how-i-built-this-si... This page has the new, "whiter" color (text-neutral-300): https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifths.html https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth... After skimming through these again as I linked them in this post, I think I could even bump it up to be even closer to white. I also have a pretty bright monitor (it's an Apple Thunderbolt Display that I got for a pittance from my old office when they switched to Dell monitors). So that may be influencing me towards slightly less contrast. Anyway, not to ramble, but I guess my point is - design is hard! It's not easy to take into account all the myriad different factors that need to be considered to make designs that look aesthetically pleasing while maintaining readability at various brightnesses and screen sizes and so on and so forth. Edit: One other consideration - I wanted some color contrast between elements like text, headings, and the post date - so that's another thing I was trying to take into account. For example, if you want your headings to be a bit brighter than your text, you're left using (for example) text-neutral-200 for headings and text-neutral-300 for text. Again, as I continued tweaking, I realized that the size difference between headings and text does enough work establishing contrast that this was unnecessary - but it's just one more factor in a long list of things a designer has to think about to make things look right.
- DiabloD3 3y ago
  > I also have a pretty bright monitor (it's an Apple Thunderbolt Display that I got for a pittance from my old office when they switched to Dell monitors). So that may be influencing me towards slightly less contrast. This part of your problem: if you're doing any design work, understand the specification you're designing for. This goes for any photographer, print designer, or web dev. sRGB, bt709, rec2020, and SDR content in rec2100 contexts define the brightness of white as 100 nits, and is generally considered acceptable to be between 100 and 120 (as you often need to offset for ambient lighting to maintain perceptual white). Your perception of both luma and chroma contrast, but also your perception of color itself, changes over the range of brightness your eye can perceive; the organic gamma curve of your eye also changes. Example: sRGB gamma and bt1886 EOTF are intended to be used with content that has a 2.4 gamma and a near-D65 whitepoint at around 100 nits; the same content at "theater darkness" (48 nits) will be encoded with a warmer/yellower white point, at 2.6 gamma, to maintain perceptual similarity. And why is this? The rods (low light vision) and cones (bright light and colors vision) in your eye have different organic gamma curves (incl. each of the three cones have different curves in-of themselves), and the rods do not respond to all visible light equally and have a broad "color" of their own and rods continue to function and influence perception in bright light situations. You can argue, "but Diablo, most people do not calibrate their displays", which is absolutely true; most displays, however, are manufactured with defaults that mimic the intended use of sRGB and bt709 content, and users, left to their own devices, generally will choose a brightness that approximates 100 nits plus an appropriate offset for ambient. However, even for your own personal website, buy a colorimeter, whip out the DisplayCal software, set your profile to "Video (D65, BT1886)" (not "sRGB" due to modern content being mastered entirely for displays manufactured in the past 15 years; BT1886 handles perceptional similarity and better in dark values than sRGB's weirdly defined ramp), and then enjoy being able to author content for a wide range of displays.
layer8 3y ago
The irony is that “pure black” (#000) is already off-black on non-OLED displays. IPS displays in particular are relatively low contrast and have poor black levels, often further worsened by IPS glow.
- chrismorgan 3y ago
  On TN panels, #000 looks horrible from bad angles (mostly below, from memory—it’s years since I’ve had to endure a TN panel), and #1b1b1b would actually look much better and even darker.
marcosdumay 3y ago
I'm not a designer, but personally I like to reserve the extreme colors for the rare occasions you need something "blacker than black" or the equivalent with your color.
Tao3300 3y ago
It's a holdover from color printing processes. Rich Black (100% K over another color) and Registration Black (full everything) can look bad or even damage the paper. It's like design's equivalent of not ending sentences with prepositions.
ilyt 3y ago
The difference is probably more noticeable on OLED screens that have "true" black. For personal themes I do use a bit of off black, althought usually it's something like very dark gray. It just makes screen not a complete black hole late at night

kdazzle 3y ago

First time I read an argument against all black in design was this 2012 article. Something about it not being a color found in nature. Then, yeah, some people seemed to interpret it as “use gray on gray”. https://ianstormtaylor.com/design-tip-never-use-black/ https://ianstormtaylor.com/design-tip-never-use-black/

amelius 3y ago
Funny, all these strange glyphs also don't seem to appear in nature ...
- gumby 3y ago
  There is a theory that the reason those glyphs (in most languages, whether characters or ideograms) tend to have a similar, conservative aspect ratio is that they use a part of the early visual system that was useful in finding/tracking footprints (evidence of prey or threats) In the case of characters, especially hanzi/kanji, ones that are hard to recognize/distinguish either evolve (simplify and/or develop disambiguating features) or fall into disuse. Clearly “hard to recognize” is driven by physiological structures that are by definition “natural”
  - amelius 3y ago
    If true then why are Latin and Arabic glyphs so different?
    - gumby 3y ago
      I wrote “in most languages” specifically thinking of Arabic-derived scripts, but don’t know of any others. Older scripts, and those descended from other roots, seem to have this property. Of course in practice Arabic writing is as easy or hard for humans to learn as any other system, so the evolutionary pressure/affordance to get rid of hard parts still applies. But the theory of early visual system affordance could in principle be studied (though I don’t think fmri is really solid enough yet). Any historical implications of course will always have to remain theoretical. Writing has technological constraints as well; look at cuneiform vs, say, Pali. Since Arabic evolved after predecessor systems already existed, technological affordances clearly had a, or the, major influence. Edit: I read your comment again, and just to be clear: your question is really “why is Arabic different”. Latin, Georgian, Aramaic, Brahmic, Chinese, Egyptian Hieroglyphs, Maya pictographs, all have roughly the same form factor.
    - lmm 3y ago
      They're not?
pmontra 3y ago
Backlit screens are not found in nature too. Maybe 100% black is appropriate in that unnatural environment. It's great on my screen.
layer8 3y ago
What this argument overlooks is that pure black also isn’t found on computer displays. Even for OLED, black is really dark gray if you have any amount of ambient lighting. Displays are a part of nature in that sense.
marcosdumay 3y ago
That is a very old lesson, for painting. A few things are truly black, because you don't get to see their color. But "nothing" has actually the color black. Anyway, even for painting, the fact that they have a paint for it means it happens on nature. It's just very rare, so everybody has to learn the lesson that no, you don't use black paint for that black thing you are seeing. For computer interfaces the entire thing is obviously bullshit since the beginning. But well, our area has a thing for accepting obvious bullshit.
masswerk 3y ago
Mind that the site in question is from 2011 (compare the site-of-the-day link). So this is a reaction to trends even prior to this.
mcdonje 3y ago
The central idea there is to tweak the darks to align with the color palette, not to just make them gray.
davemp 3y ago
I don’t get the “found in nature” arguments. We’ve likely been using black (carbon) markings for thousands of years.

epiccoleman 3y ago

It's funny, because I've never really thought hard about this, but I made a similar decision on my personal site. My site has a "dark mode" style theme - dark background and "white" text. When I was initially designing the theme, I opted for a slightly-less-white text color, and as I've spent more time on it, I ended up bumping that color to be closer to pure white. (I'm using Tailwind, so this change amounted to "text-neutral-400" -> "text-neutral-300".) I think I did this because the "more white" color seemed... sharper (very insightful, I know)? Like it was "an assault on the eye" to have the color be so bright. As I continued working on the site, I decided, in short, that that was stupid, and that I should have more contrast. This was a good reminder for me that some of my pages need that styling updated, but it works out well for demonstrating the difference: This page has the old, less contrasting color for the body text (text-neutral-400): https://epiccoleman.com/posts/2023-03-07-how-i-built-this-site.html https://epiccoleman.com/posts/2023-03-07-how-i-built-this-si... This page has the new, "whiter" color (text-neutral-300): https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifths.html https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth... After skimming through these again as I linked them in this post, I think I could even bump it up to be even closer to white. I also have a pretty bright monitor (it's an Apple Thunderbolt Display that I got for a pittance from my old office when they switched to Dell monitors). So that may be influencing me towards slightly less contrast. Anyway, not to ramble, but I guess my point is - design is hard! It's not easy to take into account all the myriad different factors that need to be considered to make designs that look aesthetically pleasing while maintaining readability at various brightnesses and screen sizes and so on and so forth. Edit: One other consideration - I wanted some color contrast between elements like text, headings, and the post date - so that's another thing I was trying to take into account. For example, if you want your headings to be a bit brighter than your text, you're left using (for example) text-neutral-200 for headings and text-neutral-300 for text. Again, as I continued tweaking, I realized that the size difference between headings and text does enough work establishing contrast that this was unnecessary - but it's just one more factor in a long list of things a designer has to think about to make things look right.

DiabloD3 3y ago
> I also have a pretty bright monitor (it's an Apple Thunderbolt Display that I got for a pittance from my old office when they switched to Dell monitors). So that may be influencing me towards slightly less contrast. This part of your problem: if you're doing any design work, understand the specification you're designing for. This goes for any photographer, print designer, or web dev. sRGB, bt709, rec2020, and SDR content in rec2100 contexts define the brightness of white as 100 nits, and is generally considered acceptable to be between 100 and 120 (as you often need to offset for ambient lighting to maintain perceptual white). Your perception of both luma and chroma contrast, but also your perception of color itself, changes over the range of brightness your eye can perceive; the organic gamma curve of your eye also changes. Example: sRGB gamma and bt1886 EOTF are intended to be used with content that has a 2.4 gamma and a near-D65 whitepoint at around 100 nits; the same content at "theater darkness" (48 nits) will be encoded with a warmer/yellower white point, at 2.6 gamma, to maintain perceptual similarity. And why is this? The rods (low light vision) and cones (bright light and colors vision) in your eye have different organic gamma curves (incl. each of the three cones have different curves in-of themselves), and the rods do not respond to all visible light equally and have a broad "color" of their own and rods continue to function and influence perception in bright light situations. You can argue, "but Diablo, most people do not calibrate their displays", which is absolutely true; most displays, however, are manufactured with defaults that mimic the intended use of sRGB and bt709 content, and users, left to their own devices, generally will choose a brightness that approximates 100 nits plus an appropriate offset for ambient. However, even for your own personal website, buy a colorimeter, whip out the DisplayCal software, set your profile to "Video (D65, BT1886)" (not "sRGB" due to modern content being mastered entirely for displays manufactured in the past 15 years; BT1886 handles perceptional similarity and better in dark values than sRGB's weirdly defined ramp), and then enjoy being able to author content for a wide range of displays.

layer8 3y ago

The irony is that “pure black” (#000) is already off-black on non-OLED displays. IPS displays in particular are relatively low contrast and have poor black levels, often further worsened by IPS glow.

chrismorgan 3y ago
On TN panels, #000 looks horrible from bad angles (mostly below, from memory—it’s years since I’ve had to endure a TN panel), and #1b1b1b would actually look much better and even darker.

marcosdumay 3y ago

I'm not a designer, but personally I like to reserve the extreme colors for the rare occasions you need something "blacker than black" or the equivalent with your color.

Tao3300 3y ago

It's a holdover from color printing processes. Rich Black (100% K over another color) and Registration Black (full everything) can look bad or even damage the paper. It's like design's equivalent of not ending sentences with prepositions.

ilyt 3y ago

The difference is probably more noticeable on OLED screens that have "true" black. For personal themes I do use a bit of off black, althought usually it's something like very dark gray. It just makes screen not a complete black hole late at night