6 ms·

#000 on my screen isn't going to be pure black either. There's ambient light, the black level on the monitor, etc. Several of the examples of saturated grays

by wffurr 5y ago

#000 on my screen isn't going to be pure black either. There's ambient light, the black level on the monitor, etc. Several of the examples of saturated grays in this article are low-contrast UI that's hard to read. Please don't do that. "Words on web pages aren't black". But they should be #000 or close to it. Let the user's screen and environment determine the rest. Interfaces are artificial constructs designed to be as readable and understandable as possible. Looking at the color of shadows and physically dark things is unhelpful for designing readable interfaces with sufficient contrast.

lhorie 5y ago
> But they should be #000 or close to it You should use moderation. Guidelines for accessibility suggest a 3:1 contrast ratio as the minimum contrast level, but having too much contrast can also make reading more difficult (e.g. for people w/ dislexia)
- imachine1980_ 5y ago
  Not only that (dyslexic) but I see blurry faster if I Read epub whit black and white than Grey and white
  - wizzwizz4 5y ago
    And some people can't really see writing at all if it's grey and white. The best solution is user agents that actually convey a modicum of agency to the user. The second-best solution is adjusting your monitor; most monitors, you can reduce the contrast, but you can't really increase it.
- layer8 5y ago
  Black text on white background (#000 on #fff) used to be standard on computer displays, and still is for many desktop applications. The expectation is that one's display is set to a reasonable brightness & contrast settings for that, which usually means less than 50% brightness setting. In addition, as the GP notes, black usually isn't very black on LCD displays (IPS panels in particular). Web sites using noticably lower text contrast are bad in that one has to constantly adjust the display settings depending on the web site or app. Having less-than-optimal eyesight, I struggle with anything significantly less than pure black on white for running text, with regular contrast/brightness settings.
  - Dylan16807 5y ago
    There's definitely a specific reasonable brightness level for #fff, depending on room brightness, somewhere in the realm of 200 nits. But I think a reasonable setting for #000 is "as dark as it goes". It doesn't seem right to depend on screen settings to control the contrast against black.
  - lhorie 5y ago
    > Having less-than-optimal eyesight Do you use custom setups to browse the web? I'm curious what your thoughts are on color schemes such as HN's or Google's. Those aren't #000 on #fff but also aren't egregious super low contrast either, and at least to me, moderately high contrast palettes are easier on my eyes when I'm situationally reading in a dark room than pure black on white.
    - layer8 5y ago
      On Firefox I use the "Font Contrast" add-on. HN is acceptable (barely) on OLED mobile for me, but I’d prefer a white background and blacker text (like e.g. reddit). On other displays I often compensate by increasing the font size, but obviously that’s not optimal.
  - junon 5y ago
    Since you have eyesight considerations, I'm curious: what about white on black (#fff on #000)? Is there any noticeable impact, positive or negative, over black-on-white?
    - jakear 5y ago
      For my eyes black on white is far superior. White on black results in haloing around all text, whereas black on white results in generally pretty crisp text. This is why I use light themes and high-contrast mode for anything that supports it. (The glaring exception is Spotify) The basic idea is that for folks with blurred vision (not out of focus, literally blurred), bright colors will erode into dark surroundings. Dark text on light background means the text is uniformly slightly lighter than "ground truth", light text on dark background means a distracting halo forms around the text.
- wffurr 5y ago
  3:1 isn't anywhere close to enough. That's the recommendation for graphics and UI components. For body text, WCAG suggests 7:1 and even that can be too light if the font is a thin style or is small. Not to mention the various environmental factors that affect the contrast ratio in practice. Crappy LCDs in poorly lit environments rendering with buggy software. Err on the side of darker is better. Here's an eminently readable site. Now sure it doesn't use #000 but it's also way more than 3:1 contrast ratio and uses reasonably sized generously-bodied fonts: https://www.contrastrebellion.com/ https://www.contrastrebellion.com/
  - graycat 5y ago
    Your https://www.contrastrebellion.com/ https://www.contrastrebellion.com/ has my thoughts exactly (gee, I'm actually not the only one!) except usually I'm not just thinking but screaming until I have a sore throat. So, finally I agree with the Web site designer: Since clearly they don't want people to read their site, I won't read their site and, thus, just click away and intend never to return. There is a special case of this gripe -- graphs. When I do graphs, say, in Excel, I spend over half the time just fighting the defaults. I want the fonts large, just BLACK, and BOLD. For the axes and tick marks, BLACK and THICK. I want to be able clearly to SEE the data and to READ the axis annotation. E.g., I'm on a diet of about 1500 C a day. I keep careful data and occasionally graph it. Sure, I want to print the graphs on my black and white only laser printer to give, say, to a nurse at a clinic. Soooo, I want the graph to be super easy to read once printed on my black and white printer. The site https://www.contrastrebellion.com/ https://www.contrastrebellion.com/ mentions, what was it, some artistic or emotional goals? Well, it appears in most graphs that finally do make it into the content of the mainstream media (MSM), the intention is that the line for the data be an emotional expression, say, of a thrust of eureka up and to the right. So, they go for art (communication, interpretation of human experience, emotion) instead of data analysis. Graphs in papers in physics and engineering commonly are nicely done! What is in common on many Web sites and graphs in the MSM seems to be a goal of an emotional expression instead of information. I'm in favor of a lot of emotional expression for both fun and profit. And if my Web site works, e.g., helps my users have good emotional reactions, then I will want to analyze and, at times, graph the profit, and there I care only about, call it, data analysis, e.g., information presented clearly and explicitly. To "circle back", when a site has text, I want to be able to read the text! I know; I know: On a Web page with text that maybe artistically something or other but super tough to read, I can grab the HTML and use various text editor macros I have to rip out the HTML markup, leave the text, format the text, and then read it in my favorite text editor. THIS is what the Web site designer had in mind?
- simondotau 5y ago
  If too much contrast is a problem for someone, that should be solved on the client side. And arguably by the operating system not the web browser.

by wffurr 5y ago

lhorie 5y ago

> But they should be #000 or close to it You should use moderation. Guidelines for accessibility suggest a 3:1 contrast ratio as the minimum contrast level, but having too much contrast can also make reading more difficult (e.g. for people w/ dislexia)

imachine1980_ 5y ago
Not only that (dyslexic) but I see blurry faster if I Read epub whit black and white than Grey and white
- wizzwizz4 5y ago
  And some people can't really see writing at all if it's grey and white. The best solution is user agents that actually convey a modicum of agency to the user. The second-best solution is adjusting your monitor; most monitors, you can reduce the contrast, but you can't really increase it.
layer8 5y ago
Black text on white background (#000 on #fff) used to be standard on computer displays, and still is for many desktop applications. The expectation is that one's display is set to a reasonable brightness & contrast settings for that, which usually means less than 50% brightness setting. In addition, as the GP notes, black usually isn't very black on LCD displays (IPS panels in particular). Web sites using noticably lower text contrast are bad in that one has to constantly adjust the display settings depending on the web site or app. Having less-than-optimal eyesight, I struggle with anything significantly less than pure black on white for running text, with regular contrast/brightness settings.
- Dylan16807 5y ago
  There's definitely a specific reasonable brightness level for #fff, depending on room brightness, somewhere in the realm of 200 nits. But I think a reasonable setting for #000 is "as dark as it goes". It doesn't seem right to depend on screen settings to control the contrast against black.
- lhorie 5y ago
  > Having less-than-optimal eyesight Do you use custom setups to browse the web? I'm curious what your thoughts are on color schemes such as HN's or Google's. Those aren't #000 on #fff but also aren't egregious super low contrast either, and at least to me, moderately high contrast palettes are easier on my eyes when I'm situationally reading in a dark room than pure black on white.
  - layer8 5y ago
    On Firefox I use the "Font Contrast" add-on. HN is acceptable (barely) on OLED mobile for me, but I’d prefer a white background and blacker text (like e.g. reddit). On other displays I often compensate by increasing the font size, but obviously that’s not optimal.
- junon 5y ago
  Since you have eyesight considerations, I'm curious: what about white on black (#fff on #000)? Is there any noticeable impact, positive or negative, over black-on-white?
  - jakear 5y ago
    For my eyes black on white is far superior. White on black results in haloing around all text, whereas black on white results in generally pretty crisp text. This is why I use light themes and high-contrast mode for anything that supports it. (The glaring exception is Spotify) The basic idea is that for folks with blurred vision (not out of focus, literally blurred), bright colors will erode into dark surroundings. Dark text on light background means the text is uniformly slightly lighter than "ground truth", light text on dark background means a distracting halo forms around the text.
wffurr 5y ago
3:1 isn't anywhere close to enough. That's the recommendation for graphics and UI components. For body text, WCAG suggests 7:1 and even that can be too light if the font is a thin style or is small. Not to mention the various environmental factors that affect the contrast ratio in practice. Crappy LCDs in poorly lit environments rendering with buggy software. Err on the side of darker is better. Here's an eminently readable site. Now sure it doesn't use #000 but it's also way more than 3:1 contrast ratio and uses reasonably sized generously-bodied fonts: https://www.contrastrebellion.com/ https://www.contrastrebellion.com/
- graycat 5y ago
  Your https://www.contrastrebellion.com/ https://www.contrastrebellion.com/ has my thoughts exactly (gee, I'm actually not the only one!) except usually I'm not just thinking but screaming until I have a sore throat. So, finally I agree with the Web site designer: Since clearly they don't want people to read their site, I won't read their site and, thus, just click away and intend never to return. There is a special case of this gripe -- graphs. When I do graphs, say, in Excel, I spend over half the time just fighting the defaults. I want the fonts large, just BLACK, and BOLD. For the axes and tick marks, BLACK and THICK. I want to be able clearly to SEE the data and to READ the axis annotation. E.g., I'm on a diet of about 1500 C a day. I keep careful data and occasionally graph it. Sure, I want to print the graphs on my black and white only laser printer to give, say, to a nurse at a clinic. Soooo, I want the graph to be super easy to read once printed on my black and white printer. The site https://www.contrastrebellion.com/ https://www.contrastrebellion.com/ mentions, what was it, some artistic or emotional goals? Well, it appears in most graphs that finally do make it into the content of the mainstream media (MSM), the intention is that the line for the data be an emotional expression, say, of a thrust of eureka up and to the right. So, they go for art (communication, interpretation of human experience, emotion) instead of data analysis. Graphs in papers in physics and engineering commonly are nicely done! What is in common on many Web sites and graphs in the MSM seems to be a goal of an emotional expression instead of information. I'm in favor of a lot of emotional expression for both fun and profit. And if my Web site works, e.g., helps my users have good emotional reactions, then I will want to analyze and, at times, graph the profit, and there I care only about, call it, data analysis, e.g., information presented clearly and explicitly. To "circle back", when a site has text, I want to be able to read the text! I know; I know: On a Web page with text that maybe artistically something or other but super tough to read, I can grab the HTML and use various text editor macros I have to rip out the HTML markup, leave the text, format the text, and then read it in my favorite text editor. THIS is what the Web site designer had in mind?
simondotau 5y ago
If too much contrast is a problem for someone, that should be solved on the client side. And arguably by the operating system not the web browser.