APCA

MYNDEX
RESEARCH

APCA

⇦ HOME ⇧ UP ONE

The Easy Intro to the APCA Contrast Method

Visual readability is a key part of web content, affecting 99% of internet users. For years, the WCAG 2.x contrast standard provided basic guidance for designers. Today, WCAG 2.x contrast is out of step with modern technology, and needs a replacement. Here is an overview of the need for this change, and the candidate replacement.

Introducing the Accessible Perceptual Contrast Algorithm (APCA).

The Contrast Problem

WCAG 2.x contrast guidelines were born in an era before smart phones and iPads. Displays were bulky, 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. Advances in display technology and vision science render WCAG 2.x contrast obsolete.

There are many reasons that WCAG 2.x contrast is faulty. The simplistic pass/fail nature of the guideline does not serve the range of human perception, regardless of impairment. Humans are not binary computers, rather we perceive over a range. And our perceptions are non-linear, sensitive to context, and not absolute.

Effective guidelines calculate contrast with uniform results, for consistency across the visual range. Non-uniform methods such as WCAG 2.x need “brute forced” arbitrary values. These simplistic, forced thresholds, ultimately do more harm than good.

Let’s review the basics of color and contrast with the summary below. For a deeper-dive, see the author’s overview, “The Realities And Myths Of Contrast And Color”.

REVIEW: Vision and Impairments

There are many kinds of visual impairment we may experience over the course of our lives. Different impairments can affect our acuity, contrast, or color perception in varying amounts. Impairments can arise from genetics, disease, medications, injury, fatigue, age, and environmental conditions. These factors can create problems anywhere from the eye’s lens, the light sensitive retina, through to the brain.

What Is Visual Readability Contrast?

Like color, contrast is not “real” in an absolute sense, it is a perception. It is how your brain interprets visual differences for the surrounding visual information. Contrast is not a simple measure of the difference between two colors.

Like all perceptions, contrast between two colors is sensitive to context. This means the other items around it affects how you see it. The “spatial characteristics” of line thickness or text weight & size, govern our contrast sensitivity. These are the principal factors in our perception of visual contrast of lightness/darkness. (Sometimes referred to as luminance contrast).

For readability, we need ample lightness-contrast, disregarding color as in hue. Color contrast, meaning hue/saturation, does not play a major role in readability. But ample lightness/darkness contrast enables fluent readability at best speed and comprehension. This is especially true for small body text, such as in columns or blocks.

Above a certain amount, critical contrast constancy may come into effect. This means that increases beyond critical contrast do not result in better readability. A high “spatial frequency” means smaller and thinner letters. Smaller, thinner letters or graphics lowers the perceived contrast. To compensate for small, thin fonts, increase lightness/darkness difference of text & background.

These factors define the area of “supra-threshold critical contrast for readability.” We refer to this as “readability contrast” for simplicity. There’s a critical font size for acuity, and a critical Lc value with font weight for spatially-driven lightness-contrast.

The size of a font relates to a person’s ability to focus (defined by a number like 20/20 or 6/6 on an eye exam chart). Both the size and weight of that font defines contrast sensitivity. Contributing to contrast is white space, letter & line spacing, font aspect ratio, etc.

The following chart demonstrates the spatial nature of human contrast sensitivity. The text samples connect the abstract science of the CS curve 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 have a lower contrast need. Color (hue or saturation) is important for coding information, such as dataviz. Even so, luminance contrast is still required for visual details.

No single figure (such as 4.5:1 or 3:1) is useful as a blanket target for contrast between two colors. Without considering the use case, size, thickness, etc., such ratios are not instructive. On this point, studies have shown that WCAG 2 contrast may pass colors that should fail as not readable. These studies also show that the WCAG 2 math may fail a color pair that should pass as very readable.

Contrasting Concerns

The problem of 4.5:1 as a target for a guideline not only impacts accessibility, but impacts standard vision. The inherent problems with the WCAG 2 contrast math have been 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. Today, some 86% of websites are failing WCAG 2 contrast. Some failures are not due to poor accessibility, but instead due to the incorrect math of WCAG 2 contrast.

The Solution: APCA

