7 ms·

I'm going to be "that guy" in the comments section this time, largely because I feel like I've been seeing this more recently and I've had to fix it myself: I

I'm going to be "that guy" in the comments section this time, largely because I feel like I've been seeing this more recently and I've had to fix it myself: I don't really get why it seems to be a "thing" recently for websites to have low-contrast text colors. This is at least the second time in a week I've seen light gray text on white background, and to not strain my eyes I went into the CSS for the website and fixed it myself by just making the text black. Another website was even lighter gray than this one, and it was very difficult to actually read the words. I'm honestly curious as to what it is designers see about the light gray text on white which is appealing to them. It feels like they should be straining to read it just as much as myself, but it still makes it onto the production website. If the person/people who have control over this end up reading this, I implore you to just change your "ol, p, ul" color CSS attribute to "color: black" or some such. Otherwise: I like the idea of asking developers to read code. It is actually a wonderful way to learn good habits. I still have (good, hopefully) coding habits that I can attribute back to reading Half-Life 2's Source engine code a long time ago.

Raphmedia 10y ago
Their text to background colour ratio is 4.6 which is really not that bad with their 18px font-size. That being said, I'm not a fan of grey on white either.
- another-dave 10y ago
  Yeah, it's actually WCAG double-A compliant. Agree in general though, more & more I end up tweaking site's font-size/line-height/contrast to bring it back to normality.
westmeal 10y ago
Who knows? Maybe the contrast on their monitor hasn't been set correctly.
Swizec 10y ago
From my limited exposure to designers, I've learned that they think lower contrast strains reader's eyes less than high contrast does. Black on white is thought to be too striking to read comfortably. Here is a post from 2012 explaining why it's important to use a dark grey instead of a pure black: https://ianstormtaylor.com/design-tip-never-use-black https://ianstormtaylor.com/design-tip-never-use-black And I agree. Pure black often looks bad. Light gray is even worse.
- pc86 10y ago
  > Black on white is thought to be too striking to read comfortably. It is, but (very) dark gray text on a (very) dark gray background is fine. This light gray on white thing is just nonsense.
- FreezerburnV 10y ago
  Fair enough! But if webpages that did "black on white"-style text, like a book, and just emulated what books look like, (not-really black text and not-really white background) I'd be 100% ok with that. Modifying a webpage to not have light gray text is much easier to type "0" for the color than to type out an exact, least-eye-strain gray. I'd much prefer if designers put in the least-eye-strain gray for me :)
- sharkjacobs 10y ago
  I wonder if this rule of thumb will change when OLEDs are most common displays. It seems like it might be worth taking advantage of OLEDs ability to do unlit black.
  - discreditable 10y ago
    I like this characteristic of OLEDs. When I'm reading a book on my phone in low light I like to set the background to black and text to white. It significantly lowers the light output of the screen in that scenario compared to a traditional LCD. That factor alone made me prefer my Galaxy S5 over my gen1 kindle fire for reading despite the screen size.
- ciaranm 10y ago
wmeredith 10y ago
I've been a UX designer for 10 years and I can tell you why. (Or at least why from point of view.) It's a deprecated design practice to make font rendering looks smoother in a world where retina screens were not ubiquitous. Back in the old days (so like 3 years ago) before the majority of screens were 'retina' (aka you can't see the pixels at normal viewing distances) fonts always rendered with jagged edges. Turning down the contrast between a font and its background is effective in reducing this effect. It reduces the contrast, it's a very straightforward mechanic. Obviously, this is moot now with razor font rendering on retina screens. And if you do it too much, you risk accessibility problems. The nonsense about black on a white background being too harsh because of eye strain is exactly that: nonsense. If you wanted to reduce eye strain, you'd dial down the brightness of the actual background, often seen in "nightmode" options offered in various UI. (Come to think of it, that would be hilarious if you hit "nightmode" and it just lightened the text, making the overall screen even brighter.)
- FreezerburnV 10y ago
  That's interesting, I'd never even thought about something like that. Thanks for responding with that information. Is this still something that gets taught? Or do you think that these sites are being made by people who were taught that a number of years ago and haven't taken the time to learn how to interact with monitors in a post-retina/high-dpi world? Or has it become some kind of "cult" knowledge that gets repeated by people who aren't aware of the real reasoning behind why it was done back then? Also interesting to learn white-on-black eye strain is nonsense. Another comment mentioned that it probably looks better to have dark gray because true blacks are rare, is that accurate?
- vmarsy 10y ago
  That's an interesting point of view! As a UX designer veteran, you must know these numbers better than most of us here, do you know how ubiquitous retina screen are? On desktop, the Firefox Hardware report [1] tends to show that they the most common resolutions are 1366 * 768 and 1920 * 1080, this unfortunately doesn't tell us if those are retina screens or not, but from [2] it seems that we're talking about at most 17% as a 'retina' display would report as 1920 * 1080 [1] https://metrics.mozilla.com/firefox-hardware-report/ https://metrics.mozilla.com/firefox-hardware-report/ [2] https://news.ycombinator.com/item?id=13184022 https://news.ycombinator.com/item?id=13184022
pfranz 10y ago
This site[1] says it's because people conflate content with illustration. It also cites Hacker News as an offender (although looking at their screenshot to what I'm seeing, I think it was "fixed") [1] http://contrastrebellion.com/ http://contrastrebellion.com/
- mcbits 10y ago
  The low contrast is on self-posts (Ask HN, etc). Aside from being more difficult to read, I always get an instant "negative" vibe when I see them because it looks like they've been heavily downvoted.
