GoogleChrome / GoogleChrome/lighthouse

Investigate switching to CDP color-contrast check

Open
#12,720 2 comments 0 reactions 1 assignee Claimed by @paulirish View on GitHub
P2
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 14h
Merged PRs (30d)
20

Description

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](https://docs.google.com/document/d/1MRn5HjfLiM8vM41nL34yKsQrbZwrjqN6FEFM6I1DtWo/edit) cc @OrKoN

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

```js
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.

![image](https://user-images.githubusercontent.com/39191/123863574-993a3480-d8de-11eb-8303-a669b7e6b2af.png)

(Side-note: I don't know how this relates [to the APCA algorithm](https://developer.chrome.com/blog/new-in-devtools-89/#apca) 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. :)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.