Grey text in editor should be black


#1

The default white editor themes (One Light, Atom Light, Base16 Tomorrow Light, Solarized Light) have grey text, but research papers on typography stress the importance of high contrast for readability. That is, if the text is intended to be black on white, then it should be pure black and pure white. This is a good survey: Hall Hanna 04, Section 1.1. It states, “There is a large body of research… that indicates that high levels of contrast lead to better readability.” And it gives a lot of citations.

I have been able to fix the colors by adding this to styles.less, but it seems odd that this choice is hard to enact when the research consensus agrees that it is positive. At least, shouldn’t it be a simple switch, instead of requiring css knowledge and digging around?

atom-text-editor {
color: black;
}


#2

Even when I’m using a light background, I prefer it to be slightly tinted instead of pure white.

I have been able to fix the colors by adding this to styles.less, but it seems odd that this choice is hard to enact when the research consensus agrees that it is positive. At least, shouldn’t it be a simple switch, instead of requiring css knowledge and digging around?

A styles.less change is not what I would call hard to enact. A completely nontechnical person might not be expected to know about it, but Atom is designed by and for people who are comfortable making tweaks. For people who don’t want to mess with CSS, there is a wide variety of themes available and I’m sure you can find something that fits your preferences. You can make an even more targeted rule with a selector like .one-light-syntax atom-text-editor.

If you believe that the usability aspect is pressing enough that one or more of the base light themes should have as much contrast as possible, you should open up an issue on the GitHub repo for the theme in question and make your case to the maintainers. Or you can start the discussion on the Atom repo if you feel like it has a much broader scope than simply making a theme or two be more high-contrast.


#3

Do they have a definition for what “high levels of contrast” really are? The text color in the atom-light-syntax theme is (in decimal) RGB(56, 58, 66) and the background color is RGB(250, 250, 250). The background color is very, very near pure white and the text color (for plain text) isn’t black but it is hard to distinguish from it without taking a really close look. Personally, without a definition of “high levels of contrast”, I would say that this fits the bill.

Additionally, I’m going to close the issue that was opened because this is still in the discussion phase … there isn’t a concrete task to be performed. (See my blog post for details on why this system is in place.)


Edit: It turns out that the W3C has a definition for “high contrast” for web content that they define as a luminosity contrast ratio of 4.5:1 as a minimum “so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology).” Our designers use this guideline to help keep accessibility in mind.

Using this tool the plain text color and the background color of the one-light-syntax theme have a luminosity contrast ratio of 10.86:1.

Designers also feel for many reasons that one shouldn’t use pure black.


#4

“High levels of contrast” in the research literature always means as high as possible, but depends on the study’s capabilities. Old studies found that the highest level of contrast is best, but they were unable to achieve levels of contrast that modern monitors can. Modern studies that are able to reach these high contrast levels still show that readability is best at the highest possible contrast. So, in the context of current monitors, there is no benefit to withholding available contrast.

One thing to consider is that different monitors show colors differently. I checked three monitors; the grey text varies in how black it is, ranging from a mild nuisance to requiring 50% higher font size. The off-white background ranges from unnoticeable to a very minor annoyance, but does not seem to impact readability significantly. I don’t think an off-white background is a good thing, but the penalties are kept small by how close to white it is.

I guess if this will be a typography post, I’ll summarize what I know of the research on colors:

Dyslexia: I’ve seen claims that pure white text on pure black font causes problems. There is at least one paper on this subject, but I don’t think I necessarily believe this guideline without further studies, or at least without some testimony from an unbiased sample of dyslexic users.

Astigmatism: Pure white text on pure black background is very bad; lower the contrast ratio. Other color schemes are ok.

Poor vision: Make the contrast ratio as high as possible. W3C sets 4.5:1 as a minimum, but that’s not something to aspire to.

Black text on white (standard): Almost every paper claims this to be the best. Within this mode, they have found that contrast should be as high as possible.

White text on black (inverted): Increase line spacing compared to standard colors. Some users are more familiar with inverted colors. For normal users, contrast should be as high as possible, but this can cause problems in specific circumstances. Note that contrast is higher with inverted colors than with standard colors; I’ve seen claims that inverted colors can be better for people with poor vision.

Strange colors on strange colors: Raise the contrast as high as possible, or use hues that contrast with each other as a secondary tool. Some colors have poor performance (red), not just for colorblind users.

User preference: Familiarity with a color scheme does not just impact user preference, but also helps readability. Subjective preference is strongly correlated with objective readability on a population level. EDIT: This is a population-level correlation, so it’s not clear if individual expressions of subjective readability override population-level objective measures. That is, your evaluation of a color scheme will probably match the research. But if your evaluation differs from the research, it is not yet established whether your individual performance under that scheme will mirror the research or your expressed preferences.

One thing I’ll emphasize is that on recent Windows systems, outside of specific disabilities, changing text to gray has inferior outcomes because ClearType has the ability to adjust stroke width. It’s basically a blurrier font.

