Implement Advanced Perceptual Contrast Algorithm (APCA)

[djfarly]

Summary

Google Chrome added a new experimental feature to replace the AA/AAA contrast ratio guidelines with APCA.

In that spirit, it seems reasonable to me to add that algorithm to polished as well.

The Algorithm is said to be more context depended (font size, weight). I am not sure, whether Chrome uses those values as parameters for the calculation or just to make suggestions. (This needs investigation).

The standard implementation only takes two colors as input which seems to make the most sense to me, as polished is a color lib.

You can also check out this Demo, which is one of the more confusing things I've looked at.

Basic Example

getPerceptualContrast(color1: string, color2: string): number

import { getPerceptualContrast } from 'polished';

const perceptualContrast = getPerceptualContrast('#444', '#fff');

Reasoning

In the long run this may very well replace WCAG AA/AAA contrasts, as it is seemingly better suited for perceptual contrasts.

If used more it would presumably result in more accessible (color-contrast-wise) web in general.

---

I'd be happy to try and create a PR (following the standard implementation) if there is enough interest in this.

[djfarly]

Note that it might make sense to wait a little since there seem to be changes to the algorithm still: https://bugs.chromium.org/p/chromium/issues/detail?id=1121900#c26

[djfarly]

Here is the Chrome implementation: https://chromium.googlesource.com/devtools/devtools-frontend/+/c88c76b465f2dc8a853fe2a0997ccbfbff0e5bac/front_end/common/ColorUtils.js#88

[Myndex]

Hello, I just stumbled upon this issue thread. I wanted to mention a few related things.

• APCA was developed independently as part of the future WCAG 3 standard.
  • APCA uses modern vision science and is perceptually uniform
  • Studies demonstrate that APCA for WCAG 3 works much better then WCAG 2
  • APCA can be used today, however, WCAG 3 is not the standard yet, and APCA it is not backwards compatible with WCAG 2
    • This is mainly an issue if you have a law to follow that demands WCAG 2 AA as a web standard
    • Unfortunately WCAG 2 is substantially incorrect in certain areas of perception due to its basis on older standards and technologies. It is due to this that APCA was developed as the replacement for use in WCAG 3, but only partial backwards compatibility is possible.
• There is an APCA GitHub repo and the discussion tab is open if you have questions or comments.
• The repo has the basic APCA code, which returns a perceptually uniform contrast value.
• This iteration has been stable since February, future iterations of course planned.
  • While it is still pre-release beta, the general functioning is demonstrably useful.
  • This version is set for sRGB, a next iteration will change the inputs to allow any additive colorspace.
  • You CAN use APCA simply to evaluate a perceived contrast (such as Lc75). But ALSO:
    • There are a variety of lookup tables that can be used to relate a contrast to a font size and weight.
    • Rounding the contrast to an integer is allowed, and interpolation can be used with a lookup table.
  • For simplicity, you can also use the "simple key levels" method (Lc 45, 60, 75), which compares to WCAG 2 contrast (with one very light color) as:
    • Lc 45 is "sort of" like 3:1
    • Lc 60 is "sort of" like 4.5:1
    • Lc 75 is "sort of" like 7:1
  • Unlike WCAG 2, APCA is polarity sensitive, so the BG and TEXT colors must be sent to the correct inputs.

Please feel free to hit me up with any questions or comments.

Thank you,

Andy

Andrew Somers
W3 AGWG Invited Expert
Color Science Researcher
Myndex Perception Research

THE REVOLUTION WILL BE READABLE