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 SAPC algorithm(s). These test plots are for normal polarity (dark text on a light background, aka BoW).

The series on this page is "Constant Background" with the background constant for each panel, and the contrast changing in increments of 4% for each test patch.

See this page for Constant Contrast, where both the background and text change to test uniform tracking of perceptual contrast.

Jump To Test Panel:

  1. Test Panel FF
  2. Test Panel CC
  3. Test Panel A0
  4. Test Panel 77

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 to a particular test patch. For instance, to go to test patch number CE16_CC_CBNP_18, then in the location bar add #CE16_CC_CBNP_18 to the end of the URL (click to see).

NOTES, TERMS, and “What’s an SAPC Anyway?”

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.

As it happens, perception is very much a mental attribute. 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). 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.

BoW and/or NORMAL mode: means dark text on a light background (normal mode). Confusingly some researches call this negative contrast, other 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 me 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 and emissive display uses.

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

Test Panel: # FF

Constant Background and NORMAL Polarity,
Starting Contrast 4% increasing in 4% increments per patch.

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: FF ⊙ CodeInc: 0.975 ⊙ Target Contrast: 4% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.574321 ⊙ 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
SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_1
TEXT: EF   BKGND: FF
TARGET
CONTRAST:
  4%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.15:1 13.5% 12.44% 7.3% 0.0% 4.24% All Example Text: # EF (239) 93.73% 86.61%
Background: # FF (255) 100.00% 100.00%
Δ 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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_2
TEXT: E9   BKGND: FF
TARGET
CONTRAST:
  8%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.21:1 18.3% 16.83% 10.1% 11.8% 8.03% All Example Text: # E9 (233) 91.37% 81.86%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 6.42% 4.78% 4.39% 2.8% 11.777% 3.79%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_3
TEXT: E3   BKGND: FF
TARGET
CONTRAST:
  12%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.28:1 23.0% 21.08% 13.0% 15.0% 11.81% All Example Text: # E3 (227) 89.02% 77.26%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 6.93% 4.62% 4.25% 2.9% 3.247% 3.79%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_4
TEXT: DC   BKGND: FF
TARGET
CONTRAST:
  16%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.37:1 28.1% 25.85% 16.4% 18.8% 16.23% All Example Text: # DC (220) 86.27% 72.08%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 8.79% 5.19% 4.77% 3.4% 3.808% 4.42%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_5
TEXT: D6   BKGND: FF
TARGET
CONTRAST:
  20%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.45:1 32.4% 29.78% 19.4% 22.1% 20.02% All Example Text: # D6 (214) 83.92% 67.79%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 8.21% 4.28% 3.93% 3.0% 3.280% 3.79%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_6
TEXT: D0   BKGND: FF
TARGET
CONTRAST:
  24%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.54:1 36.6% 33.57% 22.4% 25.4% 23.80% All Example Text: # D0 (208) 81.57% 63.64%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 8.90% 4.13% 3.79% 3.0% 3.294% 3.79%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_7
TEXT: C9   BKGND: FF
TARGET
CONTRAST:
  28%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.66:1 41.2% 37.81% 25.9% 29.3% 28.22% All Example Text: # C9 (201) 78.82% 58.99%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 11.35% 4.62% 4.24% 3.6% 3.862% 4.42%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_8
TEXT: C3   BKGND: FF
TARGET
CONTRAST:
  32%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.76:1 45.0% 41.30% 29.0% 32.6% 32.00% All Example Text: # C3 (195) 76.47% 55.16%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 10.66% 3.80% 3.49% 3.1% 3.325% 3.78%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_9
TEXT: BD   BKGND: FF
TARGET
CONTRAST:
  36%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.88:1 48.6% 44.65% 32.1% 35.9% 35.78% All Example Text: # BD (189) 74.12% 51.46%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 11.62% 3.65% 3.35% 3.1% 3.338% 3.78%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_10
