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 Contrast" 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 Contrast" with the background color changing in increments of 8 sRGB code values for each test patch. Ideally, each patch within a panel of a particular target contrast will appear perceptually the same, regardless of how bright the background is. HOWEVER, the SAPC-6 has a slight bump near black in the default basic configuration.

See this page for Constant Background Ramps, where the background remains constant and only the text colors change to test perceptually uniform contrast increase increments.

Jump To Test Panel:

  1. Test Panel 120%
  2. Test Panel 100%
  3. Test Panel 80%
  4. Test Panel 70%
  5. Test Panel 60%
  6. Test Panel 50%
  7. Test Panel 40%
  8. Test Panel 25%
  9. Test Panel 10%

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_70_NP_4, then in the location bar add #CE16_70_NP_4 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: 120%

Constant Contrast and NORMAL Polarity,
Starting at Level #FF With 8 Code Steps Per Patch

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: FF ⊙ CodeInc: 8 ⊙ Target Contrast: 120% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.48 ⊙ SftClp: 0.321 ⊙ FG clmp: 0.08 ⊙ BG clmp: 0.06 ⊙ MnAdj: 0.01 ⊙ FGoi: 0 ⊙ 0.005 ⊙ BGoi: -0.025 ⊙ 0
SAPC 6 Settings: Pol: NORMAL POLARITY ⊙ Mode: Constant Contrast ⊙ Target Contrast: 120% ⊙ 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
Test Patch:#
CE16_120_NP_1
TEXT: 36   BKGND: FF
TARGET
CONTRAST:
  120%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 12.08:1 95.4% 87.56% 91.1% 109.6% 117.04% All Example Text: # 36 (54) 21.18% 3.20%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 00 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
Test Patch:#
CE16_120_NP_2
TEXT: 2D   BKGND: F7
TARGET
CONTRAST:
  120%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 12.86:1 96.1% 87.74% 92.6% 109.2% 116.72% All Example Text: # 2D (45) 17.65% 2.13%
Background: # F7 (247) 96.86% 93.17%
Δ Delta: 77 0.79% 0.19% 1.4% -0.451% -0.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
Test Patch:#
CE16_120_NP_3
TEXT: 24   BKGND: EF
TARGET
CONTRAST:
  120%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 13.50:1 96.8% 87.79% 93.9% 108.3% 115.96% All Example Text: # 24 (36) 14.12% 1.30%
Background: # EF (239) 93.73% 86.61%
Δ Delta: 64 0.69% 0.04% 1.3% -0.917% -0.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
Test Patch:#
CE16_120_NP_4
TEXT: 19   BKGND: E7
TARGET
CONTRAST:
  120%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 14.22:1 97.6% 87.80% 95.2% 107.4% 115.17% All Example Text: # 19 (25) 9.80% 0.58%
Background: # E7 (231) 90.59% 80.31%
Δ Delta: 72 0.73% 0.01% 1.4% -0.917% -0.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
Test Patch:#
CE16_120_NP_5
TEXT: 06   BKGND: DF
TARGET
CONTRAST:
  120%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 15.20:1 98.4% 87.85% 96.9% 106.8% 113.98% All Example Text: # 06 (6) 2.35% 0.02%
Background: # DF (223) 87.45% 74.27%
Δ Delta: 99 0.86% 0.05% 1.6% -0.597% -1.19%

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
Test Patch:#
CE16_120_NP_6
TEXT: 00   BKGND: D7
TARGET
CONTRAST:
  120%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 14.59:1 98.5% 87.17% 97.1% 103.3% 109.65% All Example Text: # 00 (0) 0.00% 0.00%
Background: # D7 (215) 84.31% 68.49%
Δ Delta: -61 0.13% -0.68% 0.3% -3.442% -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.

Test Panel: 100%

