whatwg / sg

A place to raise issues with the WHATWG Steering Group
https://whatwg.org/policies
Other
64 stars 39 forks source link

Contrast and Readability: Opening the Discussion for a Standard. #189

Closed Myndex closed 2 years ago

Myndex commented 2 years ago

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

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

ColumnCompareAll400 comparison table of WCAG 2 and APCA contrast methods

All sample fonts are at 400 weight. For APCA columns, sizes changed per APCA. 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. It is difficult to make something that is perceptually correct like APCA, backwards compatible to an old method that is not perceptual like WCAG_2. This is being partly addressed with "Bridge-PCA".

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.

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 linktree with key links to a deeper dive into the work that has been done thus far. Discussion and questions are welcome at the repo, also listed on the linktree:

https://linktr.ee/Myndex

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

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
Director of Research
Myndex Technologies
Inventor of APCA

THE REVOLUTION WILL BE READABLE

annevk commented 2 years ago

Hey @Myndex, thanks for your suggestion. This is best taken to https://wicg.io/ first. Once there is a community formed there and a draft that implementers are reasonably happy with, it could potentially be considered for standardization here.

Myndex commented 2 years ago

Hey @Myndex, thanks for your suggestion. This is best taken to https://wicg.io/ first. Once there is a community formed there and a draft that implementers are reasonably happy with, it could potentially be considered for standardization here.

Hi @annevk Thank you for the tip and the link!! Much appreciated!

Andy

annevk commented 2 years ago

Closing this as once this is far enough along it's better to have a new dedicated issue for it that has all the relevant information in OP.