TEXT: B6   BKGND: FF
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.03:1 52.7% 48.38% 35.8% 39.8% 40.20% All Example Text: # B6 (182) 71.37% 47.33%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 14.91% 4.07% 3.74% 3.6% 3.911% 4.41%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_11
TEXT: B0   BKGND: FF
TARGET
CONTRAST:
  44%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.17:1 56.0% 51.44% 38.9% 43.2% 43.98% All Example Text: # B0 (176) 69.02% 43.94%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 14.09% 3.33% 3.06% 3.1% 3.365% 3.78%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_12
TEXT: AA   BKGND: FF
TARGET
CONTRAST:
  48%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.32:1 59.2% 54.37% 42.1% 46.6% 47.75% All Example Text: # AA (170) 66.67% 40.68%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 15.44% 3.19% 2.93% 3.1% 3.376% 3.78%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_13
TEXT: A3   BKGND: FF
TARGET
CONTRAST:
  52%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.52:1 62.7% 57.61% 45.7% 50.5% 52.16% All Example Text: # A3 (163) 63.92% 37.06%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 19.94% 3.54% 3.25% 3.7% 3.950% 4.41%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_14
TEXT: 9D   BKGND: FF
TARGET
CONTRAST:
  56%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.71:1 65.6% 60.26% 48.8% 53.9% 55.93% All Example Text: # 9D (163) 63.92% 37.06%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 18.95% 2.88% 2.64% 3.1% 3.395% 3.77%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_15
TEXT: 96   BKGND: FF
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.96:1 68.8% 63.18% 52.5% 57.9% 60.33% All Example Text: # 96 (157) 61.57% 34.10%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 24.58% 3.19% 2.93% 3.6% 3.969% 4.40%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_16
TEXT: 90   BKGND: FF
TARGET
CONTRAST:
  64%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.19:1 71.4% 65.56% 55.5% 61.3% 64.10% All Example Text: # 90 (150) 58.82% 30.82%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 23.47% 2.58% 2.37% 3.1% 3.407% 3.77%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_17
TEXT: 8A   BKGND: FF
TARGET
CONTRAST:
  68%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.45:1 73.8% 67.80% 58.5% 64.7% 67.87% All Example Text: # 8A (144) 56.47% 28.15%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 25.97% 2.45% 2.25% 3.0% 3.409% 3.77%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_18
TEXT: 83   BKGND: FF
TARGET
CONTRAST:
  72%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.79:1 76.5% 70.28% 62.0% 68.7% 72.26% All Example Text: # 83 (138) 54.12% 25.62%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 33.89% 2.69% 2.47% 3.5% 3.976% 4.39%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_19
TEXT: 7D   BKGND: FF
TARGET
CONTRAST:
  76%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.12:1 78.7% 72.27% 64.9% 72.1% 76.01% All Example Text: # 7D (131) 51.37% 22.82%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 32.53% 2.17% 1.99% 2.9% 3.403% 3.76%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_20
TEXT: 77   BKGND: FF
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.48:1 80.7% 74.14% 67.7% 75.5% 79.77% All Example Text: # 77 (125) 49.02% 20.57%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 36.17% 2.04% 1.87% 2.8% 3.394% 3.75%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_21
TEXT: 70   BKGND: FF
TARGET
CONTRAST:
  84%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.95:1 83.0% 76.18% 70.9% 79.4% 84.14% All Example Text: # 70 (119) 46.67% 18.44%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 47.41% 2.22% 2.04% 3.2% 3.943% 4.37%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_22
TEXT: 6A   BKGND: FF
TARGET
CONTRAST:
  88%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.41:1 84.7% 77.81% 73.5% 82.8% 87.88% All Example Text: # 6A (112) 43.92% 16.12%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 45.66% 1.77% 1.63% 2.6% 3.358% 3.74%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_23
TEXT: 63   BKGND: FF
TARGET
CONTRAST:
  92%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 6.01:1 86.7% 79.57% 76.5% 86.7% 92.23% All Example Text: # 63 (106) 41.57% 14.27%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 59.90% 1.92% 1.76% 2.9% 3.884% 4.35%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_24
