APCA CONTRAST CALCULATOR

TEXT COLOR APCA
CONTRAST

Click To Swap
BACKGROUND


All Font Sizes are in CSS px • Fonts Under 80px Shown With Colors at Actual Size & Weight
SCORE 100 200 300 400
Normal
500 600 700
Bold
800 900
Preferred
SCORE 4
SCORE 3
SCORE 2
SCORE 1

FULL FONT MATRIX VERSION

This version shows fonts for all score levels and weights

Click for Simple Version

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

RESCALED FOR NEW EXPONENTS (G 4g)

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.

GENERAL GUIDELINES on LEVELS

Using the Lookup Table

APCA CONTRAST LOOKUP TABLE
Reference Font Weight
Font Size 100 200 300 400
Normal
500 600 700
Bold
800 900
pt px APCA Contrast Value (Lc)
7.5 10 ©§™ ©§™ ©§™ ©§™
8.3 11 ©§™ ©§™ ©§™ ©§™
9 12 ©§™ ©§™ ×100 ×90 ×80
10.5 14 ©§™ 100 90 80 60 ×60
12 16 100 90 80 60 55 ×50 ×50
13.5 18 90 80 60 55 50 ×40 ×40
18 24 100 80 60 55 50 40 38 ×35
22.5 30 90 70 55 50 40 38 35 30
27 36 80 60 50 40 38 35 30 25
36 48 100 70 55 40 38 35 30 25 >20
45 60 90 60 50 38 35 30 25 >20 >20
54 72 80 55 40 35 30 25 >20 >20 >20
72 96 70 50 35 30 25 >20 >20 >20 >20
90 120 60 40 30 25 >20 >20 >20 >20 >20

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 80, thus are self-symbolized.
  • This follows into the accompanying legend.

APCA CONTRAST COLOR CODES
— 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 80 — Similar to WCAG 7∶1 for BG #ddd and lighter
APCA 60 — Similar to WCAG 4.5∶1 for BG #d0d0d0 and lighter
APCA 40 — Similar to WCAG 3∶1 for BG #ccc and lighter


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.

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

SANS SERIF FONT SAMPLES ←scrollable→

Lc10 & 96px9 NonText ☎★♜♦⇪
LLc 20
Lc20 & 96px600 II 72px 700 Ax II 60px800 II 48px 900wt ATOMgap
L Lc 30
Lc30 & 96px 400 II 72px 500 Ax II 60px600 II 48px 700wt ATOMgap II 36px 800wt ATOMgap II 30px 900wt ATOMgap
L Lc 40
Lc40 & 72px 300wt Ax II 48px 400wt ATOMsz II 36px 500wt ATOM II 30px 600wt IcyATOMsizedgap Axed II 24px 700wt IcyATOMsizedgap Ax II 18px 800wt IcyATOMsized II 18px 900wt IcyATOMsizedgap
L Lc 50
Lc50 & 60px 300wt ATOMs II 36px 400wt ATOMsized gap II 30px 500wt ATOMsize II 24px 600wt IcyATOMsizedgap ATOMgap 12345 II 18px 700wt IcyATOMsizedgap ATOMgap 12345 II 16px 800wt IcyATOMsizedgap II 16px 900wt IcyATOMsizedgap
L Lc 60
Lc60 & 60px 200wt ATOMs II 36px 300wt ATOMsizedgaps II 24px 400wt ATOMsized gap II 18px 500wt IcyATOMsizedgap The Lazy Brown Fox Slept Instead II 16px 600wt ATOM The Lazy Brown Fox Slept Instead II 14px 700wt ATOMsized II 14px 800wt ATOMsized II 14px 900wt ATOMsized
L Lc 80
Lc 80 & 72px 100wt Ax II 36px 200wt ATOM sized gap II 24px 300wt ATOMsized gap II 18px 400wt IcyATOMsizedgap The Lazy Brown Fox Slept Instead II 16px 500wt ATOM The Lazy Brown Fox Slept Instead II 14px 600wt IcyATOMsizedgap
L Lc 100
Lc100 & 48px 100wt ATOMsizedga II 24px 200wt Icy ATOM sized gap 1234567890 II 18px 300wt Icy ATOM sized gap 1234567890 II 14px 400wt Icy ATOM sized gap 1234567890 The Lazy Brown Fox Slept Instead

Sans Serif Font Selectors § Current: Montserrat

Notes: K2D does not have a 900wt, and the Helvetica 600wt is condensed.


SERIF FONT SAMPLES

Lc20 & 96px600 II 72px 700 Ax II 60px800 II 48px 900wt ATOMgap
Lc 30
Lc30 & 96px 400 II 72px 500 Ax II 60px600 II 48px 700wt ATOMgap II 36px 800wt ATOMgap II 30px 900wt ATOMgap
Lc 40
Lc 40 & 72px 300wt Ax II 48px 400wt ATOMsz II 36px 500wt ATOM II 30px 600wt IcyATOMsizedgap Axed II 24px 700wt IcyATOMsizedgap Ax II 18px 800wt IcyATOMsized II 18px 900wt IcyATOMsizedgap
Lc 50
Lc 50 & 60px 300wt ATOMs II 36px 400wt ATOMsized gap II 30px 500wt ATOMsize II 24px 600wt IcyATOMsizedgap ATOMgap 12345 II 18px 700wt IcyATOMsizedgap ATOMgap 12345 II 16px 800wt IcyATOMsizedgap II 16px 900wt IcyATOMsizedgap
Lc 60
Lc60 & 60px 200wt ATOMs II 36px 300wt ATOMsizedgaps II 24px 400wt ATOMsized gap II 18px 500wt IcyATOMsizedgap The Lazy Brown Fox Slept Instead II 16px 600wt ATOM The Lazy Brown Fox Slept Instead II 14px 700wt ATOMsized II 14px 800wt ATOMsized II 14px 900wt ATOMsized
Lc 80
Lc80 & 72px 100wt Ax II 36px 200wt ATOM sized gap II 24px 300wt ATOMsized gap II 18px 400wt IcyATOMsizedgap The Lazy Brown Fox Slept Instead II 16px 500wt ATOM The Lazy Brown Fox Slept Instead II 14px 600wt IcyATOMsizedgap
Lc 100
Lc100 & 48px 100wt ATOMsizedga II 24px 200wt Icy ATOM sized gap 1234567890 II 18px 300wt Icy ATOM sized gap 1234567890 II 14px 400wt Icy ATOM sized gap 1234567890 The Lazy Brown Fox Slept Instead

Serif Font Selectors § Current: Trirong



MONITOR ADJUSTMENT AFFECTS PERCEIVED CONTRAST

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)