7 ms·

> Use near-black and near-white instead of pure black and white Please don't. Reducing contrast of text makes it harder to read. Even if you do it just a littl

• pphysch 4y ago
  Yes. Users can adjust their screen brightness to their personal taste. The "safe" rule would be to use 100% black and 100% white for maximum contrast. Only diverge from that if you have a good reason.
  • 542458 4y ago
    I think that the idea that most users will adjust their monitor to make my website look good is unrealistic.
    • pessimizer 4y ago
      They're not, they're adjusting their monitor to make black and white look good. It has nothing to do with you.
      • 542458 4y ago
        Most content on most users’ screens doesn’t use pure black/white for UI. Most users will (assuming they even know or care how to adjust their monitor, which is far from a given!) adjust their monitor to make most content look good, which will not be the same as making pure black/white UI look good.
        • pessimizer 4y ago
          My point is that nobody is adjusting their screen for your website, and using black and white doesn't imply that people would need to adjust their screen for your website.
        • layer8 4y ago
          That every website uses different “blacks” and “white” is the problem though, because it means you have to adjust your screen differently for each website. If they’d just use #000 on #FFF like 20 years ago, you’d only adjust your screen once and be fine.
        • corysama 4y ago
          So, then if designers stopped lowering the contrast of their sites, users would adjust their monitors back to sensible defaults rather than cranking the contrast to make low-contrast web sites look good. Right now we are stuck in a loop where designers assume users have cranked the contrast too high, so they make low-contrast web sites, so user have to crank the contrast too high... TBF, I think having a small range of blacks in use is a good thing. Use 0.0 and 1.0 for highlighted items. 0.1 and 0.9 for the rest. Great! A little color rather than grayscale? Great! But, I've seen far too many sites that take it too far and think they are smart by presenting dim-on-grey text. f2 hex is 0.87 and 22 hex is 0.33. That's cutting my screen's range in half! And, that's much better than many lovingly designed sites I've had stomp over with screen-reader mode, on my 800 nits phone screen!
        • Izkata 4y ago
          > assuming they even know or care how to adjust their monitor Or if their device is even capable of it (phones/tablets and laptops)
          • carlosjobim 4y ago
            What are all of you people talking about? People adjust their laptop brightness at will. I adjust mine all the time for comfort when reading. It is two buttons on the keyboard. All cell phones have easy brightness controls a swipe away and everybody knows how to use them.
    • Rapzid 4y ago
      A lot will and for those less savy probably a majority of new devices come setup to adjust brightness based on ambient light conditions. This difference between ambient and screen brightness will be what determines how comfortable max white is on SDR content. Also can't control if a user has their brightness too low. So what then?
• ericmcer 4y ago
  I like the softness, just #000000 on #ffffff is kinda harsh. Look at HN the off-white background makes it less assaulting on your eyes.
  • CodeWriter23 4y ago
    I’m sure it’s fine for whippersnappers with newer eyes. As people’s eyes age, contrast is key. And by that I mean as my eyes have aged.
    • AdrianB1 4y ago
      You are complaining about not enough contrast, but there is also too much contrast. Wow, you are both right.
• rayrag 4y ago
  For me pure black text on pure white background looks good, but pure white text on pure black background it doesn't look good, my eyes are getting tired faster but that also depends on what font family/weight/size is used. For thin font weights (100-300) maximum contrast increases readablity, for regular/bold weights it's not neccessary to be pure white on pure black.
• runsonrum 4y ago
  I believe near-black and near-white suppose to be used in conjunction with all the other suggestions made in the article, not just by itself. If you are looking at a document, I would say that should have different rules applied.
• yoyohello13 4y ago
  IDK. I'm over 30 and pure black background with white text hurts my eyes. It isn't a brightness thing either. I can turn my screen brightness down to 30% and the contrast still hurts my eyes. Black text on white background is fine though.
  • jeltz 4y ago
    Yeah, over 50 I might buy but I am almost 40 and have no big issues reading low contrast webpages. Sure, I prefer higher contrast like here on HN but low contrast is about as hard to read as when I was 20.
    • kuschku 4y ago
      HN is actually already "low" contrast compared to what this website recommends.
