
Show HN: Button Contrast Checker - lucalanca
https://www.aditus.io/button-contrast-checker/
======
lucalanca
_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.

------
onion2k
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...](https://developers.google.com/web/tools/chrome-
devtools/accessibility/reference)

~~~
lucalanca
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?

