Visual Perception Experiments

CE16 SAPC-6 — Algorithm Evaluation

Notice: The test panels on this page are not responsive
and are intended for desktop viewing on a standard sRGB monitor.

WAI Contrast Research

"Constant Background" Series, October 2019

These are tests of the contrast measurements by the SAPC6 algorithm, luminance module, as compared to other methods. These test plots are for normal polarity (dark text on a light background, aka BoW). The series on this page is a small sampling of the test plots for discussion. Here, contrasts are all shown against the same background of #D8D8D8. The contrasts shown are SAPC levels 5%, 10%, 25%, and 40% thru 110% in 10% increments.

On Contrast Levels

The SAPC 60% level is essentially equivalent to the common 3:1 ratio that is mentioned as a minimum in many standards. Astute observers may notice that contrast levels higher than 70% may not seem "that much higher", dependent on a number of factors, including the ambient light, quality of the monitor, monitor calibration and gamma, and of course the observer's personal visual function. That these higher levels seem similar for a normal weight font is generally referred to as the contrast constancy effect. But notice (depending on monitor settings) how very thin fonts are still affected by changes in luminance contrast above 70%.

Jump To Test Patch:

These link to the brief discussion before each patch.

  1. Test Panel #1 at 5% Contrast
  2. Test Panel #2 at 10% Contrast
  3. Test Panel #3 at 25% Contrast
  4. Test Panel #4 at 40% Contrast
  5. Test Panel #5 at 50% Contrast
  6. Test Panel #6 at 60% Contrast (WCAG 3:1)
  7. Test Panel #7 at 70% Contrast
  8. Test Panel #8 at 80% Contrast (WCAG 4.5:1)
  9. Test Panel #10 at 100% Contrast (WCAG 7:1)
  10. Test Panel #11 at 110% Contrast

You can also jump to or link to any particular patch by the serial number, i.e. add a hash (#) and the serial to the URL to jump directly to a particular test patch (this is more useful in the full series of tests which don't have the clickable TOC as above). For instance, to go to test patch number CE16_D8_CBNP_7, then in the location bar add #CE16_D8_CBNP_7 to the end of the URL (click to see).

More Complete Listings

There are substantially larger test plot collections available. These other files are very large - as much as 2MB just in HTML!! For more constant background generated plots, see this page (Constant Background Ramps), where the background remains constant and only the text colors change to test perceptually uniform contrast increase increments.

For plots of constant contrast, see this page (Constant Contrast), where both the background and text change to test uniform tracking of perceptual contrast.

Glossary

CONTRAST: As used on this page, mainly it means the perceived difference between two colors displayed on a computer monitor. However, it's useful to point out that “Contrast” can be used to describe the differences of other perceptions: Contrast of size, contrast of position, contrast of speed, etc.

PERCEPTION: As it happens, perception is very much a neurological activity. That is, it happens in our brain. We perceive things a certain way, but what we perceive is essentially representational and not an absolute quantity of what we're seeing, feeling, or hearing. The important understanding here, is that what we perceive is subject to our neurological system's interpretation of the physical stimuli. This is where the term “psychophysics” comes from. Partly to do with stimulus in the physical world, and partly to do with how our brain interprets it.

For example, the color "purple" is not real (purple is the perception we have when the red and blue cones in our eye are stimulated without stimulating green, but there is no spectral purple). Can you see the orange background on this screen being displayed on your computer monitor? Well it's not orange at all. It's separate red and green, stimulating the red and green receptors in your eye, in such a way that your eye/brain visual system interprets it—perceives it—as orange.

So this study of contrast, as it applies to colors that you might want to use a web design, is not just about the difference between two colors as some might think. It's about all the factors that we need to take into account for how we perceive the difference between two colors. And that includes things like spatial frequency, a practical application of which relates directly to the stroke width of a font.

POLARITY: In this context Polarity applies to the values of a background and the stimuli. In other words, is it dark text on a light background, or light text on a dark background.

BoW and/or NORMAL mode: means dark text on a light background (normal mode). Confusingly some researchers call this negative contrast, others call it positive display. I'm pushing to move toward “NORMAL” to describe black print on white (or maybe "paper mode") and then “REVERSE” to describe light text on a dark BG, which is how people often describe that.

WoB and/or REVERSE mode: means light text on a dark background (reverse mode).

WCAG: Web Content Accessibility Guidelines. In the context used here, I refer to the math used for the 1.4.3/1.4.6 contrast assessments, which is essentially just a simple ratio of luminance between two sRGB colors with a small offset.

SAPC: The “APC” stands for “Advanced Perceptual Contrast”, the “S” is either for “sRGB” or “Somers” the inventor (eh, that would be me) ... it’s SAPC either way :) ... This is Major Iteration 6. The companion project is S-LAB, an L*a*b* type colorspace designed specifically for accessibility with computer display uses.