- yellowapple 10y ago
  In an ironic twist, the "TWEET" link toward the bottom of the page has atrociously-terrible contrast against the dark background.
discreditable 10y ago
I agree, I've found myself tweaking site CSS often lately as well. To some designers' argument that there's no such thing as true black I say that this is a limitation, not an ideal. https://bestmotherfucking.website/#grey-text https://bestmotherfucking.website/#grey-text Were my JS fundamentals a little stronger, I'd work on a browser add-on to detect low-contrast body text and improve it automatically.
seanwilson 10y ago
> I don't really get why it seems to be a "thing" recently for websites to have low-contrast text colors. It doesn't need to be any more complex than "designers think it looks nice". Black text obviously has a better contrast but I bet it doesn't look as good.
- tracker1 10y ago
  There are many darker gray options to pick from though... I'm not as good as I was when I was younger, so fine detail is hard... I'm using a 40" 4K display at native resolution, and most of the websites I use I bump between 125 and 150% to be readable. These tiny devices with really tiny fonts kill me... I don't use the FB app in particular, because even with the accessibility settings turned all the way up, I can't read the damned thing on my phone. Really wish FB would fix this, but there are other web offenders too. I get design is important, but it should NEVER be at the cost of removing usability.
edblarney 10y ago
I'll bet $100 that in this instance, it was just an impromptu design decision. He liked the way it looked, it contrasted nicely with the headings and that's it.
JacksonGariety 10y ago
I recall a blog post by Ian Storm Taylor [0] that suggested it from the perspective of a painter. Not sure how well it applies to screens, but it's definetly not a thoughtless move to use #222 for your fonts. 0: https://ianstormtaylor.com/design-tip-never-use-black https://ianstormtaylor.com/design-tip-never-use-black

Raphmedia 10y ago

Their text to background colour ratio is 4.6 which is really not that bad with their 18px font-size. That being said, I'm not a fan of grey on white either.

another-dave 10y ago
Yeah, it's actually WCAG double-A compliant. Agree in general though, more & more I end up tweaking site's font-size/line-height/contrast to bring it back to normality.

westmeal 10y ago

Who knows? Maybe the contrast on their monitor hasn't been set correctly.

Swizec 10y ago

From my limited exposure to designers, I've learned that they think lower contrast strains reader's eyes less than high contrast does. Black on white is thought to be too striking to read comfortably. Here is a post from 2012 explaining why it's important to use a dark grey instead of a pure black: https://ianstormtaylor.com/design-tip-never-use-black https://ianstormtaylor.com/design-tip-never-use-black And I agree. Pure black often looks bad. Light gray is even worse.

pc86 10y ago
> Black on white is thought to be too striking to read comfortably. It is, but (very) dark gray text on a (very) dark gray background is fine. This light gray on white thing is just nonsense.
FreezerburnV 10y ago
Fair enough! But if webpages that did "black on white"-style text, like a book, and just emulated what books look like, (not-really black text and not-really white background) I'd be 100% ok with that. Modifying a webpage to not have light gray text is much easier to type "0" for the color than to type out an exact, least-eye-strain gray. I'd much prefer if designers put in the least-eye-strain gray for me :)
sharkjacobs 10y ago
I wonder if this rule of thumb will change when OLEDs are most common displays. It seems like it might be worth taking advantage of OLEDs ability to do unlit black.
- discreditable 10y ago
  I like this characteristic of OLEDs. When I'm reading a book on my phone in low light I like to set the background to black and text to white. It significantly lowers the light output of the screen in that scenario compared to a traditional LCD. That factor alone made me prefer my Galaxy S5 over my gen1 kindle fire for reading despite the screen size.
