3 comments

[ 2.7 ms ] story [ 15.3 ms ] thread
Disclaimer: I'm the OP.

There are tons of contrast checkers out there, this does some things differently:

- Checks all buttons and links on a webpage.

- Tests default, hover and focus states.

- Tests Button Background vs. Adjacent Background (non-text contrast).

- You can share results with your team.

- It’s free.

Here are a few notes on some technologies used:

- AWS Lambda Functions (through Serverless Framework)

- DynamoDB to store results (they take a while to calculate)

- Puppeteer: we simulate real "hover" and "focus".

It was the first time using these technologies, but I'm very happy how great they fit together.

If you run a Chrome devtools accessibility audit[1] the page fails the test on the contrast between the 'focus' button example and the page background.

[1] https://developers.google.com/web/tools/chrome-devtools/acce...

You're right. I wonder if adding role='presentation' is the right thing to do in this case, since having a button with contrast fail is more like an image there. WDYT?