Skip to Content
LINXS ADA Coordinator

Accessible Perceptual Contrast Algorithm (APCA) Color Table

As an alternative to the color contrast calculations provided in the Accessibility Statement—as determined by the WebAIM Contrast Checker in accordance with W3C’s interpretation of “relative luminance” for WCAG 2.x compliance—the following table calculates color contrast using the APCA Contrast Calculator, which implements the Accessible Perceptual Contrast Algorithm (APCA) proposed for inclusion with the yet-unpublished WCAG 3.

These APCA “lightness contrast” calculations are provided for reference and comparison only; the WCAG 2.x standard for website color contrast calculations remains the current official standard for compliance.

Alternate Color Contrast Calculations

As with the “official” table, the following table calculates color contrast values for common combinations of foreground (text) and background colors that could be specified by the standard color palette of this website. Not all combinations shown here are actually used by this website, and this website may use additional combinations not shown here.

Explanatory excerpt from the APCA Contrast Calculator website for (preliminary) “Bronze” performance standards (approximately equivalent to WCAG 2.0 Level AA):

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 Color Lightness Contrast (Lc) Values1,3
Table Legend
Style Description
N/A Combination is not used or is functionally invisible due to values Lc < 15 (“contrast too low”).
[White circle with black outline with text “N/A” inside]
35.2 Not acceptable for text or semantic non-text such as icons, but may be acceptable for 15-pixel dividers and borders.
[Thick solid red (or pink) border around values 15 ≤ Lc < 30.]
51.7 Acceptable only for non-context “spot-readable” text including placeholders and disabled elements.
[Dashed red (or pink) border around values 30 ≤ Lc < 45.]
68.5 Acceptable only for large 36-pixel normal or 24-pixel bold “fluent” non-body text.
[Dotted black (or white) border around values 45 ≤ Lc < 60.]
68.5 Acceptable for readable 24-pixel normal or 16-pixel bold text that is not body, column, or block text.
[Thin solid black (or white) border around values 60 ≤ Lc < 75.]
84.9 Acceptable for 18-pixel normal or 14-pixel bold body text, 15-pixel non-body text, or larger text where readability is important.
[Values 75 ≤ Lc < 90, without decoration.]
91.3 Preferred for 14-pixel body text or fluent text, 12-pixel non-body text, and extremely thin fonts.
[Values Lc ≥ 90, followed by a star.]
Foreground Colors (by column)
bg-color: #ffffff (white content)
fg-color: #000000 (black content)
hl-color: #ffaa07 (yellow brand)
ll-color: #004472 (blue brand)
bd-color: #d7d7d7 (gray brand)
al-color: #3131fe (blue anchor)
av-color: #9200c2 (purple anchor)
ah-color: #b50129 (red anchor)
er-color: #990000 (red error/alert)
ed-color: #e7a7a7 (alt. red error/alert)
Background Colors (by row)
bg-color: #ffffff
(white content)		 N/A 106.0 36.0 93.0
62.15		 21.0 82.6 81.8 81.6 87.8 38.7
fg-color: #000000
(black content)		 107.9 N/A 66.5 N/A 82.3 19.4 20.1 20.3 N/A 63.6
hl-color: #ffaa07
(yellow brand)		 40.3 67.9 N/A 54.8 N/A 44.4 43.7 43.5 49.7 N/A
ll-color: #004472
(blue brand)		 97.1 N/A 55.7 N/A 71.6 N/A N/A N/A N/A 52.9
bd-color: #d7d7d7
(gray brand)		 23.9 82.7 N/A 69.6 N/A 59.2 58.5 58.3 64.5 15.4
ab-color: rgba(255,170,7,0.1)
(transparent yellow brand over white background ≅ #fff7e6)2		 N/A 101.6 31.6 88.5 16.6 78.1 77.4 77.2 83.4 34.3
ab-color: rgba(255,170,7,0.1)
(transparent yellow brand over blue brand background ≅ #1a4e67)2		 94.9 N/A 53.5 N/A 69.3 N/A N/A N/A N/A 50.6
ab-color: rgba(255,170,7,0.1)
(transparent yellow brand over gray brand background ≅ #d8d3c2)2		 26.5 80.4 N/A 67.3 N/A 56.9 56.2 56.0 62.2 N/A
bb-color: rgba(0,68,114,0.1)
(transparent blue brand over white background ≅ #e6ecf1)2		 N/A 94.3 24.2 81.2 N/A 70.8 70.0 69.8 76.1 26.9
bb-color: rgba(0,68,114,0.1)
(transparent blue brand over yellow brand background ≅ #e6a012)2		 48.5 60.3 N/A 47.2 22.9 36.8 36.0 35.8 42.1 N/A
bb-color: rgba(0,68,114,0.1)
(transparent blue brand over gray brand background ≅ #c2c8cd)2		 33.8 73.8 N/A 60.7 N/A 50.3 49.6 49.4 55.6 N/A
sh-color: rgba(0,0,0,0.2)
(transparent black shadow over white background ≅ #cccccc)2		 30.8 76.5 N/A 63.5 N/A 53.0 52.3 52.1 58.3 N/A
sh-color: rgba(0,0,0,0.2)
(transparent black shadow over yellow brand background ≅ #cc8806)2		 61.2 48.2 19.7 35.2 35.6 24.7 24.0 23.8 30.0 16.9
sh-color: rgba(0,0,0,0.2)
(transparent black shadow over blue brand background ≅ #00365b)2		 101.4 N/A 60.0 N/A 75.8 N/A N/A N/A N/A 57.2
sh-color: rgba(0,0,0,0.2)
(transparent black shadow over gray brand background ≅ #acacac)2		 49.6 59.2 N/A 46.1 24.1 35.7 35.0 34.8 41.0 N/A
tn-color: rgba(255,255,255,0.8)
(transparent white tint over black background ≅ #cccccc)2		 30.8 76.5 N/A 63.5 N/A 53.0 52.3 52.1 58.3 N/A
tn-color: rgba(255,255,255,0.8)
(transparent white tint over yellow brand background ≅ #ffeecd)2		 N/A 96.9 26.9 83.9 N/A 73.4 72.7 72.5 78.7 29.6
tn-color: rgba(255,255,255,0.8)
(transparent white tint over blue brand background ≅ #ccdae3)2		 23.4 83.1 N/A 70.1 N/A 59.6 58.9 58.7 64.9 15.8
tn-color: rgba(255,255,255,0.8)
(transparent white tint over gray brand background ≅ #f7f7f7)2		 N/A 101.3 31.2 88.2 16.3 77.8 77.0 76.8 83.1 33.9
stat-active: #ccddee
(active or in-progress tabular data item)		 21.5 84.9 N/A 71.8 N/A 61.4 60.6 60.5 66.7 17.6
stat-closed: #ddffdd
(closed or resolved tabular data item)		 N/A 100.7
93.84		 30.6 87.6 15.6 77.2 76.4 76.2 82.5 33.3
stat-crit: #eecccc
(critical or incomplete tabular data item)		 25.9 80.9 N/A 67.9 N/A 57.4 56.7 56.5 62.7 N/A
stat-miss: #eecc77
(missing or converted tabular data item)		 28.6 78.5
73.64		 N/A 65.5 N/A 55.0 54.3 54.1 60.3 N/A
stat-void: #d0d0d0
(voided or not-in-scope tabular data item)		 28.3 78.7
73.84		 N/A 65.7 N/A 55.2 54.5 54.3 60.5 N/A
Notes:
  1. Color contrast values are ideal mathematical results and may not match individual end-user experience based on local variables beyond the control of the website or its creators and operators, including but not limited to ambient lighting conditions and monitor calibration.
  2. Because a transparent foreground color is necessarily influenced by its background color, this table substitutes a congruent (≅) opaque color based on the specific combination of the specified transparent foreground color over the specified opaque background color.
  3. Color combinations, including congruent color values, are calculated without gamma correction. This may result in the actual displayed color varying significantly from the ideal mathematical results shown.
  4. Actual design uses rgba(0,0,0,0.8) rather than #000000 for “black” text color, which results in lower actual contrast ratio as shown.
  5. Special use case of --ll-color at 0.6 opacity over white background (≅ #668faa)2 for graphical elements only.

About APCA

Back to top of page⤣

The following is excerpted from the APCA Contrast Calculator website:

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.