3 ms·
Show HN: Button Contrast Checker
- lucalanca 7y agoDisclaimer: 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 7y agoIf 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/accessibility/reference https://developers.google.com/web/tools/chrome-devtools/acce...
- lucalanca 7y agoYou'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?