• strken 4y ago
  The example from the article is #F2F2F2 and #222222, which has a contrast ratio of 14:1, which is nearly three times the WCAG guidelines and better than most websites. I think it would be instructive for people who think they hate off-black and off-white to try reading #FFFFFF on #000000 text and compare their reading speed to #F2F2F2 and #222222. I believe (but can't prove) that most of the hate is for contrast ratios below 10 being falsely applied to higher ratios. People over the age of 30 can mostly read books and newspapers just fine, and when they can't it's rarely the fault of the off-white paper and slightly faded ink.
  • klabb3 4y ago
    The opinion that something is wrong with your display if black text on white background is too bright strikes me as odd. Would one expect that #f00 or #0ff to be comfortable as well? Asking the monitor to blast the highest light intensity possible across the screen clearly risks being uncomfortable in many light conditions. Monitors emit light, they aren’t passively illuminated like a paper. If you reduce the brightness to the point where #fff is comfortable across the screen, there’s no room for bright details, that should exceed the brightness of the bg. So many programmers use dark mode to reduce eye strain for a reason. That said, even though monitors like laptops and phones increase brightness, that’s not enough when in direct sunlight. There, black in white would make sense, but of course comes at a cost of reducing range (it’s physically impossible). Screens that are incapable of keeping up with direct sunlight should probably increase contrast in those conditions.
    • kentonv 4y ago
      If you are making a video game or movie and you wast super-bright stuff on the screen, that's what HDR is for. (Incidentally I'm a big gamer but I generally prefer to turn off HDR because it hurts my eyes. It's actually really annoying. I don't want certain parts of a scene to be extra-extra-bright.) If you're giving me text, please don't second-guess whether I've set my monitor brightness appropriately. The vast majority of text I look at is already black-on-white. By reducing the contrast of your text you're assuming that everything else I look at is blinding me and somehow you're saving me with more appropriate contrast. No, I've set my monitor so everything else I look at looks right and what you're showing me is too washed out.
• gond 4y ago
  Designer here. By maximising contrast, one is trading short-term legibility with long term legibility. The maximum amount of contrast is as problematic as almost no contrast. There is a maximum useable deviation to both ends. By approaching max contrast, it gets harder to read for longer periods, because your photoreceptors approaching exhaustion, creating an after image [1]. It may happen slow enough to go unnoticed for some periods but should be noticeable at the end of a day as eye strain. [1] https://en.m.wikipedia.org/wiki/Afterimage https://en.m.wikipedia.org/wiki/Afterimage
  • chrstphrknwtn 4y ago
    For black text to be an issue, surely this is a sign that your screen is too bright?
    • gond 4y ago
      Yes. The default settings on most monitors are unusable for reading. Calibrated reference screens for print reproduction are approaching 120-140 cd/m^2, which tends to be in the 20-35 percent rage of most monitor brightness settings (if the implemented brightness curve of the monitor scales lineary; not the case with some Eizo‘s. These use something akin to an inverted gamma 2.2 to compensate for the nonlinearity in brightness sensivity of humans) 120 cd then looks somewhat like matte paper. Ideally, this should shift up and down with the brightness of the environment the screen is put into. That is why most serious photometers/colorimeters include ambient light sensors and consider the results during calibration.
    • exodust 4y ago
      It's "too bright" because 100% white is being used and covers most of the screen. When most displays blast intense white light in your face at normal settings, it's not a screen brightness issue, it's a content brightness issue. Solved with controls such as dark modes, reading modes and options for users to customise. Obviously a lot of users prefer the full contrast experience, but many don't. Providing user choice is best strategy.
  • mattkrause 4y ago
• mhandley 4y ago
  The problem is that if your monitor is set up so that a white background looks OK, then all photos, video, etc, will look too dark. If your monitor is set up bright enough for photos to look good, then text on a white background is too dazzling and tiring for the eyes. So the only good compromise is for the monitor to be set up so that photos are bright enough and then not use text on a pure white background.
  • exodust 4y ago
    Better solution: provide user controls so people can select the contrast themselves. It's never going to happen that developers and designers all decide never to use pure white. User controls and options is best solution.
• FullyFunctional 4y ago
  Also, both my OLED and eInk prefer true black, unnaturalness be damned (the former for energy, the latter for contrast). Otherwise I loved this list as a lay person. Regarding color palette, I really like the work of Kate Rose Morley: https://fosstodon.org/@kate/109348023789472321 https://fosstodon.org/@kate/109348023789472321
• btheshoe 4y ago
  notice how hackernews uses an off white for its background? do you find it hard to read?
  • mogoh 4y ago
    Not GP, but “Yes.” and “Yes.”
  • buttscicles 4y ago
    I agree with the off-white/black reducing eye strain but HN is not a good example of readability in any way!
    • augustk 4y ago
      Agreed, I think this site should use the CSS property `max-width' to keep lines of text at a reasonable length.
• mogoh 4y ago
  I agree. The given reasoning is also bad: > “Pure black looks unnatural on a screen, and pure white is too bright.“ Even though it looks “unnatural“ at least I can read it.
• rkangel 4y ago
  > Worse, a lot of designers seem to get carried away with this and end up with gray-on-gray text that's impossible to read for anyone over the age of 30. I have always put this down to designers having very high quality monitors with excellent contrast. Apple screens (laptop or desktop) particularly tend to show those low contrast things as more readable than for the rest of us. It is a plague that seems to be less bad than it used to be. I think it's ok in principle but it should be quite subtle. Also, I think that full-black should generally be used for text, but you can get away with more on the background (look at HN for example!).