Why APCA as a New
Readability is a critically important aspect of web content, affecting 99% of internet users. For years, the WCAG 2.x contrast guidelines provided some guidance toward readability but are being replaced for the future WCAG 3.0. Here is an overview of the need for this change and discussion of the candidate replacement, the Accessible Perceptual Contrast Algorithm (APCA).
The Contrast Problem
WCAG 2.x contrast and 1.4.3 and the related understandings and guidelines were born in an era before smart phones and iPads, when displays were mostly CRT type and websites used core web fonts. But that was a decade and a half ago. Today the contrast guidelines are in need of a complete overhaul due to the massive changes in computer display technology, web content, CSS functionality, and advances in vision science since 2005/2008, when WCAG 2.x was first introduced. For deeper background, see the author’s thread circa April 2019 in WCAG issue 695.
There are a number of reasons that WCAG 2.x contrast is faulty, one of which is the binary pass/fail nature of the SC for a property that does not apply in a binary way across perception nor impairments. Humans are not binary computers, and it is important to understand the non-linear aspects of perception, and to set guidelines that correctly model perception as opposed to “brute forcing” arbitrary values that ultimately do more harm than good.
Let’s begin with a general understanding of color and contrast with the summary outlined below. For a deeper dive see the author’s whitepaper “Introduction to Color and Accessibility” and also the draft APCA white paper.
What Is Readability Contrast?
Like color, contrast is not “real”, it is a perception and is more a result of how your brain interprets visual differences. It is not a simple measure of the distance or difference between two colors.
Like all perceptions it is context sensitive, meaning what is around it and its purpose affects how you see it. Contrast is also substantially affected by “spatial frequency” which essentially means font size and weight, and is closely related to our brain’s lightness perception (aka luminance contrast). When it comes to color contrast, as in hue/chroma/saturation, the effect is less relevant to readability. High lightness/darkness contrast is required for fluent readability at best speed and comprehension, especially small body text in columns or blocks.
Above a certain amount, contrast constancy may come into effect wherein further increases in a mathematical contrast value does not have an effect higher perceived contrast for readability. A high “spatial frequency” means smaller and thinner letters. Smaller, thinner letters or graphics lowers the perceived contrast. As a result, the lightness/darkness difference between text and the background color must be increased to compensate for small thin fonts.
- Fluent readability refers to critical contrast which is that needed for best reading speed and comprehension. Dr. Bailey & Lovie-Kitchin’s studies showed, along with Dr. Legge and other recent studies, contrast must be at least ten times the contrast sensitivity threshold (CS) which is the point of “just noticeable differences” (JND). Twenty times is preferred for adequate contrast reserve above the critical contrast.
- Spot readability means being readable without significant effort, though not necessarily at the best speed or accuracy. In this case the contrast needs to be three times that of the JND.
- Various forms of visual impairment include more than acuity, which is the ability to focus the eyes to a sharp clear image. Contrast sensitivity related impairments involving the eyes or brain may have an even greater effect on overall vision.
These factors define the area of “supra-threshold critical contrast for readability.” We refer to this as “readability contrast” for simplicity. A similar supra-threshold exists for acuity in terms of font size, which is separate but in addition to the font sizing as related to spatial-frequency-driven contrast.
In other words, the size of a font is related to a person’s ability to focus (defined by a number like 20/20 or 6/6 on an eye exam chart) and the size and weight of that font also directly affect contrast perception. Contributing factors are white space, letter, and line spacing, the aspect ratie of the letter (tall vs wide), etc…
Spot-reading-contrast has a lower requirement than fluent readability contrast. Non-text object contrast such as for a solid icon may also have a lower lightness contrast requirement. And there are some differences in terms of the importance of color (hue or saturation) for things such as information coding.
No single figure such as 4.5:1 or 3:1 can be used as a blanket target for contrast between two colors, without considering the use case, size, thickness, etc. On this point, it has been demonstrated that WCAG 2 contrast can pass colors that should fail as not readable, and sometimes that math fails a color pair that should pass as very readable. Some articles with visual comparisons and examples of this are:
The problems of 4.5:1 as a target for a guideline not only impact accessibility, but impacts standard vision. The inherent problems with the WCAG 2 contrast math have been known for some time and widely criticized. Including studies by others showing that color insensitive types are not well served. The WCAG 2 contrast specs often cause enough problems for designers that it is ignored and today, some 86% of websites are failing WCAG_2 contrast—though some failures are not due to actually poor accessibility, but due to the incorrect math of WCAG_2 contrast.
The Solution: APCA
The Accessible Perceptual Contrast Algorithm (APCA) is a new method for calculating and predicting readability contrast. APCA is a part of the larger S-Luv Accessible Color Appearance Model known as SACAM (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 lightness/darkness contrast value based on a minimum font size and color pair, and this value is perceptually based: that is, regardless of how light or dark the two 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.
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.
In the following chart, we’re showing minimum passing contrasts for APCA and for WCAG 2. Notice WCAG 2 examples become unreadable with dark colors.
And the problem is particularly severe for “dark mode”:
These general levels are appropriate for use by themselves, without the need to reference a lookup table. APCA reports contrast as an Lc value (lightness contrast) from Lc 0 to Lc 105+. For accessibility, consider Lc 15 the point of invisibility for many users, and Lc 90 is preferred for body text.
See this on ranges for a more in-depth look.
- Lc 90 • Preferred level for fluent text and columns of body text with a font no smaller than 14px/weight 400 (normal).
- Lc 75 • The minimum level for columns of body text with a font no smaller than 18px/400. Lc 75 should be considered a minimum for 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: 24px normal weight (400) or 16px/700 (bold). These values based on the reference font Helvetica.
- Lc 45 • The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines. This is also the minimum for pictograms with fine details.
- Lc 30 • The absolute minimum for any text not listed above. This includes placeholder text and disabled element text. This is also the minimum for large/solid semantic & understandable non-text elements.
- Lc 15 • The absolute minimum for any non-text that needs to be discernible and differentiable, and is no less than 6px in its smallest dimension. This may include disabled large buttons. 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 in the old WCAG 2. For the equivalent to AAA, simply increase the contrast values by Lc 15. Maximum: for large fonts, keep contrast less than Lc 90.
While the candidate for WCAG 3 is still in development, it includes a range-based conformance system. While it considers multiple factors, it is simple enough to be fully automated, and does not rely on an arbitrary pass/fail binary scoring.
The overall approach improves design flexibility and readability at the same time. Readability is improved by increasing contrast in blocks of body text where it is most needed, and design flexibility is achieved by relaxing contrast for large non-text elements which do not need brute-force contrast levels due to their larger size (resulting in a lower spatial frequency).
For demonstration purposes, the example tool provides real-time updates of minimum font size and weight vs contrast: https://www.myndex.com/APCA/ click on the color patches to bring up a color-picker.
We hope this clarifies the useful differences of a perceptually accurate range-based model as the guideline for a future of best readability.
Thank you for reading,
W3 AGWG Invited Expert
Research Lead and Creator of APCA
Senior Color Science Researcher
Myndex PercepTex Research Project
Study Volunteers Needed
Would you like to help create a more readable world for all? Please let us know! We have several studies planned for 2022, and it requires minimal time on your part to participate. Please send an email to email@example.com with “volunteer” in the subject line.
NOTICE: Personal opinions expressed are the author’s and may or may not reflect those of the W3 or AGWG.
This document was written in plain language to the extent possible, with a target readability age of about a high school senior. Readability evaluations were made using the https://wooorm.com/readability/ tool. If you found any part of this essay difficult or confusing, please file an issue or discuss here so we can improve.
THE WORLD IS READING™
Appendix: Additional Reading
APCA Discussion Forum Threads
- APCA Use Cases, Conformance, Research, and Glossary Discussion of use cases for text and non-text elements, and references to the relevant research. Conformance considerations and rational basis for guidelines.
- Links To Tools and Toolmakers Some of the tools that have adopted APCA.
- Using APCA with other fonts Draft method for font weight conformance.
Peer reviews of APCA & third party
comparisons of APCA vs WCAG 2
- Does the contrast ratio actually predict the legibility of website text? A comparison of WCAG 2 math and APCA, by Sam Waller, a PhD at the Engineering Design Centre, University of Cambridge, UK.
- Color Contrast Is Not As Black And White As It Seems by Roger Attrill, a technical analysis of some of the problems with WCAG 2 contrast math, and comparing and analyzing APCA.
- It’s Time For A More Sophisticated Color Contrast Check A review of APCA and comparison to WCAG 2 contrast, in the use case of dataviz, by Lisa Charlotte Muth.
- Accessible Palette: stop using HSL for color systems by Eugene Fedorenko, this is mostly a discussion of his new color palette tool, but APCA figures into that, and he discusses the integration into the tool vs WCAG 2 contrast.
- Adv. Perceptual Contrast Algorithm Don Hollick’s review and discussion of APCA vs WCAG 2.
- Improving accessibility with the new APCA A review of APCA by Nik Bailey.
Articles & Gists
Better reading on the web Published by UX Collective (uxdesign.cc). This article discusses and demonstrates issues with automated testing and WCAG 2 contrast math, methods, and guidelines.
- On Tangled Web (TangledWeb.xyz):
- Please Stop Using Grey Text This popular article debunks one of the worst myths regarding design contrast.
- What’s Red & Black & Also Not Read? on Tangled Web, which examines the nature of color insensitivity and readability.
- A Contrast of Errors on Tangled Web, which looks at the history and the current international readability crisis.
- GitHub Gists on contrast and color
- Gists Specific to APCA:
- 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 can cause poor results.
- 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.