Evaluations/discussions based on observations made by trained observer(s) using a common, calibrated sRGB display. More elaborate evaluations using a larger sample size of subjects and display types is forthcoming.

Test Panel: # D8

Constant Background and NORMAL Polarity

Contrast Patches:

5% 10% 25% 40% 50% 60& 70% 80% 90% 100% 110%

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: D8 ⊙ CodeInc: 0.841251095685701 ⊙ Target Contrast: 10% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 2.654321 ⊙ SftClp: 0.321 ⊙ FG clmp: 0.08 ⊙ BG clmp: 0.06 ⊙ MnAdj: 0.0121 ⊙ FGoi: 0 ⊙ 0.005 ⊙ BGoi: -0.025 ⊙ 0
SAPC 6 Settings: Pol: NORMAL POLARITY ⊙ Mode: ⊙ Target Contrast: 0% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ FG clmp: 0.08 ⊙ BG clmp: 0.06 ⊙ FGoi: 0.009 ⊙ 0.005 ⊙ BGoi: -0.025 ⊙ 0

5% Near Threshold

This is just a few percent above visibility threshold for normally sighted, and even then only for the very big headlines at the top such as "SAPC-6". This patch demonstrates the threshold level of contrast sensitivity function (CSF). Notice that the body text on the page is essentially invisible, but the very large bold headlines are just barely readable. This is due in part to the spatial frequency aspect of CSF.

To anyone with poor contrast sensitivity, this page may simply appear to be blank (except for the few color items each patch has for reference).

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_1
TEXT: CC   BKGND: D8
TARGET
CONTRAST:
  5%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.13:1 11.9% 10.53% 6.3% 0.0% 4.69% All Example Text: # CC (204) 80.00% 60.96%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 0% 0% 0% 0% 0% 0%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.

10% Slightly Above Threshold

The next patch demonstrates how someone with a severe contrast sensitivity deficit may perceive web pages with insufficient contrast. To anyone with poor contrast sensitivity, this page may simply appear to be blank (except for the few color items each patch has for reference).

This is about the threshold level of a severe CSF impairment, approximately a Pelli-Robson score of log 1 (being 10 times worse that a perfect PR score of 2). There are several large headlines using very thin fonts on this test patch - can you see them at all here? They will be more visible later.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_2
TEXT: C3   BKGND: D8
TARGET
CONTRAST:
  10%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.24:1 20.2% 17.92% 11.3% 11.6% 10.36% All Example Text: # C3 (195) 76.47% 55.16%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 10.99% 8.34% 7.39% 4.9% 11.576% 5.68%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.

25% Recommended “Essential Minimum”

It is useful for designers to consider anything below this level to be essentially invisible.

This patch is two and a half times higher contrast that the previous slide, yet it is still hard to read. Such a low contrast should not be used for text or other items that need to be readable. Nevertheless, this does show a reasonable minimum level for non-textural elements, such as a DIV or a page separator element.

A key here again is the spatial frequency: a contrast this low needs to be paired with large bold elements, ideally where the stroke is at least 8px wide. 8px to 19px stroke width (i.e. border width) is the ideal range for maximum detectability of an element.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_3
TEXT: AB   BKGND: D8
TARGET
CONTRAST:
  25%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.61:1 40.1% 35.52% 25.1% 25.0% 25.48% All Example Text: # AB (171) 67.06% 41.22%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 37.45% 19.88% 17.60% 13.8% 13.426% 15.12%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.

