APCA VISUAL CONTRAST DEMO
SAPC/APCA Visual Contrast — Beta 0.97gGenerate 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).
Relative to Font Size and Weight
- Cross index reference font size (in CSS px) to CSS weight.
- Reference fonts for comparison include Helvetica Neue, Helvetica, K2D, Fira Sans, Kanit, and Arial.
- APCA Contrast Percentage must meet or exceed the value listed.
- For light text on a dark background the APCA tool will show a negative percentage. Simply use the absolute (positive) value. For example, if the APCA value is -58Lc, use 58Lc.
- A ⊘ indicates that a larger font size (or heavier font weight) must be used.
|APCA CONTRAST LOOKUP TABLE|
|FontSize||Reference Font Weight|
- Values shown are for common sans-serif fonts (e.g., Helvetica, Arial, Verdana, Calibri, Trebuchet).
- Many serif fonts should use values for the row above (e.g., Times, Georgia, Cambria, Courier).
- Decorative, unusual, and very thin fonts should be avoided for columns of body text.
- Due to the vast variety of font designs, designers should visually compare an unusual font to a standard font such as Helvetica, using the size and weight of Helvetica that most closesly matches the appearance of the tested font as a guide.
- Designers are cautioned that bypassing default font smoothing can drastically reduce contrast for small or thin fonts. For instance, the use of "webkit-font-smoothing: antialiasing" is strongly discouraged.
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.