TEXT: 5D   BKGND: FF
TARGET
CONTRAST:
  96%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 6.58:1 88.2% 80.96% 78.8% 90.0% 95.95% All Example Text: # 5D (99) 38.82% 12.26%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 57.68% 1.52% 1.39% 2.4% 3.291% 3.72%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_25
TEXT: 56   BKGND: FF
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 7.34:1 89.8% 82.45% 81.5% 93.7% 100.27% All Example Text: # 56 (93) 36.47% 10.68%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 75.50% 1.62% 1.49% 2.6% 3.781% 4.32%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_26
TEXT: 50   BKGND: FF
TARGET
CONTRAST:
  104%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 8.06:1 91.1% 83.62% 83.6% 96.9% 103.83% All Example Text: # 50 (86) 33.73% 8.97%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 72.37% 1.27% 1.17% 2.1% 3.178% 3.56%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_27
TEXT: 49   BKGND: FF
TARGET
CONTRAST:
  108%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 9.00:1 92.4% 84.85% 85.9% 100.5% 107.53% All Example Text: # 49 (80) 31.37% 7.64%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 93.99% 1.35% 1.24% 2.3% 3.615% 3.70%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_28
TEXT: 42   BKGND: FF
TARGET
CONTRAST:
  112%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 10.05:1 93.6% 85.96% 88.0% 104.0% 111.14% All Example Text: # 42 (73) 28.63% 6.24%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 104.66% 1.20% 1.10% 2.1% 3.491% 3.61%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_29
TEXT: 39   BKGND: FF
TARGET
CONTRAST:
  116%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 11.55:1 95.0% 87.19% 90.4% 108.3% 115.61% All Example Text: # 39 (66) 25.88% 4.99%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 149.95% 1.34% 1.23% 2.4% 4.260% 4.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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_30
TEXT: 2F   BKGND: FF
TARGET
CONTRAST:
  120%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 13.39:1 96.2% 88.32% 92.7% 112.6% 120.25% All Example Text: # 2F (57) 22.35% 3.60%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 183.92% 1.24% 1.14% 2.3% 4.347% 4.64%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_31
TEXT: 23   BKGND: FF
TARGET
CONTRAST:
  124%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 15.72:1 97.3% 89.38% 94.8% 117.2% 125.15% All Example Text: # 23 (47) 18.43% 2.35%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 232.84% 1.15% 1.06% 2.2% 4.523% 4.91%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_FF_CBNP_32
TEXT: 11   BKGND: FF
TARGET
CONTRAST:
  128%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 18.88:1 98.5% 90.40% 97.0% 122.1% 130.33% All Example Text: # 11 (35) 13.73% 1.22%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 316.62% 1.11% 1.02% 2.1% 4.952% 5.18%

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.

Test Panel: # CC

Constant Background and NORMAL Polarity,
Starting Contrast 4% increasing in 4% increments per patch.

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: CC ⊙ CodeInc: 0.799462487937601 ⊙ Target Contrast: 4% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.574321 ⊙ 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
SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_1
TEXT: C2   BKGND: CC
TARGET
CONTRAST:
  4%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.11:1 10.5% 9.14% 5.5% 0.0% 4.23% All Example Text: # C2 (194) 76.08% 54.53%
Background: # CC (204) 80.00% 60.96%
Δ 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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_2
TEXT: BC   BKGND: CC
TARGET
CONTRAST:
  8%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.18:1 16.4% 14.34% 9.0% 8.9% 8.01% All Example Text: # BC (188) 73.73% 50.86%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 7.34% 5.96% 5.20% 3.4% 8.878% 3.78%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_3
TEXT: B6   BKGND: CC
TARGET
CONTRAST:
  12%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.26:1 22.2% 19.33% 12.5% 12.2% 11.79% All Example Text: # B6 (182) 71.37% 47.33%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 8.02% 5.72% 4.99% 3.5% 3.353% 3.78%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_4
TEXT: AF   BKGND: CC
TARGET
CONTRAST:
  16%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.37:1 28.5% 24.88% 16.6% 16.2% 16.20% All Example Text: # AF (175) 68.63% 43.39%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 10.31% 6.37% 5.55% 4.2% 3.927% 4.41%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_5