40% Minimum “Big Bold Headline”

This patch demonstrates a level that some standards documents refer to as an "absolute minimum" contrast level for detection and legibility.

The only text that can reasonably go this low would be a large and very bold headline such as the “SAPC-6” at the top of the patch. Again, minimum stoke width would be 8px.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_4
TEXT: 94   BKGND: D8
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.13:1 56.1% 49.64% 38.9% 38.0% 39.95% All Example Text: # 94 (148) 58.04% 29.92%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 51.71% 15.95% 14.12% 13.9% 13.013% 14.47%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.

50% Large Text Minimum

It is conceivable that large (48px) normal weight (400 or 500) text could work here, and potentially bold (700+) at no less than 32px.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_5
TEXT: 84   BKGND: D8
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.62:1 65.4% 57.96% 48.6% 47.1% 49.99% All Example Text: # 84 (132) 51.76% 23.21%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 49.58% 9.39% 8.31% 9.7% 9.088% 10.04%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.

60% Similar to Classic or WCAG 3:1

Preliminary studies indicate this level may be suitable for thin 200 weight fonts at 72px and larger, normal weight at 36px and larger and bold at 24px and larger. Unfortunately these recommendations are hard to define due to the vast variation of font glyph design and that terms like "bold" relation to stroke width is not standardized.

Put another way, this contrast level supports a minimum stroke width of 3px.

This SAPC level is essentially equivalent to the “classic” 3:1 contrast ratio, and the similar WCAG 3:1, generally considered a minimum for text on displays.

Contrasts greater than this may appear to be perceptually the same due to contrast constancy, but notice that the very thin fonts (the 100 weight font at the bottom of the text panel) still derives benefit from

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_6
TEXT: 74   BKGND: D8
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.28:1 73.5% 65.09% 58.1% 56.2% 60.00% All Example Text: # 74 (116) 45.49% 17.43%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 65.52% 8.05% 7.13% 9.5% 9.057% 10.01%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.

70% Small Headlines—Stroke Width 2.5px

This is a good contrast for small headlines, and incidental text. Preliminary: Minimum stroke width of 2.5px as a guiding factor, which is approximately 200 wgt @ 64px+, Normal Weight non-body Text 32px+, bold text 18px+

As mentioned in the introduction, this level contrast and higher may be perceptually the same or very similar due to contrast constancy effect. But higher spatial frequencies, i.e. very thin fonts, will still clearly benefit from higher contrasts on most displays. Also, the use of certain types of antialiasing will affect the rendered colors and require higher contrasts in terms of CSS values to compensate.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_7
TEXT: 64   BKGND: D8
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.15:1 80.3% 71.09% 67.0% 65.1% 69.97% All Example Text: # 64 (100) 39.22% 12.54%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 87.25% 6.78% 6.00% 8.9% 8.940% 9.97%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.

80% Similar to WCAG 4.5:1 with BG #FFF

Preliminary: Minimum stroke width of 2px as a guiding factor, which is approximately 200 weight at 36px, Normal Weight body text at 20px, bold at 12px (non-content)

Side note: 12px, even if bold, is too small for any "important content" that you actually want users to read, though non-content uses (i.e. copyright notices) are likely acceptable. 16px or larger is the recommended minimum for body text with the x-height of a 0.5 ratio (x-height of 8px).

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_8
TEXT: 54   BKGND: D8
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.31:1 85.8% 76.02% 75.2% 73.8% 79.86% All Example Text: # 54 (84) 32.94% 8.52%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 116.13% 5.57% 4.93% 8.1% 8.690% 9.89%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.
-->

100% Basic Body Text Contrast

(Roughly Equivalent to classic 10:1 or WCAG 7:1)

SAPC Levels: These contrast levels are scaled to help make them easy to remember: 100% for body text, or 70% for small headlines, 40% for large non-text items, etc. These three "key" levels are 30 apart.

