APCA Contrast Calculator

⇦ Click To Swap ⇨

All font sizes are in CSS px • Reference font shown with colors at actual size & weight

USAGE 200 300
500 600 700

Generate a URL of This Color Pair

Accessible Contrast

Relative to Font Size and Weight

APCA reports lightness contrast as an Lc value from Lc 0 to Lc 106 for dark text on a light background, and Lc 0 to Lc -108 for light text on a dark background (dark mode). The minus sign merely indicates negative contrast, which means light text on a dark background.

For resources, articles, and documentation,
please visit our page at GitHub.

Please Enter Valid Colors First!

QUICK START for using this tool.

INPUT BOXES: You can enter a CSS color name or a 3 to 6 character hex value with or without a #, or as rgb() using numbers or percentages, with or without the 'rgb' and parenthesis. There is also a special shortcut for grey: enter only 1-3 rgb digits followed by a comma or percent symbol, or two hex digits (no comma) and they will be expanded. for instance, #fa becomes #fafafa.

POLARITY: The APCA is polarity aware, this means that it recognizes the difference of dark text on a light background vs light text on a dark background. Therefore it is important to enter the text/icon color or background color in the correct input.

SWAP COLORS: You can easily swap the text and background color by clicking the big ampersand (&) in the middle.

ALPHA: The text color can have an alpha, which will be blended with the background before calculating contrast. NOTE: if you swap the text and background colors, the text color will be blended and the alpha set to 1 before swapping to the background. The hex and rgb() displayed over the input box always shows the final blended color.

URL: You can create a URL of the colors to share. Any alpha is blended before creating the URL.

COLOR SLIDERS: These are presently using HSL, which is not perceptually uniform. We are working on incorporating perceptually uniform sliders soon.

BROWSER PICKER: The browser's default picker is available by clicking on the example color square next to the input boxes.

APCA Guidelines: Bronze Level


These general levels are appropriate for use without reference to the lookup table (Bronze level conformance). For Silver level conformance, see the lookup table which improves accuracy and allows for greater flexibility.

  • Lc 90 • Preferred level for fluent text and columns of body text with a font no smaller than 18px/weight 300 or 14px/weight 400 (normal), or non-body text with a font no smaller than 12px. Also a recommended minimum for extremely thin fonts with a minimum of 24px at weight 200. Lc 90 is a suggested maximum for very large and bold fonts (greater than 36px bold), and large areas of color.
  • Lc 75 • The minimum level for columns of body text with a font no smaller than 24px/300 weight, 18px/400, 16px/500 and 14px/700. This level may be used with non-body text with a font no smaller than 15px/400. Also, Lc 75 should be considered a minimum for larger for any larger text where readability is important.
  • Lc 60 • The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: no smaller than 48px/200, 36px/300, 24px normal weight (400), 21px/500, 18px/600, 16px/700 (bold). These values based on the reference font Helvetica. To use these sizes as body text, add Lc 15 to the minimum contrast.
  • Lc 45 • The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines, and large text that should be fluently readabile but is not body text. This is also the minimum for pictograms with fine details, or smaller outline icons, , no less than 4px in its smallest dimension.
  • Lc 30 • The absolute minimum for any text not listed above, which means non-content text considered as "spot readable". This includes placeholder text and disabled element text, and some non-content like a copyright bug. This is also the minimum for large/solid semantic & understandable non-text elements such as "mostly solid" icons or pictograms, no less than 10px in its smallest dimension.
  • Lc 15 • The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons, and is no less than 15px in its smallest dimention. This may include dividers, and in some cases large buttons or thick focus visible outlines, but does not include fine details which have a higher minimum. Designers should treat anything below this level as invisible, as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site.

These define the basic minimum levels, what you might think of as A/AA as in the old WCAG 2. For the equivelent to AAA, simply increase the contrast values by Lc 15.

APCA Font Table: Silver Level


The table below is current as of May 28, 2022.

  • Cross index reference font size (in CSS px) to CSS weight.
  • Reference fonts for comparison include Barlow, Helvetica Neue, Helvetica, Fira Sans, Kanit, and Arial.
  • APCA Contrast Lc value 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 Lc value. Simply use the absolute (positive) value. For example, if the APCA value is Lc-58, use Lc 58.
  • Aindicates that a larger font size (or heavier font weight) must be used.
  • Cells marked with may be used for body text. The the body text cells outlined in yellow, add lc 15.
