APCA

MYNDEX
RESEARCH

APCA

⇦ HOME ⇧ UP ONE


Why APCA as a New
Contrast Method?

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.

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:

Contrasting Concerns

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.

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.

Visual Comparisons

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.

chart showing a comparison of minimum passing contrasts for both APCA and WCAG 2. WCAG 2 examples become unreadable in dark colors

And the problem is particularly severe for “dark mode”:

demonstration showing a comparison of minimum passing contrasts for both APCA and WCAG 2. WCAG 2 is unreadable for dark mode

Use-Case Ranges

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.

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.

Range-Based Scoring

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,

Andrew Somers
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 perceptex@myndex.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

APCA The Revolution Will Be Readable

Appendix: Additional Reading

APCA Discussion Forum Threads

Peer reviews of APCA & third party
comparisons of APCA vs WCAG 2

Articles & Gists

⇦ HOME ⇧ UP ONE