APCA VISUAL CONTRAST DEMO

BACKGROUND COLOR

TEXT COLOR

EXAMPLE
&
Click To Swap
SAPC/APCA
CONTRAST
Lc "cookie"
      

SAPC/APCA Visual Contrast — Beta 0.97g

Generate a URL of This Color Pair

Click on a color patch above to use the HTML5 color-picker (modern browsers). Otherwise enter color values in the text-box as a three or six digit hex value, the '#' is not necessary. Other valid entries are integer rgb(r,g,b) or an HTML color name (see bottom of page for list).

This is the APCA version. For the SAPC research project, see SAPC link. For comments or to report issues, please visit us on GitHub.

Accessible Contrast

Relative to Font Size and Weight

APCA CONTRAST LOOKUP TABLE
FontSize Reference Font Weight
Size
pt
Size
px
100 200 300 400
Normal
500 600 700
Bold
800 900
7.5 10
8.3 11 120 120 120 120
9 12 120 110 100 100 100
10.5 14 120 110 100 80 80 80
12 16 120 110 100 80 75 70 70
13.5 18 110 100 80 75 70 60 60
18 24 120 100 80 75 70 60 58 55
22.5 30 110 90 75 70 60 58 55 50
27 36 100 80 70 60 58 55 50 45
36 48 120 90 75 60 58 55 50 45 40
45 60 110 80 70 58 55 50 45 40 40
54 72 100 75 60 55 50 45 40 40 40
72 96 90 70 55 50 45 40 40 40 40
90 120 80 60 50 45 40 40 40 40 25
108 144 75 55 45 40 40 40 40 25 25
144 192 70 50 40 40 40 40 25 25 25

The Science Behind SAPC/APCA

Advanced Perceptual Contrast Algorithm

For a brief overview and explanation of the SAPC math and methods, take a look at Experiment Results CE17, one of the polarity experiments. The discussion includes graphs comparing SAPC to other contrast methods, and related discussions.

Also, as spatial frequency is one of the most important predictors of contrast perception and readability, see Experiment Results CE14-weight for further explanations.

The "TL;DR" is: like all human perceptions, color and contrast are extremely context dependent. In terms of readability, there is a "critical contrast" level, and that level is more dependent on spatial frequency, which relates to font weight, than a given color pair.

To accurately predict contrast perception, the Spatial (font weight & size), color (perceived lightness difference between text and background), and context (ambient light, surroundings, intended purpose of the text) all need to be taken into account.

What is the Contrast of This Page?

Most of this page is set at over 120Lc. Large headlines are about 122Lc, and the text you are reading now is set at 132Lc. The less important text-block in the footer is about -98Lc. To help differentiate between dark text on a light background and light text on dark, the math reports the latter as a negative value. But for purposes of the font lookup table, ignore the minus sign and use the absolute value.

      

Minimum Type Size

Examples for Various Levels

Here are a set of type samples using the above selected colors. The first is the standard sans-serif Helvetica Neue, a very common font that was used as the reference font for many of the perception experiments. The initial serif font sample shown is Trirong. The samples here (other than Helvetica) can be found on Google fonts.

On the left of each sample line is the level, as in APCA contrast Lc80 (positive or negative). This (and the above chart) are based on the standard font "Helvetica" but as should be clear when choosing other fonts, the variation in weight is enough to change perceived contrast. You can scroll the samples left to see smaller text.

At the end of each sample section you can select alternate test fonts. You'll notice there are substantial differences in font weight, especially noticeable in the very light and thin fonts. Designers and developers should be aware of these differences, as adjust to compensate for differences relative to a reference standard font.

It is further advised to test fonts on various major browsers, as each browser renders fonts differently, especially thin fonts and fonts with poor hinting. For instance, the sample font "JOST" renders differently in Safari, Chrome, Opera, and Firefox. On MacOS, while Safari and Firefox maintain some legibility in the very thin 100 weight Jost, the thin versions of Jost literally disappear in Chrome and Opera.

Conformance Rating Color Codes
Score 4Score 3Score 2Score 1Score 0

SANS SERIF FONT SAMPLES

Lc25 & 96px NonText ☎★♜♦⇪
L
Lc40 & 72px 700wt Axediag II 60px 800wt Axediag II 48px 900wt Axediag
L
Lc50 & 96px 400wt Axediag II 72px 500wt Axediag II 60px 600wt Axediag II 48px 700wt Axediag II 36px 800wt Axediag II 30px 900wt Axediag
L
Lc60 & 72px 300wt Axediag II 48px 400wt Axediag II 36px 500wt Axediag II 30px 600wt Axediag II 24px 700wt Axediag II 18px 800wt Axediag II 18px 900wt Axediag
L
Lc70 & 60px 300wt Axediag II 36px 300wt Axediag II 30px 500wt Axediag II 24px 600wt Axediag II 18px 700wt Axediag II 16px 800wt Axediag II 16px 900wt Axediag
L
Lc80 & 60px 200wt Axediag II 36px 300wt Axediag II 24px 400wt Axediag II 18px 500wt Axediag II 16px 600wt Axediag II 14px 700wt Axediag II 14px 800wt Axediag II 14px 900wt Axediag
L
Lc100 & 72px 100wt Ax II 36px 200wt Axediag II 24px 300wt Axediag II 18px 400wt Axediag II 16px 500wt Axediag II 14px 600wt Axediag
L
Lc120 & 48px 100wt Axediag II 24px 200wt Axediag II 16px 300wt Axediag II 14px 400wt Axediag

Sans Serif Font Selectors § Current: HelveticaNeueLT


SERIF FONT SAMPLES

Lc40 & 72px 700wt Axediag II 60px 800wt Axediag II 48px 900wt Axediag
Lc 50
Lc50 & 96px 400wt Axediag II 72px 500wt Axediag II 60px 600wt Axediag II 48px 700wt Axediag II 36px 800wt Axediag II 30px 900wt Axediag
Lc 60
Lc60 & 72px 300wt Axediag II 48px 400wt Axediag II 36px 500wt Axediag II 30px 600wt Axediag II 24px 700wt Axediag II 18px 800wt Axediag II 18px 900wt Axediag
Lc 70
Lc70 & 60px 300wt Axediag II 36px 300wt Axediag II 30px 500wt Axediag II 24px 600wt Axediag II 18px 700wt Axediag II 16px 800wt Axediag II 16px 900wt Axediag
Lc 80
Lc80 & 60px 200wt Axediag II 36px 300wt Axediag II 24px 400wt Axediag II 18px 500wt Axediag II 16px 600wt Axediag II 14px 700wt Axediag II 14px 800wt Axediag II 14px 900wt Axediag
Lc 100
Lc100 & 72px 100wt Ax II 36px 200wt Axediag II 24px 300wt Axediag II 18px 400wt Axediag II 16px 500wt Axediag II 14px 600wt Axediag

Serif Font Selectors § Current: Trirong


MONITOR ADJUSTMENT AFFECTS PERCEIVED CONTRAST

sRGB gamma target. Adjust the monitor so that the square appears uniform (i.e. not pyramids). Note also it is important that the image be at 100% and not scaled - make sure your browser says "actual size". If the square "looks like a pyramid" that indicates your monitor is not calibrated to the sRGB transfer curve (sometimes called gamma).