APCA Contrast Calculator

TEXT / ICON COLOR			SAMPLE & ⇦ Click To Swap ⇨	BACKGROUND COLOR
Click			SAMPLE & ⇦ Click To Swap ⇨				Click
			CONTRAST
All font sizes are in CSS px • Reference font shown with colors at actual size & weight
USAGE	200	300 Light	400 Normal	500	600	700 Bold

Create a shareable URL of these colors

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

CONFORMANCE: BRONZE LEVELS (preliminary)

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

CONFORMANCE: SILVER LOOKUP TABLE (prelim)

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 L^c 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 L^c value. Simply use the absolute (positive) value. For example, if the APCA value is L^c-58, use L^c 58.
A ⊘ indicates 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.

APCA FONT TO CONTRAST TABLE
Sorted by Font Size
Beta 0.1.7 (G) • Revised May 27, 2022
		Reference Font Weight
Font Size		100	200	300	400 Normal	500	600	700 Bold	800	900
pt	px	APCA Contrast Value (L^c)
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.

APCA CONTRAST TO FONT TABLE
Sorted by Contrast Lc Value
Beta 0.1.7 (G) • Revised May 27, 2022
	Reference Font Weight
Contrast	100	200	300	400 Normal	500	600	700 Bold	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
^Lc 20	NT	NT	NT	NT	NT	NT	NT	NT	NT
^Lc15	NT	NT	NT	NT	NT	NT	NT	NT	NT
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.
EXAMPLE:
- 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 L^c

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 L^c 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

GitHub Documentation and Articles

Contrast

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.

Part I: Orange You Wondering About Contrast? Answering some contrast questions, and demonstrating a real solution to the infamous orange conundrum.
Part II: The Lighter Side of Dark Backgrounds An article comparing some parts of APCA with the old WCAG 2 contrast methods, demonstrating how WCAG_2 contrast does not help color vision types.
Part III: WCAG 2 vs APCA Contrast Shootout Answering some recent questions regarding APCA, with comparisons and examples of the old (WCAG 2 1.4.3) and the future WCAG 3 / APCA.

Color

Part I: For The Luv of Color An article comparing CIE Lab and Luv colorspaces.
Part II: Will Work for Color A follow-up article on working spaces and related considerations. Introduces the concept of "Web Working Spacelets".
COLORSPACES - The Primal Frontier A brief Look at the math that helps model how we see.
How Many Colors in a Bushel? Just "how many" colors are there? Is that even an answerable question?

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)