APCA VISUAL 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 LEVEL | 100 | 200 | 300 Light |
400 Normal |
500 | 600 | 700 Bold |
800 | 900 | ||||
| Preferred | |||||||||||||
| SCORE 4 | |||||||||||||
| SCORE 3 | |||||||||||||
| SCORE 2 | |||||||||||||
| SCORE 1 | |||||||||||||
|
UPPER XXXXXXXXXXX
LOWER XXXXXXX
|
|||||||||||||
SIMPLE VERSION for CONTENT CREATORS
This version shows only the high score 4 fonts, and weights 300 thru 700.
Click for Full Font MatrixSAPC/APCA Visual Contrast Calculator
Beta 0.98e evaluation • d12e
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).
Using the 0.98e d12e 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. This is the SAPC version, which is part of the research project, and may at times be slightly erratic due to updates — if you are having problems usually a forced reload will fix.If you're having any issues today, try that version. 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.
Accessible Contrast
Relative to Font Size and Weight
RESCALED FOR NEW EXPONENTS (D12d)
The table below is current as of January 20,2021, and is adjusted from the old table for the new series D exponent package and SmoothScale™ scaling, otherwise, the table is essentially the same and matches the above automated font display.
GENERAL GUIDELINES on LEVELS
- 100 • For extremely thin fonts, also 100 is a suggested maximum for very large and bold fonts, and large areas of color.
- 80 • Preferred level for columns of body text. Also, can be used for any text where readability is important.
- 60 • The minimum level recommended for content text, that is, text you want people to read. "Sort of" like the old 4.5:1 in WCAG2.
- 40 • The minimum level for larger text such as headlines, and large text that should be readably fluently. "Sort of" like the old 3:1 in WCAG2.
- 20 • The absolute minimum for any text, including text for spot reading. Large non-text content can be below this however.
- 10 • The absolute minimum for any non-text that needs to be discernible, but does not include fine details, such as buttons. Designers should treat anything below this level as invisible, as it will not be visible for many users.
Using the Lookup Table
- 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, however, values may be interpolated between the two closest values.
- 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 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 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 |
- Values shown are for common sans-serif fonts (e.g., Helvetica, Arial, Verdana, Montserrat, Roboto, Calibri, Trebuchet).
- Many serif fonts should use values for the row above (e.g., Times, Georgia, Cambria, Courier), and especially should be compared in terms of x-height.
- 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 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.
SANS SERIF FONT SAMPLES ←scrollable→
Sans Serif Font Selectors § Current: Montserrat
Notes: K2D does not have a 900wt, and the Helvetica 600wt is condensed.