Visual Contrast and Readability methods and guidelines

[Myndex]

Introduction

Hello, I'd like to open a discussion regarding development of standards related to readability for internet content.

Executive Summary

WCAG 3 is years into the future, and will probably embody a few minimum standards for readability. But there is room for a greater depth of non-normative recommendations and best practices to improve readability. These can, and arguably should, be a separate independent set of guidelines, eventually a superset of guidelines beyond the normative minimums adopted by any given standard.

Visual Readability Contrast

Nearly three years ago, I began thread #695 on the WCAG Github, where I pointed out the several significant problems with the WCAG_2 contrast guidelines, including 1.4.3 adm 1.4.11, and especially the WCAG_2 maths and methods for estimating contrast. As that progressed, I took a proactive approach in solving these issues by leading the research and development of the solutions.

The International Reading Crisis

The internet destroyed the print industry. Major cities were once filled with newsstands. We had a massive newsstand here in Hollywood near my home that was a block long and densely packed with magazines and newspapers from around the world. But as the internet became popular, this newsstand shrunk over the years eventually closing completely some years ago. This is also true of the several area bookstores that have long since shut their doors.

Some estimates indicate that reading in general—internet and print— is down 40% over the last two decades. Certainly the growth of the internet is not the only factor, but there is a related concern: in the shift to mobile devices, it has become difficult it is to read for extended periods. Contrast is often too low, making fatigue high. There is a great deal of misinformation and misunderstanding regarding best practices for readability. And with the rapid advance of technology, WCAG_2 contrast guidelines became a part of this misunderstanding.

Let There (Not) be Light: Genesis of an Error

The WCAG_2 contrast guidelines were first developed circa 2005, before the birth of the iPhone and the subsequent mobile media revolution. In the early 2000s, web content was typically set with core web fonts, with black text on a light grey or white background, often HTML with no CSS, for viewing on (predominantly) CRT type displays.

Today of course the landscape is completely different. CRTs are museum pieces, and web content is viewed on mobile devices under much wider ambient conditions. The content itself is CSS-styled using readily available font services like Google Fonts which are available in any number of ultra-thin styles combined with unreadably low contrast colors.

To be sure, there were known problems with the WCAG_2 contrast guidelines at the time of adoption, but WCAG_2 was more focused on accessibility needs such as ARIA and related technologies. Modern technologies are not so forgiving. Designers are unhappy being forced to use contrast math results that are known to be wrong, while accessibility experts are in a difficult spot being forced to explain why these visibly wrong results have to be adhered to.

And the losers in this tug-of-war? All sighted users. The wrong math and inappropriate guidelines with the resultant misunderstandings surrounding color choices and contrast for readability has created a decidedly unreadable web experience.

The Perceptual Solution

As a result of some years of research (which is continuing) I authored the contrast section of Silver/WCAG_3 and also created the APCA (Advanced Perceptual Contrast Algorithm), APCA is a perceptually accurate method of predicting contrast for readability. APCA is demonstrating superior performance for readability compared to WCAG_2 contrast guidelines, here is a side by side comparison which illustrates the problem of false-passes that WCAG_2 1.4.3 can create:

A Constant Contrast Comparison

Each column set to a specific contrast. The top half of the table, each row has the same text color. For the bottom half, each row shares the same background color. Pink areas indicate out of range.

All sample fonts are at 400 weight. For APCA columns, sizes changed per APCA guidelines. To demonstrate extended range, cells that don't quite hit the target have the text enlarged per the APCA guideline, and have that cell's LC value listed in the pink area with an arrow.

While WCAG_2 degenerates to an unreadably-low-contrast as colors get darker, APCA maintains readability across the visible range, and you may notice a slight increase in APCA contrast for darker colors to address the cases of display flare and misadjusted black levels in monitors, and certain common mobile-use environments.

The Need for a New Standard

While the APCA was originally, and is still, aimed toward WCAG 3, that standard is still some years off from being the recommendation. Due to the charter for WCAG_2, changes must be backwards compatible (though there has been some discussion of relaxing that for a possible future version). It is difficult to make something that is perceptually correct like APCA, backwards compatible to an old method that is not perceptually accurate like WCAG_2. This is being partly addressed with "Bridge-PCA", and interim APCA-based method and guideline that is compatible with WCAG2.

While I have been working to create standards and guidance for WCAG_3, and in some cases WCAG_2.x, APCA is also being developed for other scopes and other guideline uses. The problem of readability is significant, and APCA and other related research needs to move forward to help designers, developers, accessibility advocates, etc. make better design choices that meet the needs of all sighted users.

In other words, as research progressed over the last three years, and in conversations with designers and developers, early adopters, and beta testers, it is abundantly clear that the scope is well beyond accessibility. 100% of sighted users have visual needs in terms of readability and distinguishability. And those needs are met with a comprehensive set of guidelines, beyond just contrast. For instance visual fatigue is as yet unaddressed, and a significant part of why reading for extended periods on devices is challenging for most people.

APCA is not just a new contrast math, it is a complete set of guidance for content presentation, weighted for readability, but based in modern vision science, empirical studies, consideration of current and emerging technologies, and most important the needs of users, and by users I includes designers and developers as well.

A Deeper Dive

Rather than list many links, here is a short list, on the linktree with key links to a deeper dive into the work that has been done thus far.

And for a more complete catalog of APCA related resources, please see:

https://git.myndex.com

Discussion and questions are welcome at the main SAPC-APCA repo in the Discussions tab: https://github.com/Myndex/SAPC-APCA/discussions

Beta Packages

APCA is presently public beta, and beta tools, and sample code is available at the GitHub repos and npm. The base version is:

 npm i apca-w3 

And the WCAG 2 compatible version, with alternate guidelines, is Bridge PCA:

npm i bridge-pca

Next, my question to you is how best to move forward here? And please let me know of any thoughts or questions, I am at your disposal.

Thank you,

Andy

Andrew Somers
W3 / AGWG Invited Expert

𝐓𝐇𝐄 𝐑𝐄𝐕𝐎𝐋𝐔𝐓𝐈𝐎𝐍 𝐖𝐈𝐋𝐋 𝐁𝐄 𝐑𝐄𝐀𝐃𝐀𝐁𝐋𝐄^™