APCA

MYNDEX
RESEARCH

APCA

⇦ HOME ⇧ UP ONE

Why APCA as a New
Contrast Method?

Visual 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, SC 1.4.3, and the related understandings and guidelines, were born in an era before smart phones and iPads, when displays were mostly old-school 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.

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 this comprehensive overview “The Realities And Myths Of Contrast And Color”.

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 characteristics” which for our purposes means font weight or line thickness, and is principal factor in 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 result in 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 weight as related to spatially-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 ratio of the letter (tall vs wide), and other properties.

The following chart is intended to demonstrate the spatially dependent nature of human contrast sensitivity, using text samples to connect the abstract science to practical reality.

This is a chart of the human contrast sensitivity curve. A blue line curves down to the right where the Y axis is contrast sensitivity, and the X access is spatial frequency, increasing toward the right. An increase in spatial frequency means elements are smaller and thinner. On the right of this info graphic are samples of text from very large and bold to very thin and small, with red lead lines indicating approximately where those samples fall on the contrast sensitivity curve. All of the text samples are at the exact same CSS color of #c7c7c7, the top very large and bold headline is legible but as the fonts become thinner and smaller they literally fade out as if becoming lighter gray, even though they are all at the exact same color.

Use Cases

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 the WCAG 2 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 weight/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, across the available range of colors.

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”. This also creates problems for color vision deficiency (sometimes called colorblind).

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, particularly for thin lines, 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 in dark mode, 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: apcacontrast.com 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
Director of Research
Myndex Technologies
W3C Invited Expert
APCA Research Lead

THE WORLD IS READING™

Definitions of Terms Used In This Document

This document was written in basic plain language using the Hemingway app.

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 2023, 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.

APCA The Revolution Will Be Readable

APPENDIX: Additional Reading

APCA Readability Criterion

Maintained by Inclusive Reading Technologies Inc., a California Non-Profit.

Discussion Forum

Peer Review & Third Party Discussion of APCA

A listing of third party and peer reviews of APCA and related technologies. This directory includes journal-published peer-reviews, trade-published evaluations, and less formal comparative analysis, covering the usage, math, efficacy, implementation/integration, workflows, and more.

Published Articles on Color & Contrast by A.Somers

Smokey the bear saying ONLY YOU CAN STOP LOW CONTRAST

⇦ HOME ⇧ UP ONE