TEXT: A9   BKGND: CC
TARGET
CONTRAST:
  20%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.46:1 33.7% 29.42% 20.3% 19.5% 19.98% All Example Text: # A9 (169) 66.27% 40.16%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 9.76% 5.20% 4.54% 3.6% 3.377% 3.78%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_6
TEXT: A3   BKGND: CC
TARGET
CONTRAST:
  24%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.57:1 38.7% 33.75% 24.0% 22.9% 23.76% All Example Text: # A3 (163) 63.92% 37.06%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 10.72% 4.97% 4.33% 3.7% 3.387% 3.78%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_7
TEXT: 9C   BKGND: CC
TARGET
CONTRAST:
  28%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.71:1 44.2% 38.56% 28.4% 26.9% 28.16% All Example Text: # 9C (156) 61.18% 33.62%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 13.88% 5.51% 4.80% 4.4% 3.962% 4.40%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_8
TEXT: 96   BKGND: CC
TARGET
CONTRAST:
  32%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.84:1 48.7% 42.46% 32.2% 30.3% 31.93% All Example Text: # 96 (150) 58.82% 30.82%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 13.23% 4.47% 3.90% 3.8% 3.402% 3.77%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_9
TEXT: 8F   BKGND: CC
TARGET
CONTRAST:
  36%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.01:1 53.6% 46.77% 36.6% 34.3% 36.33% All Example Text: # 8F (143) 56.08% 27.72%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 17.19% 4.94% 4.31% 4.5% 3.975% 4.40%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_10
TEXT: 89   BKGND: CC
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.18:1 57.6% 50.25% 40.5% 37.7% 40.09% All Example Text: # 89 (137) 53.73% 25.21%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 16.45% 3.99% 3.48% 3.8% 3.409% 3.77%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_11
TEXT: 83   BKGND: CC
TARGET
CONTRAST:
  44%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.36:1 61.4% 53.54% 44.3% 41.1% 43.86% All Example Text: # 83 (131) 51.37% 22.82%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 18.24% 3.78% 3.30% 3.8% 3.408% 3.76%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_12
TEXT: 7C   BKGND: CC
TARGET
CONTRAST:
  48%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.60:1 65.5% 57.15% 48.7% 45.0% 48.24% All Example Text: # 7C (124) 48.63% 20.21%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 23.85% 4.14% 3.61% 4.4% 3.969% 4.38%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_13
TEXT: 76   BKGND: CC
TARGET
CONTRAST:
  52%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.83:1 68.9% 60.05% 52.5% 48.4% 51.99% All Example Text: # 76 (118) 46.27% 18.10%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 22.93% 3.32% 2.90% 3.8% 3.392% 3.75%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_14
TEXT: 6F   BKGND: CC
TARGET
CONTRAST:
  56%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.13:1 72.5% 63.21% 56.8% 52.4% 56.36% All Example Text: # 6F (118) 46.27% 18.10%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 30.05% 3.62% 3.15% 4.3% 3.940% 4.37%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_15
TEXT: 69   BKGND: CC
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.42:1 75.4% 65.72% 60.5% 55.7% 60.10% All Example Text: # 69 (111) 43.53% 15.81%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 28.95% 2.88% 2.51% 3.6% 3.354% 3.74%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_16
TEXT: 63   BKGND: CC
TARGET
CONTRAST:
  64%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.74:1 78.0% 68.06% 64.0% 59.1% 63.83% All Example Text: # 63 (105) 41.18% 13.97%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 32.26% 2.69% 2.34% 3.5% 3.327% 3.73%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_17
TEXT: 5C   BKGND: CC
TARGET
CONTRAST:
  68%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.16:1 80.9% 70.59% 68.0% 62.9% 68.16% All Example Text: # 5C (99) 38.82% 12.26%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 42.29% 2.89% 2.52% 4.0% 3.835% 4.34%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_18