APCA is a new method for calculating and predicting readability contrast. An acronym for the Accessible Perceptual Contrast Algorithm. APCA is a part of the larger S-Luv Accessible Color Appearance Model known as SACAM (formerly SAPC). These models predict color appearance on self-illuminated RGB computer displays & devices. They model accessible user needs, with a focus on readability.

Lightness contrast (Lc)

APCA generates a lightness contrast value for a minimum font weight, size, and color pair. This value is uniform to lightness/darkness perception. Regardless of how light or dark the two colors are, a given contrast value is visually consistent. Thus, Lc 60 represents the same perceived contrast, for the range of available colors.

This is absolutely not the case with WCAG 2.x, which far overstates contrast for dark colors. The WCAG 4.5:1 ratio can be functionally unreadable when a color is near black. As a result, WCAG 2.x contrast cannot provide useful guidance when designing “dark mode”. This deficiency also creates problems for color vision deficiency (sometimes called colorblind).

The APCA lightness contrast value (Lc) is perceptually uniform. The Lc value has a direct relationship to the spatial contrast sensitivity curve. Halving or doubling the APCA value relates to a similar change in perceived contrast. There is a subtle weighting for higher contrasts with smaller, thinner fonts. There is also a mild contrast boost for very dark colors, to offset common ambient lighting.

Different Uses, Different Contrasts

The APCA Readability Criteria has a basic set of levels, related to use cases. For instance, Lc 90 is preferred and Lc 75 is the minimum for body text. This makes it easy to use APCA, very much like WCAG guideline 1.4.3 for ease of use.

APCA also has an optional lookup table, associating font weight to the contrast value. The lookup tables allow for greater accuracy and thus greater flexibility in design.

Failing Pass/Fail

One lesson learned, is a strict pass/fail with a blanket contrast ratio is not instructive as a guideline. The lack of uniformity leads to forced thresholds, serving neither user nor designer. In fact, user needs when it comes to contrast are often conflicting—what is good for one can be harmful to another. This is even true of font size and weight.

This points to the importance of real user personalization. Today, the automated technology for personalization is in its infancy. The introduction of perceptual uniformity in color and contrast serves an automated workflow. APCA’s uniformity, spatial awareness, and polarity sensitivity, combine to serve automated workflows.

Today, APCA Readability Criterion provides robust guidance for making content 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 usable without the need to reference a lookup table. APCA reports contrast as an Lc value (lightness contrast) from Lc 0 to ±Lc 106. For accessibility, Lc 15 is the point of invisibility for many users. This is especially true for thin lines or borders. Lc 90 is the preferred minimum for columns of body text. See this on ranges for a more in-depth look.

The values below based on the reference font Helvetica or Arial.

These define the basic minimum levels, what you might think of as A/AA in the old WCAG 2. For AAA, simply increase the contrast values by Lc 15.

Dark Mode Maximum: Lc -90 for large fonts (preliminary).

Range-Based Scoring

APCA as the candidate for WCAG 3 is still in development. It includes a range-based conformance system. While APCA considers many factors, it is simple enough to be fully automated. APCA does not rely on an arbitrary pass/fail binary scoring, nor brute-forced thresholds.

The approach improves design flexibility and readability at the same time. Readability is improved by increasing contrast for body text, where it is most needed. Design flexibility is achieved by relaxing contrast for large non-text elements. Large/thick elements do not need brute-force contrast levels, due to their larger size.

The demonstrator tool provides real-time updates of minimum font size & weight vs Lc lightness-contrast. apcacontrast.com The tool has several ways to enter a color. Click on the color patches to bring up a color-picker, enter a hex value or an RGB value, or use the sliders. The text color supports alpha. A negative Lc value, such as Lc -60 means the text is lighter than the background. A positive value Lc 60 means the text is darker than the background (light mode).

We hope this clarifies the advantages of a perceptually uniform range-based contrast model. APCA enables content with improved visual readability—we can make reading fun again!

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

Poster: a picture of crash test dummies crashing out of a car, and text that says don't be a dummy! Stop using low contrast text. At the bottom it says APCA the world is reading

⇦ HOME ⇧ UP ONE