Edit: The link you’ve cited (ianstormtaylor) only mentions avoiding pure black as a background. That’s true, because white on pure black causes severe issues for some users, as well as creating transition problems when users switch between white and black screens. But it has no relevance to pure black text on white backgrounds. ianstormtaylor finds that some major applications prefer grey-black over pure black, and such applications are likely to have design powerhouses behind them. Continuing this trend of reasoning, I’ll note that grey-black backgrounds are semi-popular, pure black backgrounds are semi-unpopular, black-text-on-white is universal, and grey-text-on-white is extremely rare (except in Atom).


#5

That’s not very scientific. “High” in no way implies “as high as possible”. The latter is a subset of the former, and the former probably refers to something at least halfway between “no contrast” and “maximum contrast”.

Also, if you’re going to mention research literature, you really need to throw in some citations so we know what article or meta-analysis is weighing in on whether a vague word for half of a range refers specifically to the extreme end of the range.


#6

I’m just defining it in the context of the quotation; the phrase as used here is from Hall Hanna. Individual studies use different terms and specify contrast concretely, but the best results are always at the maximum tested contrast. Hall Hanna is the survey I’m using. Its introduction section contains a large number of sources.

The summary of color schemes in the fourth post is just informational, and it comes from a wide variety of individual sources. I don’t know of any survey for all those things, but I’m not pushing for any change except grey text to black on the light themes.


#7

I do not believe that standards for online forum argumentation should be different from papers in class. I have to be able to find and look at the thing you’re referencing in order for me to consider it a valid source. If you open an issue about this, I would hope for the dev team to have similar standards.

Individual studies use different terms and specify contrast concretely, but the best results are always at the maximum tested contrast.

There’s a difference between “maximum tested contrast” and “maximum possible contrast”.

Hall Hanna is the survey I’m using. Its introduction section contains a large number of sources.

Most articles have literature reviews, yes, but a lit review is not very useful to the audience of a persuasive argument in judging the argument’s validity. If there are articles in the lit review that further support your claim, you should pull those up individually and add them to your own bibliography.


#8

The link and quote are in the first post. Here it is again: Hall Hanna '04

Maximum possible contrast is not a valid concept without a context. I’ve been careful to maintain the context of computer monitors and black-on-white text, which is the context in which the research is conducted. In this context, maximum contrast is found to be best.

The literature review in Hall Hanna Section 1.1 is almost entirely about this subject of color and contrast. I won’t isolate individual citations, because seeing a complete survey is the best way to know that I’m not cherry-picking papers, and that the literature as a whole supports what I’m saying. I don’t know of any better type of resource than a survey for a layman, especially as training is required to read individual papers.


#9

So, have you opened issues in any of the GitHub repos for the themes in question? You can find the core theme repos by searching under the Atom group for “syntax”.


#10

I opened https://github.com/atom/atom/issues/13913 to let maintainers choose specific themes out of the four, and also because I felt that all four themes should have their plaintext font colors changed to black. leedohm closed it to move it to this discussion, and I have no problems with that. I didn’t intend it as a discussion, but since the maintainers think there is something to be discussed, they are correct by self-reference.

From here, there are ways to solve the issue:

  1. convert one or more of the default light themes to a black font. Preferably, one of the themes with a pure-white background, so that a “standard” environment is available.
  2. add a new light theme with a black font to avoid causing changes for existing users.

#11

I just read the Hall Hannah study you linked to and I wouldn’t characterize it as saying #000000 on #FFFFFF is always better than dark gray on white. In fact, the introduction of the paper specifically questions Neilsen’s statement to that effect, and goes on to find good or comparable performance of other combinations, even suggesting that there may be a minimum threshold above which contrast doesn’t have an impact and that it may be a matter of convention. As far as convention, not that printed text can have less contrast than a monitor and graphic design software will often preview print black as dark gray. Finally as the results of Hall Hannah were slightly different for readability vs. retention, with aesthetic playing a role; Maybe coding will be still different (why do so many developers prefer light text on dark)? It might be worth testing or changing, but doesn’t seem like the current state obviously wrong.


#12

I am in favor of non-pure-black-and-white font and background colors.

As a graphic designer, I can confidently say that you can have sufficient contrast for high readability without resorting to pure black and white. Additionally, colors that are closer (like dark grey on white) require less stepping when anti-aliasing them, meaning they appear smoother and easier to read on-screen. This is especially important when dealing with Windows applications that don’t use DirectWrite.

Compare these letters “R”, in 2 sizes (36pt and 9pt) and 4 colors (#000000, #222222, #444444, and #263238), and zoomed to 400%:

Note that the larger letters’ edges become smoother and more natural toward the right, and how the smaller letters become more readable and start to hide the subpixel antialiasing towards the right, appearing in a more proper color on the screen.


#13

In response to Ben, you’re kidding, right? The letters on the left are unquestionably clearer and easier to read. And the magnification makes it clear - the edges of the letters on the right are more blurred by other colors (look especially at the fat blue and brown stripes on the large R on the right - the one on the left has much narrower strips, and consequently, more substantial area of the main color. I have constantly felt like gray text looks like it blurs into the background, and this example makes it clear why that is. I honestly can’t believe you used this as an example of why gray was better. That said, I like a non-pure-white (but not gray) background, and maybe it’s because it helps with those rough edges of “other” colors.