W3C Contrast Research

Font Weight Experiments, Sept. 2019

Webkit Anti-Aliasing/Smoothing OFF (subpixel ON)

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 are still 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.

Here is an infographic that should help explain the relationship between font weight and contrast. Here, the font is at very low contrast to help illustrate CSF.

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.