ciaranm 10y ago

wmeredith 10y ago

I've been a UX designer for 10 years and I can tell you why. (Or at least why from point of view.) It's a deprecated design practice to make font rendering looks smoother in a world where retina screens were not ubiquitous. Back in the old days (so like 3 years ago) before the majority of screens were 'retina' (aka you can't see the pixels at normal viewing distances) fonts always rendered with jagged edges. Turning down the contrast between a font and its background is effective in reducing this effect. It reduces the contrast, it's a very straightforward mechanic. Obviously, this is moot now with razor font rendering on retina screens. And if you do it too much, you risk accessibility problems. The nonsense about black on a white background being too harsh because of eye strain is exactly that: nonsense. If you wanted to reduce eye strain, you'd dial down the brightness of the actual background, often seen in "nightmode" options offered in various UI. (Come to think of it, that would be hilarious if you hit "nightmode" and it just lightened the text, making the overall screen even brighter.)

FreezerburnV 10y ago
That's interesting, I'd never even thought about something like that. Thanks for responding with that information. Is this still something that gets taught? Or do you think that these sites are being made by people who were taught that a number of years ago and haven't taken the time to learn how to interact with monitors in a post-retina/high-dpi world? Or has it become some kind of "cult" knowledge that gets repeated by people who aren't aware of the real reasoning behind why it was done back then? Also interesting to learn white-on-black eye strain is nonsense. Another comment mentioned that it probably looks better to have dark gray because true blacks are rare, is that accurate?
vmarsy 10y ago
That's an interesting point of view! As a UX designer veteran, you must know these numbers better than most of us here, do you know how ubiquitous retina screen are? On desktop, the Firefox Hardware report [1] tends to show that they the most common resolutions are 1366 * 768 and 1920 * 1080, this unfortunately doesn't tell us if those are retina screens or not, but from [2] it seems that we're talking about at most 17% as a 'retina' display would report as 1920 * 1080 [1] https://metrics.mozilla.com/firefox-hardware-report/ https://metrics.mozilla.com/firefox-hardware-report/ [2] https://news.ycombinator.com/item?id=13184022 https://news.ycombinator.com/item?id=13184022

pfranz 10y ago

This site[1] says it's because people conflate content with illustration. It also cites Hacker News as an offender (although looking at their screenshot to what I'm seeing, I think it was "fixed") [1] http://contrastrebellion.com/ http://contrastrebellion.com/

mcbits 10y ago
The low contrast is on self-posts (Ask HN, etc). Aside from being more difficult to read, I always get an instant "negative" vibe when I see them because it looks like they've been heavily downvoted.
yellowapple 10y ago
In an ironic twist, the "TWEET" link toward the bottom of the page has atrociously-terrible contrast against the dark background.

discreditable 10y ago

I agree, I've found myself tweaking site CSS often lately as well. To some designers' argument that there's no such thing as true black I say that this is a limitation, not an ideal. https://bestmotherfucking.website/#grey-text https://bestmotherfucking.website/#grey-text Were my JS fundamentals a little stronger, I'd work on a browser add-on to detect low-contrast body text and improve it automatically.

seanwilson 10y ago

> I don't really get why it seems to be a "thing" recently for websites to have low-contrast text colors. It doesn't need to be any more complex than "designers think it looks nice". Black text obviously has a better contrast but I bet it doesn't look as good.

tracker1 10y ago
There are many darker gray options to pick from though... I'm not as good as I was when I was younger, so fine detail is hard... I'm using a 40" 4K display at native resolution, and most of the websites I use I bump between 125 and 150% to be readable. These tiny devices with really tiny fonts kill me... I don't use the FB app in particular, because even with the accessibility settings turned all the way up, I can't read the damned thing on my phone. Really wish FB would fix this, but there are other web offenders too. I get design is important, but it should NEVER be at the cost of removing usability.

edblarney 10y ago

I'll bet $100 that in this instance, it was just an impromptu design decision. He liked the way it looked, it contrasted nicely with the headings and that's it.

JacksonGariety 10y ago

I recall a blog post by Ian Storm Taylor [0] that suggested it from the perspective of a painter. Not sure how well it applies to screens, but it's definetly not a thoughtless move to use #222 for your fonts. 0: https://ianstormtaylor.com/design-tip-never-use-black https://ianstormtaylor.com/design-tip-never-use-black