When the WCAG standards were first devised font usage was limited and most web content used "WebSafe" fonts. But in recent years, the proliferation of free and easy to embed fonts such as GoogleFonts has made it easy for sites to use fonts that require additional considerations for luminance/color contrast. Small thin fonts get "eaten up" due to subpixel blending and anti-aliasing, and so the color chosen is not what is actually displayed - in some cases the rendered contrast is less than a fifth of what the CSS "color values" would indicate. Body text has suffered the most in this regard.

This level is essentially the same as the classical "10:1" contrast ratio or WCAG 7:1, historically used for body text as is well known in design schools as an ideal target for columns of text (though apparently forgotten by many sites on the internet.)

Minimum average stroke width here is ~1.5px. Preliminarily, this contrast level supports 200 wgt @ 24px, Normal Weight Body Text down to 14px-16px (if it has a minimum x-height of 8px), or incidental normal weight text down to 12px (non-content). On x-height: this is really the determining factor for font size. Future standards should address this. For the purposes of the discussion on this page, assume the x-height is a 0.5 ratio to font size.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_10
TEXT: 2B   BKGND: D8
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 9.93:1 95.1% 84.22% 90.7% 93.2% 100.34% All Example Text: # 2B (43) 16.86% 1.93%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 277.21% 4.12% 3.65% 7.2% 9.721% 10.33%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.

110% (Extra Contrast for Small Type)

Minimum average stroke width here is ~1px, a stroke so thin that it becomes blended into the background losing much of the contrast assigned to it.

Levels: So if 100% for body text, then 110% is the added contrast for small thin fonts that need extra contrast for subpixel rendering. (Think of it like Nigel's Amp, with a knob that goes to 11...)

Nevertheless, this is still not enough for small thin fonts if webkit-smoothing is set to "antialias". But then, our opinion is that people should stop doing that. Please. Let the user agent use the default rasterizing method for the device for best perceptual results. Subpixel rendering is usually better than "smoothing AA" and should not be overridden by webkit or moz AA, especially not for body text.
</end soapbox>.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_D8_CBNP_11
TEXT: 08   BKGND: D8
TARGET
CONTRAST:
  110%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 14.05:1 98.2% 86.98% 96.5% 102.6% 109.92% All Example Text: # 08 (8) 3.14% 0.05%
Background: # D8 (216) 84.71% 69.20%
Δ Delta: 411.73% 3.12% 2.76% 5.8% 9.415% 9.58%

48px Headline, 100 Weight Font





Even at 48px and antialiasing turned off, the font in
that headline is still getting blended to the BG, stroke
barely a pixel wide. This block text is 1.5rem, 300
weight & displays at 24px in most browsers. This
is usually considered a good minimum size for menu
items, small headers, etc. Try to keep line length to
under 60 characters, with 45-55 being ideal.
      Spatial: 1px, 2px, 3px, 4px, 6px, 8px
1

2

3

4

A 26px Headline in a Normal 400 Font

Notice as the font size decreases, weight (stroke
width) must be increased to keep the stroke width
wide enough. This line is 1.25rem, normal weight
of 400 rendering at 20px in most browsers. This is
a frequently recommended size for most text, including
body text that you want users to be able to read easily.

A 20px Font at Weight 500 vs Weight 100 ?!?

There may be occasions to use a 100 weight font, but in
web graphics that's pretty rare — avoid such thin fonts.
This line is 1.0rem which results in 16px in most browsers.
This is usually the default size, though that should not imply
that it is the ideal size for any given application or use
context. This became the default for various legacy reasons.

A 100 Weight 18px Font is Better at 300 or Best at 500+

Δγ
This line is at 0.75rem which results in 12px in most browsers.
The apparent contrast decrease is due to a combination of spatial
frequency and antialiasing effects. For most fonts with a 0.5 x-height
ratio, a 12px font actually means that most letters are only 6px high,
and that's barely enough even for someone with perfect vision.
While it's okay for things like copyright notices, it is really
too small to be used for body text, at least if you want it to be read.

Summary

This work is part of an ongoing research project into human visual perception of web content. The work shown here is preliminary, and is not yet a functional part of any standard. It is presented for discussion purposes.

These are sRGB gamma targets. Adjust the monitor so that the squares appear uniform (i.e. not pyramids). Note also it is important that the image be at 100% and not scaled - make sure your browser says "actual size".