Click To Swap

All Font Sizes are in CSS px • Fonts Under 80px Shown With Colors at Actual Size & Weight
LEVEL 100 200 300
500 600 700
800 900


This version shows only score 4 fonts, and weights 200 thru 700.

APCA Visual Contrast Calculator 0.98G 4g

Generate a URL of This Color Pair

Please Enter Valid Colors First!

Click on a color patch next to "Text" or "Background" 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).

NEW: Using the 0.98G 4g Series Constants

Results will be slightly different from the 2020 version of APCA

IMPORTANT: This version is using a new set of constants that are better at predicting perceptually uniform contrast. The lookup table on this page has been rescaled to match the new constants, so functionally the usage is the same, though the contrast values will be different.

PROBLEMS? Try a "Forced Reload" on your browser, and/or clear the cache. For the public betas and experimental features, see the beta site: SAPC BETA. For comments or to report issues, please visit us on GitHub.

About This Month's Default Color Pair

The default pair of colors in the tool this month, to kick off the new year, is an orange #ea7439 background and a white text. This is the color like the infamous "orange button problem" that originally brought my attention to the math issues in the old contrast method. As you can see above, SAPC indicates a much more accurate contrast prediction based on perception.

A little different than the article, the color above #ea7439 and white fails WCAG2 completely, yet if you replace the white with black, WCAG2 math gives it a 7:1 (!!!) Here, with the perceptually accurate SAPC/APCA D series, it passes with white, but black fails (as it should) for all but very large fonts.

(If you came to the site with a different color pair in the URL, click here to load the demo colors.)

Click the white patch to the left of the text color entry to bring up a color picker that should update live (most browsers) and slide down to black to see the display update recommended minimum font sizes in real time. Dragging all the way to black, you'll see the tool indicates a lower contrast as per perception.

It should be noted that those with most forms of CVD prefer the white text as well. Take a screenshot and view it on our CVD simulator to see how contrast actually improves for white text on orange.

For a more in depth look at this, please see
this GitHub Gist with colorful examples.

Accessible Contrast

Relative to Font Size and Weight


The table below is current as of March 2021, and is adjusted for the new series G exponent package and SmoothScale™ scaling, otherwise, the table is essentially the same and matches the above automated font display.


Using the Lookup Table

Accompanies Algorithm • 0.98G-4g
Reference Font Weight
100 200 300 400
500 600 700
800 900
pt px APCA Contrast Value (Lc)
7.5 10 60 ©§™ 60 ©§™ 60 ©§™ 60 ©§™
7.88 10.5 60 ©§™ 60 ©§™ 60 ©§™ 60 ©§™
8.25 11 60 ©§™ 60 ©§™ 60 ©§™ 60 ©§™
9 12 75 ©§™ ×90 ×75 ×75 ×75
10.5 14 75 ©§™ 90 85 80 75
12 16 75 ©§™ 75 ©§™ 75 70 65 60 ×55
13.5 18 75 ©§™ 90 70 65 60 55 ×50 ×45
15.8 21 75 ©§™ 85 65 60 55 50 ×45 ×40
18 24 90 75 60 55 50 45 ×40 ×35
24 32 85 70 55 50 45 ×40 ×35 30
31.5 42 90 75 60 50 45 ×40 ×35 30 NT
42 56 85 70 55 45 ×40 ×35 30 NT NT
54 72 75 60 50 ×40 ×35 30 NT NT NT
72 96 70 55 45 ×35 30 NT NT NT NT
96 128 60 45 ×40 30 NT NT NT NT NT

About the colors in these tables: The colors in these tables are designed to be discernible by all forms of color vision deficiency.

  • The warning colors are grouped in a hue category that separates them from other colors for all CVD types.
  • Important color codes also have a symbol such as ×, as color should never be the only coding for important information.
  • Less important codes are directly related to the cell content, such as level 60, thus are self-symbolized.
  • This follows into the accompanying legend.

— PROHIBITED Except for Decorative Purposes
©§™ — May be used for Copyright/ByLine ONLY
× — Do Not Use for Body Text (Blocks or Columns)
Weight 100 Fonts Should be Avoided
> — Minimum Contrast for Text
APCA 75 — Similar to WCAG 7∶1 for BG #ddd
APCA 60 — Similar to WCAG 4.5∶1 for BG #d0d0d0
APCA 45 — Similar to WCAG 3∶1 for BG #ccc

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 120 in "old" APCA numbers, which now is approximately 90Lc. 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 Lc60 (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.


sRGB gamma target. Adjust the monitor so that the targets appears uniform (i.e. the thick border looks the same as the inner grid). Note also it is important that the image be at 100% and not scaled - make sure your browser says "actual size".
Background Target Value #22 (d)
Background Target Value #33 (d)
Background Target Value #44 (d)
Background Target Value #55 (d)
Background Target Value #80 (d)
Background Target Value #a0 (d)