TEXT: 56   BKGND: CC
TARGET
CONTRAST:
  72%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.57:1 83.2% 72.57% 71.2% 66.1% 71.87% All Example Text: # 56 (92) 36.08% 10.42%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 40.64% 2.27% 1.98% 3.3% 3.237% 3.70%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_19
TEXT: 4F   BKGND: CC
TARGET
CONTRAST:
  76%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.10:1 85.6% 74.68% 74.9% 69.8% 75.96% All Example Text: # 4F (86) 33.73% 8.97%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 53.02% 2.42% 2.11% 3.6% 3.701% 4.09%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_20
TEXT: 49   BKGND: CC
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.61:1 87.5% 76.33% 77.8% 72.9% 79.13% All Example Text: # 49 (79) 30.98% 7.43%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 50.56% 1.88% 1.64% 2.9% 3.092% 3.17%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_21
TEXT: 41   BKGND: CC
TARGET
CONTRAST:
  84%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 6.36:1 89.8% 78.28% 81.4% 76.9% 83.25% All Example Text: # 41 (73) 28.63% 6.24%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 75.02% 2.24% 1.96% 3.6% 3.979% 4.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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_22
TEXT: 38   BKGND: CC
TARGET
CONTRAST:
  88%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 7.30:1 91.9% 80.17% 85.1% 81.1% 87.69% All Example Text: # 38 (65) 25.49% 4.82%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 94.51% 2.17% 1.89% 3.6% 4.227% 4.44%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_23
TEXT: 2F   BKGND: CC
TARGET
CONTRAST:
  92%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 8.34:1 93.7% 81.75% 88.2% 85.0% 91.85% All Example Text: # 2F (56) 21.96% 3.47%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 103.53% 1.81% 1.58% 3.2% 3.893% 4.16%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_24
TEXT: 22   BKGND: CC
TARGET
CONTRAST:
  96%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 9.91:1 95.8% 83.52% 91.9% 89.9% 97.12% All Example Text: # 22 (47) 18.43% 2.35%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 157.02% 2.02% 1.77% 3.7% 4.860% 5.27%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_CC_CBNP_25
TEXT: 10   BKGND: CC
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 11.85:1 97.5% 85.06% 95.2% 94.7% 102.11% All Example Text: # 10 (34) 13.33% 1.15%
Background: # CC (204) 80.00% 60.96%
Δ Delta: 194.16% 1.76% 1.54% 3.3% 4.817% 5.00%

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.

Test Panel: # A0

Constant Background and NORMAL Polarity,
Starting Contrast 4% increasing in 4% increments per patch.

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: A0 ⊙ CodeInc: 0.643193859858297 ⊙ Target Contrast: 4% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.574321 ⊙ 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
SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_1
TEXT: 9A   BKGND: A0
TARGET
CONTRAST:
  4%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.08:1 7.9% 6.29% 4.1% 0.0% 4.13% All Example Text: # 9A (154) 60.39% 32.67%
Background: # A0 (160) 62.75% 35.57%
Δ 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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_2
TEXT: 94   BKGND: A0
TARGET
CONTRAST:
  8%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.16:1 15.3% 12.27% 8.3% 6.8% 7.90% All Example Text: # 94 (148) 58.04% 29.92%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 8.40% 7.47% 5.98% 4.2% 6.803% 3.77%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_3
TEXT: 8D   BKGND: A0
TARGET
CONTRAST:
  12%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.27:1 23.6% 18.86% 13.4% 10.8% 12.30% All Example Text: # 8D (141) 55.29% 26.87%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 10.92% 8.24% 6.60% 5.1% 3.976% 4.40%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_4
TEXT: 87   BKGND: A0
TARGET
CONTRAST:
  16%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.37:1 30.2% 24.20% 17.8% 14.2% 16.06% All Example Text: # 87 (135) 52.94% 24.40%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 10.45% 6.66% 5.33% 4.4% 3.409% 3.76%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_5
TEXT: 81   BKGND: A0
TARGET
CONTRAST:
  20%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.49:1 36.5% 29.24% 22.3% 17.6% 19.82% All Example Text: # 81 (129) 50.59% 22.06%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 11.60% 6.29% 5.04% 4.5% 3.406% 3.76%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_6