Constant Contrast and NORMAL Polarity,
Starting at Level #FF With 8 Code Steps Per Patch

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: FF ⊙ CodeInc: 8 ⊙ Target Contrast: 100% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.48 ⊙ SftClp: 0.321 ⊙ FG clmp: 0.08 ⊙ BG clmp: 0.06 ⊙ MnAdj: 0.01 ⊙ FGoi: 0 ⊙ 0.005 ⊙ BGoi: -0.025 ⊙ 0
SAPC 6 Settings: Pol: NORMAL POLARITY ⊙ Mode: Constant Contrast ⊙ Target Contrast: 100% ⊙ 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
Test Patch:#
CE16_100_NP_1
TEXT: 57   BKGND: FF
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 7.23:1 89.6% 82.24% 81.1% 93.2% 99.65% All Example Text: # 57 (87) 34.12% 9.21%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 00 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
Test Patch:#
CE16_100_NP_2
TEXT: 50   BKGND: F7
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 7.53:1 90.4% 82.50% 82.5% 92.7% 99.43% All Example Text: # 50 (80) 31.37% 7.64%
Background: # F7 (247) 96.86% 93.17%
Δ Delta: 30 0.83% 0.26% 1.4% -0.545% -0.23%

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
Test Patch:#
CE16_100_NP_3
TEXT: 47   BKGND: EF
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 8.08:1 91.6% 83.08% 84.6% 93.0% 99.75% All Example Text: # 47 (71) 27.84% 5.87%
Background: # EF (239) 93.73% 86.61%
Δ Delta: 55 1.24% 0.57% 2.1% 0.341% 0.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
Test Patch:#
CE16_100_NP_4
TEXT: 3F   BKGND: E7
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 8.52:1 92.6% 83.35% 86.3% 92.6% 99.40% All Example Text: # 3F (63) 24.71% 4.50%
Background: # E7 (231) 90.59% 80.31%
Δ Delta: 44 0.98% 0.27% 1.7% -0.381% -0.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
Test Patch:#
CE16_100_NP_5
TEXT: 36   BKGND: DF
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 9.07:1 93.7% 83.66% 88.2% 92.4% 99.32% All Example Text: # 36 (54) 21.18% 3.20%
Background: # DF (223) 87.45% 74.27%
Δ Delta: 55 1.11% 0.31% 1.9% -0.180% -0.07%

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
Test Patch:#
CE16_100_NP_6
TEXT: 2B   BKGND: D7
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 9.84:1 95.0% 84.07% 90.6% 92.7% 99.78% All Example Text: # 2B (43) 16.86% 1.93%
Background: # D7 (215) 84.31% 68.49%
Δ Delta: 77 1.32% 0.41% 2.4% 0.230% 0.45%

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
Test Patch:#
CE16_100_NP_7
TEXT: 1E   BKGND: CF
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 10.70:1 96.4% 84.39% 93.0% 92.8% 100.20% All Example Text: # 1E (30) 11.76% 0.87%
Background: # CF (207) 81.18% 62.97%
Δ Delta: 86 1.33% 0.32% 2.4% 0.145% 0.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
Test Patch:#
CE16_100_NP_8
TEXT: 0A   BKGND: C7
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 11.71:1 97.8% 84.65% 95.6% 93.0% 100.14% All Example Text: # 0A (10) 3.92% 0.08%
Background: # C7 (199) 78.04% 57.70%
Δ Delta: 101 1.38% 0.25% 2.6% 0.160% -0.06%

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
Test Patch:#
CE16_100_NP_9
TEXT: 00   BKGND: BF
TARGET
CONTRAST:
  100%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 11.42:1 98.1% 83.90% 96.3% 90.1% 96.06% All Example Text: # 00 (0) 0.00% 0.00%
Background: # BF (191) 74.90% 52.68%
Δ Delta: -29 0.36% -0.75% 0.7% -2.916% -4.07%

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: 80%