Sorted by Font Size
Beta 0.1.7 (G) • Revised May 27, 2022
Reference Font Weight
100 200 300 400
500 600 700
800 900
pt px APCA Contrast Value (Lc)
9 12 ®© ®© ®© ®©
10.5 14 ®© 100 100 90 75
11.25 15 ®© 100 90 75 70
12 16 ®© 90 75 70 60 60
13.5 18 ®© 100 75 70 60 55 55 55
15.75 21 ®© 90 70 60 55 50 50 50
18 24 ®© 75 60 55 50 45 45 45
21 28 100 70 55 50 45 43 43 43
24 32 90 65 50 45 43 40 40 40
27 36 75 60 45 43 40 38 38 38
31.5 42 100 70 55 43 40 38 35 35 35
36 48 90 60 50 40 38 35 33 33 33
45 60 75 55 45 38 35 33 30 30 30
54 72 60 50 40 35 33 30 30 30 30
72 96 50 45 35 33 30 30 30 30 30
Copyright © 2022 by Myndex Research. All Right Reserved.

The vertical line between weights 500 and 600 indicates the point that a user agent switches from "normal" to "bold" if the intermediate weights are not available.

APCA Contrast Legend
— Prohibited Except for Decorative Purposes
Under Lc 30 is for non-text only.
©§™ — Placeholder/Disabled/Copyright ONLY
Weight 100 Fonts Should be Avoided
To use as Block/Body Text, ADD Lc 15
Block/Body Text Zone—okay minimum values
APCA Lc 90 — "Similar" to ISO 10∶1
APCA Lc 75 — "Similar" to WCAG 7∶1
APCA Lc 60 — "Similar" to WCAG 4.5∶1
APCA Lc 45 — "Similar" to WCAG 3∶1
> 30 — Minimum Contrast for Any Text
Copyright © 2022 by Myndex Research. All Right Reserved.

Sorted by Contrast Lc Value
Beta 0.1.7 (G) • Revised May 27, 2022
Reference Font Weight
Contrast 100 200 300 400
500 600 700
800 900
Lc Value Font Size in CSS px
Lc 100 42 26.5 18.5 15 14.5 13.5 13 16 18
Lc 95 45 28 19.5 15.5 15 14 13.5 16 18
Lc 90 48 32 21 16 15.5 14.5 14 16 18
Lc 85 52 34.5 22 16.5 15.6 14.6 14 16 18
Lc 80 56 38.3 23 17.3 15.8 14.8 14 16 18
Lc 75 60 42 24 18 16 15 14 16 18
Lc 70 64 44 28 19.5 18 16 14.5 16 18
Lc 65 68 46 32 21.7 19 17 15 16 18
Lc 60 72 48 42 24 21 18 16 16 18
Lc 55 80 60 48 28 24 21 18 18 18
Lc 50 96 72 60 32 28 24 21 21 21
Lc 45 108 96 72 42 32 28 24 24 24
Lc 40 120 108 96 60 48 42 32 32 32
Lc 35 NT 120 108 96 72 60 48 48 48
Lc 30 NT NT 120 108 108 96 72 72 72
Lc 25 NT NT NT 120 120 108 96 96 96
Copyright © 2022 by Myndex Research. All Right Reserved.
  • 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 fluently readable text and especially 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 the use of "-webkit-font-smoothing: antialiasing" is strongly discouraged. Bypassing default antialiasing in this way can drastically reduce contrast for small or thin fonts.

Notes on Font Size & Weight

  • Font sizes assume an x-height ratio of at least 0.5 (0.52 or more preferred).
    • I.e. the vertical size of the lower case x is at least one-half the font size or larger, as rendered to screen.
    • The reference font x-height ratio is 0.5, and it is preferential to use an x-height of 0.52 to 0.57
  • Font weight is based on highly standardized reference fonts such as Helvetica or Arial.
  • "px" means the CSS reference px, not device pixels. The reference px is defined as 1.278 arc minutes of visual angle.
  • When selecting, or testing, a font size, simply determine the font's x-height ratio, and the amount it needs to be increased.
    • For instance, Times New Roman has an x-height ratio of 0.45, so it needs to be increased about 16% in size relative to the reference font.
    • Therefore, if the reference font is set at 1em, Times should be set at 1.16em to be equivalent.
    • If Times is the main document font, this adjustment can be set for the entire document using the root element via the html selector.
      • html { font-size: 18.6px } sets the entire documents rem (root em) such that 1rem = 18.6px
  • For font weight, simply set a line of test text in the reference Arial or Helvetical at 400 weight and then below that the same text text in the new font. Try different weights to find the closest match.
    • As an example, the font Raleway 400 weight is closest to Helvetica 300.
    • So, always add 100 in weight to Raleway to be equivelent.
    • See this discussion answer for more.
  • Consider the font design as well as the basic size and weight, and the potential impact on readability. See this PDF "Evaluating Fonts" for general guidance and a comparison of a few dozen fonts for accessibility.

WCAG 2 compatibility

To use the APCA tool for minimum Bridge-PCA conformance (backwards compatible for WCAG 2):

  • 90 • Lc 90 replaces WCAG 7:1
  • 75 • Lc 75 replaces WCAG 4.5:1
  • 60 • Lc 60 replaces WCAG 3:1
  • WoB • For light text on a darker background, when the text is lighter than #eee , increase the minimum value by Lc 10. The dedicated Bridge-PCA tool takes this into account automatically.