TEXT: 7A   BKGND: A0
TARGET
CONTRAST:
  24%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.64:1 43.4% 34.75% 27.7% 21.6% 24.21% All Example Text: # 7A (122) 47.84% 19.49%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 15.17% 6.89% 5.52% 5.4% 3.966% 4.38%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_7
TEXT: 74   BKGND: A0
TARGET
CONTRAST:
  28%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.79:1 48.9% 39.17% 32.4% 24.9% 27.95% All Example Text: # 74 (116) 45.49% 17.43%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 14.59% 5.52% 4.42% 4.7% 3.388% 3.75%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_8
TEXT: 6D   BKGND: A0
TARGET
CONTRAST:
  32%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.98:1 54.9% 43.98% 37.9% 28.9% 32.32% All Example Text: # 6D (109) 42.75% 15.18%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 19.13% 6.01% 4.81% 5.5% 3.932% 4.37%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_9
TEXT: 67   BKGND: A0
TARGET
CONTRAST:
  36%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.16:1 59.7% 47.81% 42.6% 32.2% 36.06% All Example Text: # 67 (103) 40.39% 13.39%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 18.43% 4.78% 3.83% 4.7% 3.346% 3.73%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_10
TEXT: 61   BKGND: A0
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.37:1 64.2% 51.38% 47.2% 35.5% 39.78% All Example Text: # 61 (97) 38.04% 11.72%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 20.53% 4.45% 3.56% 4.7% 3.316% 3.73%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_11
TEXT: 5A   BKGND: A0
TARGET
CONTRAST:
  44%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.64:1 69.0% 55.21% 52.6% 39.4% 44.11% All Example Text: # 5A (90) 35.29% 9.93%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 26.91% 4.78% 3.83% 5.4% 3.818% 4.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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_12
TEXT: 54   BKGND: A0
TARGET
CONTRAST:
  48%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.90:1 72.7% 58.22% 57.1% 42.6% 47.81% All Example Text: # 54 (84) 32.94% 8.52%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 25.84% 3.76% 3.01% 4.5% 3.218% 3.70%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_13
TEXT: 4D   BKGND: A0
TARGET
CONTRAST:
  52%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.23:1 76.7% 61.42% 62.2% 46.3% 51.74% All Example Text: # 4D (77) 30.20% 7.02%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 33.67% 3.99% 3.20% 5.1% 3.674% 3.93%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_14
TEXT: 45   BKGND: A0
TARGET
CONTRAST:
  56%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.67:1 80.8% 64.67% 67.7% 50.3% 55.92% All Example Text: # 45 (77) 30.20% 7.02%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 43.40% 4.07% 3.26% 5.5% 4.064% 4.18%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_15
TEXT: 3D   BKGND: A0
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.15:1 84.3% 67.52% 72.9% 54.2% 59.97% All Example Text: # 3D (69) 27.06% 5.51%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 48.73% 3.55% 2.85% 5.2% 3.882% 4.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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_16
TEXT: 33   BKGND: A0
TARGET
CONTRAST:
  64%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.83:1 88.1% 70.52% 78.7% 58.7% 64.75% All Example Text: # 33 (61) 23.92% 4.19%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 67.78% 3.75% 3.00% 5.8% 4.521% 4.79%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_17
TEXT: 27   BKGND: A0
TARGET
CONTRAST:
  68%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.71:1 91.6% 73.36% 84.5% 63.5% 69.93% All Example Text: # 27 (51) 20.00% 2.82%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 88.10% 3.54% 2.84% 5.8% 4.795% 5.18%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_A0_CBNP_18
TEXT: 17   BKGND: A0
TARGET
CONTRAST:
  72%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 6.86:1 94.9% 75.96% 90.2% 68.5% 75.29% All Example Text: # 17 (39) 15.29% 1.55%
Background: # A0 (160) 62.75% 35.57%
Δ Delta: 114.32% 3.24% 2.60% 5.7% 4.986% 5.35%

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.