Constant Contrast and NORMAL Polarity,
Starting at Level #FF With 8 Code Steps Per Patch

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: FF ⊙ CodeInc: 8 ⊙ Target Contrast: 80% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.48 ⊙ SftClp: 0.321 ⊙ FG clmp: 0.08 ⊙ BG clmp: 0.06 ⊙ MnAdj: 0.01 ⊙ FGoi: 0 ⊙ 0.005 ⊙ BGoi: -0.025 ⊙ 0
SAPC 6 Settings: Pol: NORMAL POLARITY ⊙ Mode: Constant Contrast ⊙ Target Contrast: 80% ⊙ 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
Test Patch:#
CE16_80_NP_1
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 (119) 46.67% 18.44%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 00 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
Test Patch:#
CE16_80_NP_2
TEXT: 70   BKGND: F7
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.62:1 81.7% 74.56% 69.1% 75.2% 79.74% All Example Text: # 70 (112) 43.92% 16.12%
Background: # F7 (247) 96.86% 93.17%
Δ Delta: 14 0.96% 0.42% 1.4% -0.316% -0.03%

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
Test Patch:#
CE16_80_NP_3
TEXT: 69   BKGND: EF
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.77:1 82.7% 74.95% 70.5% 74.8% 79.68% All Example Text: # 69 (105) 41.18% 13.97%
Background: # EF (239) 93.73% 86.61%
Δ Delta: 15 0.98% 0.39% 1.4% -0.370% -0.06%

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
Test Patch:#
CE16_80_NP_4
TEXT: 62   BKGND: E7
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.93:1 83.7% 75.29% 71.9% 74.4% 79.59% All Example Text: # 62 (98) 38.43% 11.99%
Background: # E7 (231) 90.59% 80.31%
Δ Delta: 16 0.99% 0.34% 1.5% -0.435% -0.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
Test Patch:#
CE16_80_NP_5
TEXT: 5A   BKGND: DF
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.18:1 85.0% 75.86% 73.9% 74.4% 80.08% All Example Text: # 5A (90) 35.29% 9.93%
Background: # DF (223) 87.45% 74.27%
Δ Delta: 24 1.32% 0.57% 2.0% 0.028% 0.49%

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
Test Patch:#
CE16_80_NP_6
TEXT: 53   BKGND: D7
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.34:1 86.0% 76.08% 75.4% 73.8% 79.91% All Example Text: # 53 (83) 32.55% 8.29%
Background: # D7 (215) 84.31% 68.49%
Δ Delta: 17 1.01% 0.21% 1.5% -0.618% -0.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
Test Patch:#
CE16_80_NP_7
TEXT: 4B   BKGND: CF
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.60:1 87.3% 76.47% 77.5% 73.6% 79.77% All Example Text: # 4B (75) 29.41% 6.62%
Background: # CF (207) 81.18% 62.97%
Δ Delta: 25 1.32% 0.39% 2.1% -0.218% -0.14%

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
Test Patch:#
CE16_80_NP_8
TEXT: 42   BKGND: C7
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.94:1 88.9% 76.98% 80.0% 73.7% 79.91% All Example Text: # 42 (66) 25.88% 4.99%
Background: # C7 (199) 78.04% 57.70%
Δ Delta: 35 1.58% 0.51% 2.5% 0.095% 0.13%

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
Test Patch:#
CE16_80_NP_9
TEXT: 39   BKGND: BF
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 6.28:1 90.4% 77.31% 82.5% 73.5% 79.82% All Example Text: # 39 (57) 22.35% 3.60%
Background: # BF (191) 74.90% 52.68%
Δ Delta: 34 1.51% 0.33% 2.5% -0.182% -0.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
Test Patch:#
CE16_80_NP_10
TEXT: 2E   BKGND: B7
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 6.77:1 92.3% 77.80% 85.7% 73.8% 80.32% All Example Text: # 2E (46) 18.04% 2.24%
Background: # B7 (183) 71.76% 47.91%
Δ Delta: 49 1.87% 0.49% 3.2% 0.290% 0.50%

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
Test Patch:#
CE16_80_NP_11
TEXT: 22   BKGND: AF
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 7.25:1 94.1% 78.06% 88.8% 73.7% 80.55% All Example Text: # 22 (34) 13.33% 1.15%
Background: # AF (175) 68.63% 43.39%
Δ Delta: 48 1.79% 0.26% 3.1% -0.034% 0.23%

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
Test Patch:#
CE16_80_NP_12
TEXT: 10   BKGND: A7
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 7.91:1 96.2% 78.38% 92.6% 74.0% 80.91% All Example Text: # 10 (16) 6.27% 0.22%
Background: # A7 (167) 65.49% 39.11%
Δ Delta: 66 2.10% 0.32% 3.8% 0.312% 0.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
Test Patch:#
CE16_80_NP_13
TEXT: 00   BKGND: 9F
TARGET
CONTRAST:
  80%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 7.93:1 97.2% 77.61% 94.5% 72.1% 77.58% All Example Text: # 00 (0) 0.00% 0.00%
Background: # 9F (159) 62.35% 35.07%
Δ Delta: 03 1.03% -0.76% 1.9% -1.956% -3.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.

Test Panel: 70%

Constant Contrast and NORMAL Polarity,
Starting at Level #FF With 8 Code Steps Per Patch

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: FF ⊙ CodeInc: 8 ⊙ Target Contrast: 70% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.48 ⊙ SftClp: 0.321 ⊙ FG clmp: 0.08 ⊙ BG clmp: 0.06 ⊙ MnAdj: 0.01 ⊙ FGoi: 0 ⊙ 0.005 ⊙ BGoi: -0.025 ⊙ 0
SAPC 6 Settings: Pol: NORMAL POLARITY ⊙ Mode: Constant Contrast ⊙ Target Contrast: 70% ⊙ 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
Test Patch:#
CE16_70_NP_1
TEXT: 87   BKGND: FF
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.59:1 75.0% 68.88% 60.0% 66.4% 69.75% All Example Text: # 87 (135) 52.94% 24.40%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 00 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
Test Patch:#
CE16_70_NP_2
TEXT: 80   BKGND: F7
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.69:1 76.0% 69.34% 61.3% 66.1% 69.74% All Example Text: # 80 (128) 50.20% 21.68%
Background: # F7 (247) 96.86% 93.17%
Δ Delta: 09 0.95% 0.45% 1.2% -0.285% -0.01%

48px Headline, 100 Weight Font





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

2

3

4

A 26px Headline in a Normal 400 Font

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

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

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

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

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

