6 ms·

Subjective though it may be, there are a lot of people who find black-on-white unpleasant to look at. I greatly prefer sites that don't use it, regardless of w

Subjective though it may be, there are a lot of people who find black-on-white unpleasant to look at. I greatly prefer sites that don't use it, regardless of what they do with font and size. This could just be a case of conflicting preferences, but I don't think it has to be. Clear contrasts are achievable without insisting on #000/#FFF web design. - The most obvious improvement is simply keeping an eye on contrast. The article mentions using #333 over #000, but none of the unreadable samples provided are anywhere near that dark. #333 is approximately "light black" to the eye, and I suspect would give little trouble on a white background. - Another trick is to vary one of background and text. Both Google and Apple violate this guideline by placing dark grey text on a light grey background. Again subjective, but offering a visual 'endpoint' seems to preserve clarity in a way that multiple shades of grey do not (perhaps it just encourages more careful design). - Finally, we can choose colors which are not strictly grey. The HN background is a rather usable 244/244/235 - not far outside of light grey, but tan enough to provide more contrast than the pure brightness would imply. The vote/name options here are emphatically grey-on-grey, but it is at least a design choice to minimize their distractingness.

dredmorbius 10y ago
Shifting the background colour, slightly, tends to be vastly more readable than screwing with the foreground colour: https://codepen.io/dredmorbius/full/KpMqqB/ https://codepen.io/dredmorbius/full/KpMqqB/ It also far more closely approaches the appearance of print on somewhat aged paper: https://archive.org/stream/commercialismjou00holtuoft#page/54/mode/2up https://archive.org/stream/commercialismjou00holtuoft#page/5...
- Bartweiss 10y ago
  This is a great point. I realized that changing both colors, like Apple did, was awful. I underestimated the degree to which changing background feels better than changing text. Honestly, I don't think "too much contrast" is my biggest problem with black-on-white. It's the sea of #FFF that's unpleasant (with or without text), so something like HN's ~#EEE background feels way better to look at.
- kuschku 10y ago
  Actually, the link you showed has the colors #16110b and #e3d2ae for text and background. I might just use that in future websites.
  - dredmorbius 10y ago
    The Codepen actually shows what I use and prefer. The IA book example was just to show a typical example. The yellowing there is a bit too strong IMO. You might poke around and look at a number of books and see what particular shadings after actually having read content you prefer.
- kps 10y ago
  It's not aged paper, necessarily; look at any well-made book (excluding glossy picture books) and the paper will be stable and opaque but not bright.
  - dredmorbius 10y ago
    I'm spending a lot of time going through Internet Archive books (the one indicated has relevance to the whole advertising-supported nature of the Internet as well, I submitted it as an HN article earlier today). So I'm somewhat attuned to the visual appearance. Different paper ages differently, and I believe that much of the highly-yellowed paper is high-pulp content, as opposed to archival-quality, acid-free rag. The degree of yellowing can vary, and in some cases it's rather more than I'd prefer for comfortable reading. In modest amounts, it's not bad though.
    - kps 10y ago
      Yes, my intent was to emphasize that lower-than-maximum contrast through paper (and not grey ink) is typical of most high-quality printing, to avoid giving the impression that it implies age, wear, or low quality (pulp/newsprint), which designers probably want to avoid. (There was an 18th-century fad for extremely high contrast, but fortunately it passed. And current printer/copy paper is excessively bright (often even using fluorescent brighteners), but no one considers photocopies to be the height of good taste.)
jasode 10y ago
>Finally, we can choose colors which are not strictly grey. The HN background is a rather usable 244/244/235 - not far outside of light grey, but tan enough to provide more contrast than the pure brightness The key for HN readability is that the foreground text color is #000 -- pure black. (Pressing F12 in the web browser shows css style ".c00 {color = #000000;}"). Like dredmorbius previously mentioned, shifting the background from pure white to a subtle shade of tan doesn't kill readability when you keep the text at #000. It's when designers make the text itself a light gray that makes it unreadable.
- Bartweiss 10y ago
  Largely agreed - my second bullet was about only ever shifting one of text/background. I'm not certain that darkening backgrounds is more readable than lightening text, but it wouldn't surprise me. And in a broader design sense, darkening backgrounds is better for the sort of dark room reading Flux helps with, so it seems obviously preferable on that level.