Test Panel: # 77

Constant Background and NORMAL Polarity,
Starting Contrast 4% increasing in 4% increments per patch.

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: 77 ⊙ CodeInc: 0.492230642040408 ⊙ Target Contrast: 4% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.574321 ⊙ 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
SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_1
TEXT: 73   BKGND: 77
TARGET
CONTRAST:
  4%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.06:1 6.7% 4.58% 3.5% 0.0% 4.15% All Example Text: # 73 (115) 45.10% 17.10%
Background: # 77 (119) 46.67% 18.44%
Δ 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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_2
TEXT: 6D   BKGND: 77
TARGET
CONTRAST:
  8%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.16:1 16.2% 11.09% 8.8% 5.6% 7.90% All Example Text: # 6D (109) 42.75% 15.18%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 9.66% 9.52% 6.51% 5.4% 5.625% 3.74%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_3
TEXT: 66   BKGND: 77
TARGET
CONTRAST:
  12%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.28:1 26.5% 18.14% 15.3% 9.5% 12.25% All Example Text: # 66 (102) 40.00% 13.10%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 12.67% 10.31% 7.05% 6.5% 3.901% 4.36%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_4
TEXT: 60   BKGND: 77
TARGET
CONTRAST:
  16%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.40:1 34.7% 23.73% 21.0% 12.8% 15.98% All Example Text: # 60 (96) 37.65% 11.45%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 12.21% 8.17% 5.59% 5.7% 3.310% 3.72%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_5
TEXT: 59   BKGND: 77
TARGET
CONTRAST:
  20%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.56:1 43.5% 29.73% 27.8% 16.6% 20.31% All Example Text: # 59 (89) 34.90% 9.68%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 15.99% 8.78% 6.00% 6.8% 3.809% 4.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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_6
TEXT: 53   BKGND: 77
TARGET
CONTRAST:
  24%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.72:1 50.4% 34.44% 33.7% 19.9% 24.00% All Example Text: # 53 (83) 32.55% 8.29%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 15.35% 6.89% 4.71% 5.9% 3.209% 3.70%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_7
TEXT: 4C   BKGND: 77
TARGET
CONTRAST:
  28%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 1.92:1 57.7% 39.44% 40.5% 23.5% 27.84% All Example Text: # 4C (76) 29.80% 6.82%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 19.99% 7.32% 5.00% 6.9% 3.660% 3.84%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_8
TEXT: 45   BKGND: 77
TARGET
CONTRAST:
  32%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.14:1 64.3% 43.93% 47.3% 27.1% 31.49% All Example Text: # 45 (69) 27.06% 5.51%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 22.35% 6.56% 4.49% 6.8% 3.548% 3.65%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_9
TEXT: 3C   BKGND: 77
TARGET
CONTRAST:
  36%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.46:1 71.6% 48.96% 55.8% 31.4% 36.03% All Example Text: # 3C (60) 23.53% 4.04%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 32.22% 7.37% 5.04% 8.5% 4.352% 4.54%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_10
TEXT: 32   BKGND: 77
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.86:1 78.5% 53.64% 64.6% 35.9% 40.79% All Example Text: # 32 (50) 19.61% 2.70%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 39.98% 6.83% 4.67% 8.8% 4.479% 4.75%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_11
TEXT: 27   BKGND: 77
TARGET
CONTRAST:
  44%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.34:1 84.4% 57.72% 73.0% 40.3% 45.51% All Example Text: # 27 (39) 15.29% 1.55%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 47.28% 5.97% 4.08% 8.5% 4.366% 4.72%

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.

SAPC-6 EVALUATION
Constant BG Patch:#
CE16_77_CBNP_12
TEXT: 16   BKGND: 77
TARGET
CONTRAST:
  48%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.04:1 90.7% 62.03% 83.0% 45.5% 51.11% All Example Text: # 16 (22) 8.63% 0.44%
Background: # 77 (119) 46.67% 18.44%
Δ Delta: 70.52% 6.31% 4.31% 10.0% 5.236% 5.61%

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.

Analysis