SAPC-6 EVALUATION
Test Patch:#
CE16_70_NP_3
TEXT: 79   BKGND: EF
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.79:1 77.0% 69.77% 62.5% 65.8% 69.70% All Example Text: # 79 (121) 47.45% 19.14%
Background: # EF (239) 93.73% 86.61%
Δ Delta: 10 0.98% 0.43% 1.3% -0.321% -0.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
Test Patch:#
CE16_70_NP_4
TEXT: 72   BKGND: E7
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.89:1 78.0% 70.16% 63.9% 65.4% 69.63% All Example Text: # 72 (114) 44.71% 16.77%
Background: # E7 (231) 90.59% 80.31%
Δ Delta: 10 1.01% 0.40% 1.3% -0.364% -0.07%

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
Test Patch:#
CE16_70_NP_5
TEXT: 6A   BKGND: DF
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.06:1 79.4% 70.86% 65.8% 65.6% 70.16% All Example Text: # 6A (106) 41.57% 14.27%
Background: # DF (223) 87.45% 74.27%
Δ Delta: 17 1.43% 0.70% 1.9% 0.143% 0.53%

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
Test Patch:#
CE16_70_NP_6
TEXT: 63   BKGND: D7
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.17:1 80.5% 71.17% 67.3% 65.1% 70.03% All Example Text: # 63 (99) 38.82% 12.26%
Background: # D7 (215) 84.31% 68.49%
Δ Delta: 12 1.06% 0.30% 1.5% -0.483% -0.13%

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
Test Patch:#
CE16_70_NP_7
TEXT: 5C   BKGND: CF
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.29:1 81.5% 71.40% 68.8% 64.5% 69.86% All Example Text: # 5C (92) 36.08% 10.42%
Background: # CF (207) 81.18% 62.97%
Δ Delta: 12 1.09% 0.24% 1.5% -0.558% -0.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
Test Patch:#
CE16_70_NP_8
TEXT: 55   BKGND: C7
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.41:1 82.6% 71.56% 70.4% 63.9% 69.65% All Example Text: # 55 (85) 33.33% 8.74%
Background: # C7 (199) 78.04% 57.70%
Δ Delta: 12 1.11% 0.16% 1.6% -0.647% -0.21%

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
Test Patch:#
CE16_70_NP_9
TEXT: 4C   BKGND: BF
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.67:1 84.5% 72.26% 73.2% 64.2% 70.17% All Example Text: # 4C (76) 29.80% 6.82%
Background: # BF (191) 74.90% 52.68%
Δ Delta: 26 1.86% 0.69% 2.7% 0.281% 0.52%

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
Test Patch:#
CE16_70_NP_10
TEXT: 44   BKGND: B7
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.86:1 86.0% 72.49% 75.4% 63.8% 69.75% All Example Text: # 44 (68) 26.67% 5.33%
Background: # B7 (183) 71.76% 47.91%
Δ Delta: 19 1.47% 0.23% 2.2% -0.421% -0.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
Test Patch:#
CE16_70_NP_11
TEXT: 3A   BKGND: AF
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.19:1 88.1% 73.08% 78.7% 64.1% 70.15% All Example Text: # 3A (58) 22.75% 3.75%
Background: # AF (175) 68.63% 43.39%
Δ Delta: 33 2.10% 0.60% 3.3% 0.298% 0.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
Test Patch:#
CE16_70_NP_12
TEXT: 30   BKGND: A7
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.49:1 90.0% 73.37% 81.9% 63.9% 70.20% All Example Text: # 30 (48) 18.82% 2.46%
Background: # A7 (167) 65.49% 39.11%
Δ Delta: 30 1.95% 0.28% 3.2% -0.113% 0.05%

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
Test Patch:#
CE16_70_NP_13
TEXT: 23   BKGND: 9F
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.94:1 92.5% 73.85% 86.0% 64.4% 70.88% All Example Text: # 23 (35) 13.73% 1.22%
Background: # 9F (159) 62.35% 35.07%
Δ Delta: 45 2.46% 0.49% 4.2% 0.415% 0.69%

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
Test Patch:#
CE16_70_NP_14
TEXT: 12   BKGND: 97
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 6.41:1 95.0% 74.10% 90.4% 64.6% 71.17% All Example Text: # 12 (35) 13.73% 1.22%
Background: # 97 (159) 62.35% 35.07%
Δ Delta: 48 2.49% 0.25% 4.4% 0.208% 0.28%

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
Test Patch:#
CE16_70_NP_15
TEXT: 00   BKGND: 8F
TARGET
CONTRAST:
  70%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 6.49:1 96.5% 73.31% 93.2% 63.0% 68.16% All Example Text: # 00 (18) 7.06% 0.28%
Background: # 8F (151) 59.22% 31.28%
Δ Delta: 08 1.51% -0.79% 2.8% -1.565% -3.01%

48px Headline, 100 Weight Font





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

2

3

4

A 26px Headline in a Normal 400 Font

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

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

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

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

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

Test Panel: 60%

