Investigate switching to CDP color-contrast check

[paulirish]

The check in aXe has given us a decent share of problems over the years.

There's new work that provides a protocol support to check contrast: DevTools: Report low-contrast issues via the Issues panel cc @OrKoN

To try it out.. Do devtools on devtools and run this:

let Main = await import('./entrypoints/main/main.js'); 
await Main.MainImpl.sendOverProtocol('Audits.enable');
await Main.MainImpl.sendOverProtocol('Audits.checkContrast');

And then look at the issues panel in the first devtools.

(Side-note: I don't know how this relates to the APCA algorithm that's under experiments).

Running on wikipedia it flagged a bunch of icon fonts. (Not sure if it's possible to ignore those).
But before we adopt this technique we'll need to do some analysis to see where this implementation differs from aXe and where the bugs are.

But it's exciting because this thing is quite fast. and would likely speed up our median LR run by a second. and 95pctl by a few. :)

[OrKoN]

APCA is a more complex algorithm and needs some time to become more stable so we decided not to implement it on the backend just yet, therefore, the CDP command does not support it (crbug.com/1197489).

There are some issues with contrast reporting as it's still experimental: what I found recently is that elements that are positioned outside of the viewport would still be reported and support for contrast ranges is not there yet (crbug.com/1174511). I'd be happy to chat about it and if all missing cases would be identified, I am sure we can improve the check.

Side note: you can now run commands via Protocol Monitor in DevTools and also the issue reporting can be turned on as an experiment in DevTools so there is no need to run the CDP commands: if you turn on the experiment, the contrast issues will be automatically reported via the issues panel.

[Myndex]

Just as a followup:

I just published APCA W3 0.1.2, which includes some key new features, but nevertheless, the underlying basic APCA math itself is stable, and has not changed in over a year.

The new, added features include an integrated dynamic font lookup table, alpha blending, displayP3 support, and a "reverseAPCA" where you can specify a contrast value, and either the bg or text color, and it generates the missing color.

It is on npm, npm i apca-w3

Please let me know of any questions.

Thank you!

Andy