NEW!! If you need to be backwards compatible, the new Bridge-PCA can help! Bridge PCA is backwards compatible with WCAG 2, shows contrast as both Lc value, and the traditional WCAG 2ratios, but with a twist: The "ratios" shown on Bridge PCA are perceptually accurate!

This is possible because Bridge PCA uses APCA technology to generate "ratios" that look and feel very much like those of WCAG 2.

Accessible Perceptual Contrast

APCA is a new method for calculating and predicting readability contrast. APCA is a part of the larger S-Luv Accessible Readability Color Appearance Model known as SARCAM (formerly SAPC). These models are specifically related to color appearance on self-illuminated RGB computer displays & devices, and also for modeling accessible user needs, with a focus on readability.

Lightness contrast Lc

The APCA generates a contrast value based on a color pair, and this value is perceptually based: that is, regardless of how light or dark the colors are, a contrast value of Lc 60 represents the same perceived readability contrast. This is absolutely not the case with WCAG 2.x, which far overstates contrast for dark colors to the point that 4.5:1 can be functionally unreadable when a color is near black. As a result, WCAG 2.x contrast cannot be used for guidance designing "dark mode".

The APCA contrast value is perceptually uniform, and pivots near the point where the CS curve flattens due to contrast constancy. Halving or doubling the APCA value relates to a halving or doubling of the perceived contrast. There is a subtle weighting for higher contrasts to smaller, thinner fonts.

Different Uses, Different Contrasts

The APCA has a set of levels related to use cases — for instance, Lc 90 is preferred and Lc 75 is the minimum for body text. This makes for an easy way to use ACPA, very similar to 1.4.3 in terms of ease of use.

The APCA also has an optional lookup table to associate font size and weight to the readability contrast (Lc value). The lookup tables allow for even greater accuracy and therefore greater flexibility in design.

Failing Pass/Fail

A key takeaway is that a strict pass/fail with a blanket contrast ratio is not instructive as a guideline, and does not necessarily solve a given user need. In fact, user needs when it comes to contrast are conflicting—what is good for one can be harmful to another. This is even true of font size.

This points to the importance of real user personalization, an area where the technology is literally missing (and a work in progress). For the guidelines though, we can set ranges for targets and expectations toward making the web readable for all.

The Science Behind SAPC/APCA

Accessible 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 Lc 90. 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.

Links to Resources and Articles

  • Better reading on the web published in UX Collective, this article discusses and demonstrates the problems with automated testing and WCAG 2 contrast.

  • Please Stop Using Grey Text on Tangled Web, debunking one of the worst myths about design contrast.

  • What's Red & Black & Also Not Read? Do the WCAG 2 Contrast Guidelines Help Color Vision Issues? The answer may surprise you.

  • A Contrast of Errors A look into the history of the WCAG 2 contrast guidelines, and a discussion of the proposed replacement, the APCA (Advanced Perceptual Contrast Algorithm).

GitHub Documentation and Articles


  • Why APCA? A brief overview of WCAG_2 contrast issues and how APCA solves them.

NEW! Let's Flip for Color!

If you want your text to be either black or white if the user selects some random color, just where is that inflection point? Hint: It's NOT 18% Y.


  • SAPC-APCA The main repository for the research and development of the new contrast method and algorithm being developed for the W3/AGWG accessibility guidelines, and for other standards and applications. This is the primary source for all things related to SAPC and APCA.
  • APCA W3 This is the specific version of the APCA licensed to the W3 for the use in web accessibility guidelines such as the WCAG_3 guidelines.
  • Bridge PCA BPCA is designed as a drop-in replacement for WCAG_2 contrast that is backwards compatible, but using APCA technology, to "bridge" toward the future of readability contrast.
  • Fancy Font Flipping Fancy Font Flipping is a demo I first put up in CodePen to illustrate the issues with flipping the text color from black to white based on a given estimated background luminance.
  • Color Parsley lightweight and versatile color parsing functions.

APCA W3 is in public beta

We'd love to hear your comments, questions, or concerns—come visit our GitHub repo and let us know in the discussions forum .

Monitor gamma check

sRGB gamma target. Ideally the targets appear uniform (i.e. the thick border looks the same as the inner grid). It is important that the image be at 100% and not scaled - make sure your browser says "actual size".

These gamma targets require a 2:1 retina display.

Target #96 (2.6)
Target #c3 (2.6)
Target #e4 (2.6)
Target #93 (2.5)
Target #c1 (2.5)
Target #e3 (2.5)
Target #8f (2.4)
Target #BF (2.4)
Target #e2 (2.4)
Target #88 (2.2)
Target #ba (2.2)
Target #e0 (2.2)