W3C Contrast Research

Font Weight Experiments, Oct. 2019

Webkit/Moz Anti-Aliasing/Smoothing ** ON **

This is a copy of Experiment CE14weight except in this iteration, anti-aliasing is turned ON, with the following CSS:

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;	
		font-smooth: always;	
		} 

You'll see that for the smaller font-sizes, the contrast has to be cranked up much farther than shown in the weight experiment for similar perceptual contrast for the same font-size. In particular, look at Test Panel Four, and see how the two smallest rows practically disappear in the threshold series.

These evaluations where made using MacOS, examining both Chrome and Safari browsers on a traditional LCD monitor (not a Retina display). A retina display and/or some other browsers or OSs will render these differently. Depending on the specifics, contrast may not be adversely affected as much as we found on our test systems.

Experiment Description from "WCAG_CE14weight":

These are tests of different stimulus weights and sizes and relative contrast for them. The contrast was aimed low deliberately, as it is easier to tell contrast differences between low contrast items rather than high contrast items.

As contrast increases, the CSF flattens out some, due to "contrast constancy" but higher frequency stimuli still are affected, most research suggesting this is due to processing by different neural pathways in the visual cortex.

But perhaps more important from the accessibility standpoint, certain impairments substantially raise the CSF threshold, reducing contrast constancy and increasing the importance of adjusting for the CSF/Spatial Frequency response curve.

Three Series at different luminances per panel.

On the first four panels, the font (Helvetica Neue) has been grouped and adjusted such that each font weight from 200 to 900 is adjusted relative to size so that each line in a group has the same stroke width.

The purpose of this experiment is to show that it is stroke width that follows the CSF (Contrast Sensitivity Function) more closely than font size, though it is clear that size is a contributing factor for legibility.

Nevertheless, notice that in each group of a particular stroke width, the glyphs are relatively the same contrast — but each group must have the contrast increased as the stroke width becomes narrower.

While the first three test panels have each set of stroke-width grouped fonts adjusted in color for uniform perceptual contrast, the fourth panel has fonts with no such adjustment of color per size.

Test Panel Four

On this panel the smaller text is set to the same color as the larger text for each of the three series, to show how smaller text "fades away".

On thing to notice is how the text that is closer to threshold (invisibility) has a more pronounced effect of contrast decrease than the text with higher contrast. And text with higher contrasts is less affected as the stroke width decreases.

And finally, on this panel and the first (highest contrast) blocks on panels one and two above, when the contrast is higher than WCAG 3:1, the overall font size has an inverse effect relative to the stroke width. That is, with the stroke width being equal, the smaller (and as a result bolder) fonts appear to have higher contrast than the larger "thinner" appearing fonts, despite both have the same measurable stroke width.

The current theory is that the larger fonts have more white space in each glyph, and that affects the contrast constancy effect, surround, local adaptation, and simultaneous contrast.