Constant Contrast and NORMAL Polarity,
Starting at Level #FF With 8 Code Steps Per Patch

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: FF ⊙ CodeInc: 8 ⊙ Target Contrast: 60% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.48 ⊙ SftClp: 0.321 ⊙ FG clmp: 0.08 ⊙ BG clmp: 0.06 ⊙ MnAdj: 0.01 ⊙ FGoi: 0 ⊙ 0.005 ⊙ BGoi: -0.025 ⊙ 0
SAPC 6 Settings: Pol: NORMAL POLARITY ⊙ Mode: Constant Contrast ⊙ Target Contrast: 60% ⊙ 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
Test Patch:#
CE16_60_NP_1
TEXT: 97   BKGND: FF
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.92:1 68.4% 62.78% 51.9% 57.3% 59.71% All Example Text: # 97 (151) 59.22% 31.28%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 00 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
Test Patch:#
CE16_60_NP_2
TEXT: 90   BKGND: F7
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.98:1 69.3% 63.22% 53.0% 57.0% 59.70% All Example Text: # 90 (144) 56.47% 28.15%
Background: # F7 (247) 96.86% 93.17%
Δ Delta: 06 0.90% 0.44% 1.0% -0.284% 0.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.

SAPC-6 EVALUATION
Test Patch:#
CE16_60_NP_3
TEXT: 89   BKGND: EF
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.04:1 70.2% 63.64% 54.1% 56.7% 59.68% All Example Text: # 89 (137) 53.73% 25.21%
Background: # EF (239) 93.73% 86.61%
Δ Delta: 06 0.93% 0.43% 1.1% -0.309% -0.03%

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
Test Patch:#
CE16_60_NP_4
TEXT: 82   BKGND: E7
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.11:1 71.2% 64.05% 55.2% 56.4% 59.62% All Example Text: # 82 (130) 50.98% 22.44%
Background: # E7 (231) 90.59% 80.31%
Δ Delta: 07 0.97% 0.41% 1.2% -0.338% -0.05%

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
Test Patch:#
CE16_60_NP_5
TEXT: 7B   BKGND: DF
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.18:1 72.2% 64.43% 56.5% 56.0% 59.55% All Example Text: # 7B (123) 48.24% 19.85%
Background: # DF (223) 87.45% 74.27%
Δ Delta: 07 1.01% 0.38% 1.2% -0.372% -0.08%

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
Test Patch:#
CE16_60_NP_6
TEXT: 73   BKGND: D7
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.29:1 73.7% 65.18% 58.3% 56.2% 60.06% All Example Text: # 73 (115) 45.10% 17.10%
Background: # D7 (215) 84.31% 68.49%
Δ Delta: 12 1.51% 0.75% 1.9% 0.151% 0.52%

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
Test Patch:#
CE16_60_NP_7
TEXT: 6C   BKGND: CF
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.37:1 74.8% 65.47% 59.7% 55.7% 59.92% All Example Text: # 6C (108) 42.35% 14.87%
Background: # CF (207) 81.18% 62.97%
Δ Delta: 08 1.08% 0.29% 1.4% -0.464% -0.14%

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
Test Patch:#
CE16_60_NP_8
TEXT: 65   BKGND: C7
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.45:1 75.9% 65.71% 61.1% 55.2% 59.75% All Example Text: # 65 (101) 39.61% 12.82%
Background: # C7 (199) 78.04% 57.70%
Δ Delta: 08 1.12% 0.24% 1.4% -0.522% -0.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
Test Patch:#
CE16_60_NP_9
TEXT: 5D   BKGND: BF
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.58:1 77.5% 66.27% 63.3% 55.1% 60.16% All Example Text: # 5D (93) 36.47% 10.68%
Background: # BF (191) 74.90% 52.68%
Δ Delta: 13 1.62% 0.56% 2.1% -0.046% 0.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
Test Patch:#
CE16_60_NP_10
TEXT: 56   BKGND: B7
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.66:1 78.7% 66.34% 64.9% 54.5% 59.90% All Example Text: # 56 (86) 33.73% 8.97%
Background: # B7 (183) 71.76% 47.91%
Δ Delta: 08 1.18% 0.07% 1.6% -0.684% -0.26%

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
Test Patch:#
CE16_60_NP_11
TEXT: 4E   BKGND: AF
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.79:1 80.4% 66.68% 67.2% 54.2% 59.92% All Example Text: # 4E (78) 30.59% 7.23%
Background: # AF (175) 68.63% 43.39%
Δ Delta: 13 1.67% 0.34% 2.3% -0.265% 0.02%

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
Test Patch:#
CE16_60_NP_12
TEXT: 45   BKGND: A7
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.99:1 82.5% 67.21% 70.2% 54.3% 60.00% All Example Text: # 45 (69) 27.06% 5.51%
Background: # A7 (167) 65.49% 39.11%
Δ Delta: 19 2.11% 0.53% 3.0% 0.078% 0.08%

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
Test Patch:#
CE16_60_NP_13
TEXT: 3C   BKGND: 9F
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.17:1 84.5% 67.50% 73.2% 54.1% 59.87% All Example Text: # 3C (60) 23.53% 4.04%
Background: # 9F (159) 62.35% 35.07%
Δ Delta: 18 2.06% 0.29% 3.0% -0.170% -0.13%

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
Test Patch:#
CE16_60_NP_14
TEXT: 31   BKGND: 97
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.45:1 87.3% 68.08% 77.4% 54.5% 60.39% All Example Text: # 31 (60) 23.53% 4.04%
Background: # 97 (159) 62.35% 35.07%
Δ Delta: 29 2.73% 0.58% 4.2% 0.369% 0.51%

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
Test Patch:#
CE16_60_NP_15
TEXT: 24   BKGND: 8F
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.80:1 90.3% 68.60% 82.3% 54.9% 61.08% All Example Text: # 24 (49) 19.22% 2.58%
Background: # 8F (151) 59.22% 31.28%
Δ Delta: 35 3.03% 0.52% 4.9% 0.469% 0.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
Test Patch:#
CE16_60_NP_16
TEXT: 13   BKGND: 87
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.17:1 93.5% 68.88% 87.7% 55.3% 61.46% All Example Text: # 13 (36) 14.12% 1.30%
Background: # 87 (143) 56.08% 27.72%
Δ Delta: 37 3.16% 0.28% 5.4% 0.323% 0.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
Test Patch:#
CE16_60_NP_17
TEXT: 00   BKGND: 7F
TARGET
CONTRAST:
  60%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 5.24:1 95.5% 67.97% 91.4% 53.9% 58.59% All Example Text: # 00 (19) 7.45% 0.32%
