Back

@KevinMarks @james I've heard less issues of people not be able to read black on pure white that the opposite. But I think it depends a lot.
I usually compensate by activating firefox reading mode and then it removes dark theme. But for some reasons this doesn't work on all sites.
It's very hard to make sure it works for everyone, this is why I'm more in favor of choice.
I'm not saying do not do dark mode to be clear. I'm saying be careful with pure white on pure black if you do.

@KevinMarks @stephaniewalter @james

Regarding white text on black:

For the APC Readability Criterion, we are evaluating a max contrast for dark mode,
Lc -90 for small text, and Lc -85 for 24px and larger/bolder text.

For light mode, text is ideally black #000. The issue is more often excess screen luminance.

We're working on "The Paper Reading Experience", a set of simple guidelines for light mode that allows for a body text background that emulates the lightness of diffuse white paper.

@readtech @stephaniewalter @james@strangeobject.space does that white boundary idea still apply on small screens, or is that more for lage screens that fill the field of view? If you do have bias lighting already, is it redundant?

@KevinMarks @stephaniewalter @james

Hi Kevin,
It depends, the bias lighting has to be in the peripheral vision for best results. And yes, any size screen.

Where it doesn't really matter is when the ambient illumination driving adaptation is greater than the peak white of the display.

The idea is to have a BG luminance that is ~ 85% of a peak-white adapted state.

That's the simple explaination, there is obviously more nuance. Working on the explainer for this now.

@PeterMotte @readtech @james@strangeobject.space I covered some of the history of that. It dates back to the early IE days, when Microsoft's ClearType font rendering and low res screens would effectively bolden some fonts, so designers greyed them a bit to counteract this visually. Some screenshots that show this are at https://www.ampsoft.net/webdesign-l/WindowsMacFonts.html (linked from my essay)

@KevinMarks @readtech @james Unfortunately, it still seems to work like that in W10, and I see it in lots of application what, I think, cannot be explained by the early IE days. It's also in Word, eg.

@PeterMotte @readtech @james@strangeobject.space that's fair, both the Windows font smoothing techniques were less true to the glyphs than Apple's, though arguably clearer on low res screens. To really compare you should look at photographs of screens rather than screenshots, as CRT blur and LCD subpixels were key to the effect.
I was at Apple when MS launched ClearType (the first LCD subsampling) at CES and I flew up to look at it closely to help Apple understand it.

@KevinMarks @PeterMotte @james

For "Better reading on the web" I conducted a survey of CSS and HTML styles pre-2007 and then later through 2012 on Internet Archive.

Pre-2007, text was usualy black in the CSS. After 2012, it was usually gray.

Timeline:
2008: WCAG 4.5:1 contrast
(insufficient for body text)

Also, 2008 launched HTML5, which moved all presentation to CSS.

2010: Google Fonts

2012: Retina displays and -webkit-font-smoothing.

Ultra thin fonts & font smoothing became the thing.

@readtech @PeterMotte @james@strangeobject.space have a look at the default styles in Moveable Type and Blogger. I think they flipped to greyer type earlier, and WordPress followed. They were quite a big proportion of web reading, and news sites followed later IIRC.

@KevinMarks @PeterMotte @james

I'm 95% sure Movable Type did use grey — I was working for About•com when we switched from the roll-your-own CMS (if you can call it that) to integrating Movable Type. The editor interface had a lot of grey, though the production text still had the close-to-black text, matching the existing.... And no font smoothing.

Though About•com is the only major site I have records of that used a non-black, slightly lifted text color prior to 2010. It was somewhere in the #222 area IIR.

And keeping in mind the early 2000s, everything was a mishmash of HTML4 and early CSS, with some presentation done in both places. We would write our articles in hand written HTML4 before Movable Type (and similar) led the way to doin' it all in CSS.