- tomtheelder 10y ago
  I actually custom style HN just a little because I find the solid black text to be way to stark on the background. I use #222 instead and find the experience a lot more pleasant. I think this is a preferences thing. For me, solid black text almost always looks jarring, and is almost universally a worse reading experience than a dark grey.
chipotle_coyote 10y ago
From what I've gathered from some (admittedly not in depth) research, the effective contrast of ink on paper for books tends to be around 12:1, and for long form text that tends to be what I shoot for. I find the as-high-as-you-can go contrast of pure black on pure white to be a (tiny) bit of a strain when I'm reading a sufficiently long article. I see these "all the text on the web is a sea of grey" articles come up every so often, and I agree that the kind of bananas low contrast sites that they point to are problematic. But when I look around, these honestly seem to be outliers. Sites like the New York Times, Washington Post, The AV Club, CNN, and so on tend to be in that 12:1 contrast range or even higher. There are exceptions--Vox is only around 7.5:1 contrast ratio (which surprised me, since I find it pretty readable, but they're using big text in a highly legible typeface). But the worst offenders I find often seem to be sites that I suspect are driven more by engineering departments than designers: Google App Engine and Apple's system documentation are the big examples in this article, for instance. (Apple's consumer-facing web sites tend toward noticeably higher contrast type than the linked fiasco.)
epeus 10y ago
if you find black on white unpleasant to look at that likely means your monitor is too bright.
- Bartweiss 10y ago
  I think it's more complex than that (although most monitors are too bright). For pure black on pure white, my 'pleasant' brightness is somewhat lower than my 'easy to read' brightness. I'm reading in a space with high ambient light, and the contrast stays obnoxious until it becomes difficult to use. (I wish E-ink monitors were a thing.) For something like HN's color scheme, or a strong Flux setting, I can find a comfortable middle ground of readable and relaxing. I'm not sure why, but adding a bit of tan/yellow to the background makes a huge difference for me.
s_kilk 10y ago
> Subjective though it may be, there are a lot of people who find black-on-white unpleasant to look at Like staring at a light-bulb. I prefer a light grey as a background.
newscracker 10y ago
I find a white background (for commonly used black text) to be quite harsh on my eyes and don't like it much. So when I had to redesign the UI for an application, I went from a pure white background to a more grayish background (a bit further from #ffffff, in the #eX series), which had a good level of contrast with the text color (a very dark blue) while not appearing blinding. Contrast is very important for all (and also from the accessibility point of view), and the article shows some really awful contrast levels in the screenshots.

dredmorbius 10y ago

Shifting the background colour, slightly, tends to be vastly more readable than screwing with the foreground colour: https://codepen.io/dredmorbius/full/KpMqqB/ https://codepen.io/dredmorbius/full/KpMqqB/ It also far more closely approaches the appearance of print on somewhat aged paper: https://archive.org/stream/commercialismjou00holtuoft#page/54/mode/2up https://archive.org/stream/commercialismjou00holtuoft#page/5...

Bartweiss 10y ago
This is a great point. I realized that changing both colors, like Apple did, was awful. I underestimated the degree to which changing background feels better than changing text. Honestly, I don't think "too much contrast" is my biggest problem with black-on-white. It's the sea of #FFF that's unpleasant (with or without text), so something like HN's ~#EEE background feels way better to look at.
kuschku 10y ago
Actually, the link you showed has the colors #16110b and #e3d2ae for text and background. I might just use that in future websites.
- dredmorbius 10y ago
  The Codepen actually shows what I use and prefer. The IA book example was just to show a typical example. The yellowing there is a bit too strong IMO. You might poke around and look at a number of books and see what particular shadings after actually having read content you prefer.
kps 10y ago
It's not aged paper, necessarily; look at any well-made book (excluding glossy picture books) and the paper will be stable and opaque but not bright.
- dredmorbius 10y ago
  I'm spending a lot of time going through Internet Archive books (the one indicated has relevance to the whole advertising-supported nature of the Internet as well, I submitted it as an HN article earlier today). So I'm somewhat attuned to the visual appearance. Different paper ages differently, and I believe that much of the highly-yellowed paper is high-pulp content, as opposed to archival-quality, acid-free rag. The degree of yellowing can vary, and in some cases it's rather more than I'd prefer for comfortable reading. In modest amounts, it's not bad though.
  - kps 10y ago
    Yes, my intent was to emphasize that lower-than-maximum contrast through paper (and not grey ink) is typical of most high-quality printing, to avoid giving the impression that it implies age, wear, or low quality (pulp/newsprint), which designers probably want to avoid. (There was an 18th-century fad for extremely high contrast, but fortunately it passed. And current printer/copy paper is excessively bright (often even using fluorescent brighteners), but no one considers photocopies to be the height of good taste.)

jasode 10y ago

>Finally, we can choose colors which are not strictly grey. The HN background is a rather usable 244/244/235 - not far outside of light grey, but tan enough to provide more contrast than the pure brightness The key for HN readability is that the foreground text color is #000 -- pure black. (Pressing F12 in the web browser shows css style ".c00 {color = #000000;}"). Like dredmorbius previously mentioned, shifting the background from pure white to a subtle shade of tan doesn't kill readability when you keep the text at #000. It's when designers make the text itself a light gray that makes it unreadable.

Bartweiss 10y ago
Largely agreed - my second bullet was about only ever shifting one of text/background. I'm not certain that darkening backgrounds is more readable than lightening text, but it wouldn't surprise me. And in a broader design sense, darkening backgrounds is better for the sort of dark room reading Flux helps with, so it seems obviously preferable on that level.
tomtheelder 10y ago
I actually custom style HN just a little because I find the solid black text to be way to stark on the background. I use #222 instead and find the experience a lot more pleasant. I think this is a preferences thing. For me, solid black text almost always looks jarring, and is almost universally a worse reading experience than a dark grey.

chipotle_coyote 10y ago

From what I've gathered from some (admittedly not in depth) research, the effective contrast of ink on paper for books tends to be around 12:1, and for long form text that tends to be what I shoot for. I find the as-high-as-you-can go contrast of pure black on pure white to be a (tiny) bit of a strain when I'm reading a sufficiently long article. I see these "all the text on the web is a sea of grey" articles come up every so often, and I agree that the kind of bananas low contrast sites that they point to are problematic. But when I look around, these honestly seem to be outliers. Sites like the New York Times, Washington Post, The AV Club, CNN, and so on tend to be in that 12:1 contrast range or even higher. There are exceptions--Vox is only around 7.5:1 contrast ratio (which surprised me, since I find it pretty readable, but they're using big text in a highly legible typeface). But the worst offenders I find often seem to be sites that I suspect are driven more by engineering departments than designers: Google App Engine and Apple's system documentation are the big examples in this article, for instance. (Apple's consumer-facing web sites tend toward noticeably higher contrast type than the linked fiasco.)

epeus 10y ago

if you find black on white unpleasant to look at that likely means your monitor is too bright.

Bartweiss 10y ago
I think it's more complex than that (although most monitors are too bright). For pure black on pure white, my 'pleasant' brightness is somewhat lower than my 'easy to read' brightness. I'm reading in a space with high ambient light, and the contrast stays obnoxious until it becomes difficult to use. (I wish E-ink monitors were a thing.) For something like HN's color scheme, or a strong Flux setting, I can find a comfortable middle ground of readable and relaxing. I'm not sure why, but adding a bit of tan/yellow to the background makes a huge difference for me.

s_kilk 10y ago

> Subjective though it may be, there are a lot of people who find black-on-white unpleasant to look at Like staring at a light-bulb. I prefer a light grey as a background.

newscracker 10y ago

I find a white background (for commonly used black text) to be quite harsh on my eyes and don't like it much. So when I had to redesign the UI for an application, I went from a pure white background to a more grayish background (a bit further from #ffffff, in the #eX series), which had a good level of contrast with the text color (a very dark blue) while not appearing blinding. Contrast is very important for all (and also from the accessibility point of view), and the article shows some really awful contrast levels in the screenshots.