Background: # 7F (135) 52.94% 24.40%
Δ Delta: 07 2.05% -0.91% 3.7% -1.346% -2.88%

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: 50%

Constant Contrast and NORMAL Polarity,
Starting at Level #FF With 8 Code Steps Per Patch

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: FF ⊙ CodeInc: 8 ⊙ Target Contrast: 50% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.48 ⊙ SftClp: 0.321 ⊙ FG clmp: 0.08 ⊙ BG clmp: 0.06 ⊙ MnAdj: 0.01 ⊙ FGoi: 0 ⊙ 0.005 ⊙ BGoi: -0.025 ⊙ 0
SAPC 6 Settings: Pol: NORMAL POLARITY ⊙ Mode: Constant Contrast ⊙ Target Contrast: 50% ⊙ 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
Test Patch:#
CE16_50_NP_1
TEXT: A7   BKGND: FF
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.41:1 60.7% 55.78% 43.6% 48.3% 49.64% All Example Text: # A7 (167) 65.49% 39.11%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 00 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
Test Patch:#
CE16_50_NP_2
TEXT: A0   BKGND: F7
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.44:1 61.5% 56.17% 44.4% 48.0% 49.65% All Example Text: # A0 (160) 62.75% 35.57%
Background: # F7 (247) 96.86% 93.17%
Δ Delta: 04 0.79% 0.39% 0.8% -0.303% 0.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.

SAPC-6 EVALUATION
Test Patch:#
CE16_50_NP_3
TEXT: 99   BKGND: EF
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.48:1 62.4% 56.54% 45.3% 47.6% 49.63% All Example Text: # 99 (153) 60.00% 32.21%
Background: # EF (239) 93.73% 86.61%
Δ Delta: 04 0.83% 0.38% 0.9% -0.320% -0.02%

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
Test Patch:#
CE16_50_NP_4
TEXT: 92   BKGND: E7
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.52:1 63.2% 56.91% 46.2% 47.3% 49.59% All Example Text: # 92 (146) 57.25% 29.03%
Background: # E7 (231) 90.59% 80.31%
Δ Delta: 04 0.87% 0.36% 0.9% -0.340% -0.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
Test Patch:#
CE16_50_NP_5
TEXT: 8A   BKGND: DF
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.59:1 64.7% 57.73% 47.8% 47.5% 50.15% All Example Text: # 8A (138) 54.12% 25.62%
Background: # DF (223) 87.45% 74.27%
Δ Delta: 07 1.44% 0.83% 1.6% 0.205% 0.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
Test Patch:#
CE16_50_NP_6
TEXT: 83   BKGND: D7
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.63:1 65.6% 58.06% 48.8% 47.1% 50.06% All Example Text: # 83 (131) 51.37% 22.82%
Background: # D7 (215) 84.31% 68.49%
Δ Delta: 04 0.95% 0.32% 1.0% -0.391% -0.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
Test Patch:#
CE16_50_NP_7
TEXT: 7C   BKGND: CF
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.68:1 66.6% 58.35% 50.0% 46.7% 49.93% All Example Text: # 7C (124) 48.63% 20.21%
Background: # CF (207) 81.18% 62.97%
Δ Delta: 05 1.00% 0.29% 1.1% -0.423% -0.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
Test Patch:#
CE16_50_NP_8
TEXT: 75   BKGND: C7
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.73:1 67.7% 58.59% 51.1% 46.2% 49.78% All Example Text: # 75 (117) 45.88% 17.76%
Background: # C7 (199) 78.04% 57.70%
Δ Delta: 05 1.04% 0.25% 1.2% -0.461% -0.15%

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
Test Patch:#
CE16_50_NP_9
TEXT: 6E   BKGND: BF
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.77:1 68.8% 58.79% 52.4% 45.7% 49.60% All Example Text: # 6E (110) 43.14% 15.49%
Background: # BF (191) 74.90% 52.68%
Δ Delta: 05 1.08% 0.19% 1.2% -0.506% -0.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
Test Patch:#
CE16_50_NP_10
TEXT: 66   BKGND: B7
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.86:1 70.5% 59.40% 54.4% 45.7% 50.00% All Example Text: # 66 (102) 40.00% 13.10%
Background: # B7 (183) 71.76% 47.91%
Δ Delta: 09 1.70% 0.61% 2.0% -0.004% 0.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
Test Patch:#
CE16_50_NP_11
TEXT: 5F   BKGND: AF
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.91:1 71.6% 59.44% 55.8% 45.1% 49.74% All Example Text: # 5F (95) 37.25% 11.19%
Background: # AF (175) 68.63% 43.39%
Δ Delta: 05 1.18% 0.04% 1.4% -0.629% -0.26%

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
Test Patch:#
CE16_50_NP_12
TEXT: 57   BKGND: A7
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.00:1 73.4% 59.85% 58.0% 44.9% 50.04% All Example Text: # 57 (87) 34.12% 9.21%
Background: # A7 (167) 65.49% 39.11%
Δ Delta: 09 1.80% 0.41% 2.2% -0.168% 0.31%

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
Test Patch:#
CE16_50_NP_13
TEXT: 50   BKGND: 9F
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.05:1 74.7% 59.66% 59.6% 44.1% 49.56% All Example Text: # 50 (80) 31.37% 7.64%
Background: # 9F (159) 62.35% 35.07%
Δ Delta: 04 1.27% -0.19% 1.6% -0.808% -0.49%

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
Test Patch:#
CE16_50_NP_14
TEXT: 47   BKGND: 97
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.18:1 77.1% 60.19% 62.8% 44.2% 49.61% All Example Text: # 47 (80) 31.37% 7.64%
Background: # 97 (159) 62.35% 35.07%
Δ Delta: 13 2.44% 0.53% 3.2% 0.092% 0.05%

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
Test Patch:#
CE16_50_NP_15
TEXT: 3E   BKGND: 8F
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.31:1 79.6% 60.45% 66.1% 44.1% 49.46% All Example Text: # 3E (71) 27.84% 5.87%
Background: # 8F (151) 59.22% 31.28%
Δ Delta: 13 2.42% 0.26% 3.3% -0.134% -0.15%

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
Test Patch:#
CE16_50_NP_16
TEXT: 34   BKGND: 87
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.47:1 82.4% 60.75% 70.1% 44.1% 49.52% All Example Text: # 34 (62) 24.31% 4.34%
Background: # 87 (143) 56.08% 27.72%
Δ Delta: 16 2.86% 0.30% 4.0% 0.017% 0.06%

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
Test Patch:#
CE16_50_NP_17
TEXT: 29   BKGND: 7F
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.63:1 85.5% 60.87% 74.7% 44.0% 49.54% All Example Text: # 29 (52) 20.39% 2.94%
Background: # 7F (135) 52.94% 24.40%
Δ Delta: 17 3.10% 0.12% 4.6% -0.057% 0.03%

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
Test Patch:#
CE16_50_NP_18
TEXT: 1C   BKGND: 77
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 3.81:1 88.9% 60.77% 80.0% 43.9% 49.43% All Example Text: # 1C (41) 16.08% 1.74%
Background: # 77 (127) 49.80% 21.31%
Δ Delta: 17 3.36% -0.11% 5.3% -0.160% -0.11%

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
Test Patch:#
CE16_50_NP_19
TEXT: 00   BKGND: 6F
TARGET
CONTRAST:
  50%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 4.18:1 94.1% 61.38% 88.8% 44.9% 48.85% All Example Text: # 00 (28) 10.98% 0.74%
Background: # 6F (119) 46.67% 18.44%
Δ Delta: 37 5.19% 0.62% 8.8% 1.003% -0.58%

48px Headline, 100 Weight Font





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

2

3

4

A 26px Headline in a Normal 400 Font

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

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

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

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

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

Test Panel: 40%

Constant Contrast and NORMAL Polarity,
Starting at Level #FF With 8 Code Steps Per Patch

SAPC-6 Values Generated: 10/28/2019

Test Generator Settings: BG sRGB: FF ⊙ CodeInc: 8 ⊙ Target Contrast: 40% ⊙ sLin: 2.218 ⊙ Scl: 1.618 ⊙ FGx: 0.45 ⊙ BGx: 0.39 ⊙ Add: 1.48 ⊙ SftClp: 0.321 ⊙ FG clmp: 0.08 ⊙ BG clmp: 0.06 ⊙ MnAdj: 0.01 ⊙ FGoi: 0 ⊙ 0.005 ⊙ BGoi: -0.025 ⊙ 0
SAPC 6 Settings: Pol: NORMAL POLARITY ⊙ Mode: Constant Contrast ⊙ Target Contrast: 40% ⊙ 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
Test Patch:#
CE16_40_NP_1
TEXT: B7   BKGND: FF
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.01:1 52.1% 47.86% 35.2% 39.3% 39.57% All Example Text: # B7 (183) 71.76% 47.91%
Background: # FF (255) 100.00% 100.00%
Δ Delta: 00 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
Test Patch:#
CE16_40_NP_2
TEXT: B0   BKGND: F7
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.02:1 52.8% 48.15% 35.8% 38.9% 39.58% All Example Text: # B0 (176) 69.02% 43.94%
Background: # F7 (247) 96.86% 93.17%
Δ Delta: 02 0.63% 0.29% 0.6% -0.334% 0.01%

48px Headline, 100 Weight Font





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

2

3

4

A 26px Headline in a Normal 400 Font

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

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

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

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

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

SAPC-6 EVALUATION
Test Patch:#
CE16_40_NP_3
TEXT: A9   BKGND: EF
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.04:1 53.4% 48.42% 36.4% 38.6% 39.56% All Example Text: # A9 (169) 66.27% 40.16%
Background: # EF (239) 93.73% 86.61%
Δ Delta: 02 0.66% 0.28% 0.6% -0.347% -0.01%

48px Headline, 100 Weight Font





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

2

3

4

A 26px Headline in a Normal 400 Font

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

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

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

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

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

SAPC-6 EVALUATION
Test Patch:#
CE16_40_NP_4
TEXT: A1   BKGND: E7
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.09:1 54.7% 49.24% 37.7% 38.8% 40.16% All Example Text: # A1 (161) 63.14% 36.06%
Background: # E7 (231) 90.59% 80.31%
Δ Delta: 05 1.30% 0.81% 1.2% 0.205% 0.59%

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
Test Patch:#
CE16_40_NP_5
TEXT: 9A   BKGND: DF
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.11:1 55.5% 49.50% 38.4% 38.4% 40.10% All Example Text: # 9A (154) 60.39% 32.67%
Background: # DF (223) 87.45% 74.27%
Δ Delta: 02 0.74% 0.26% 0.7% -0.376% -0.06%

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
Test Patch:#
CE16_40_NP_6
TEXT: 93   BKGND: D7
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.13:1 56.2% 49.74% 39.1% 38.0% 40.02% All Example Text: # 93 (147) 57.65% 29.47%
Background: # D7 (215) 84.31% 68.49%
Δ Delta: 02 0.78% 0.24% 0.8% -0.395% -0.08%

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
Test Patch:#
CE16_40_NP_7
TEXT: 8C   BKGND: CF
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.16:1 57.1% 49.96% 39.9% 37.6% 39.91% All Example Text: # 8C (140) 54.90% 26.45%
Background: # CF (207) 81.18% 62.97%
Δ Delta: 02 0.82% 0.22% 0.8% -0.416% -0.11%

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
Test Patch:#
CE16_40_NP_8
TEXT: 85   BKGND: C7
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.18:1 57.9% 50.15% 40.8% 37.2% 39.77% All Example Text: # 85 (133) 52.16% 23.60%
Background: # C7 (199) 78.04% 57.70%
Δ Delta: 02 0.86% 0.19% 0.8% -0.441% -0.14%

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
Test Patch:#
CE16_40_NP_9
TEXT: 7E   BKGND: BF
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.21:1 58.8% 50.30% 41.7% 36.7% 39.60% All Example Text: # 7E (126) 49.41% 20.94%
Background: # BF (191) 74.90% 52.68%
Δ Delta: 02 0.91% 0.15% 0.9% -0.470% -0.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
Test Patch:#
CE16_40_NP_10
TEXT: 76   BKGND: B7
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.26:1 60.5% 50.98% 43.3% 36.8% 40.03% All Example Text: # 76 (118) 46.27% 18.10%
Background: # B7 (183) 71.76% 47.91%
Δ Delta: 06 1.64% 0.68% 1.7% 0.060% 0.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
Test Patch:#
CE16_40_NP_11
TEXT: 6F   BKGND: AF
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.29:1 61.5% 51.02% 44.4% 36.2% 39.79% All Example Text: # 6F (111) 43.53% 15.81%
Background: # AF (175) 68.63% 43.39%
Δ Delta: 03 1.02% 0.04% 1.1% -0.547% -0.24%

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
Test Patch:#
CE16_40_NP_12
TEXT: 67   BKGND: A7
TARGET
CONTRAST:
  40%
METHODS WCAG Weber ModWeber Michelson MPCL SAPC-6 TEST COLORS Hex sRGB L* Y
Contrast: 2.35:1 63.3% 51.56% 46.3% 36.2% 40.14% All Example Text: # 67 (103) 40.39% 13.39%
Background: # A7 (167) 65.49% 39.11%
Δ Delta: 06 1.78% 0.54% 1.9% -0.038% 0.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