Constrast Check

A simple contrast checker widget to put in to your styleguides.

Click the widget to input the foreground color. The background color is inferred by the parent frame. There are options to test against: AA, AAA, Large Text, Normal Text.

(This was a quick and dirty plugin built in a day. So please excuse anything that's not perfect and feel free to make PRs.) It definitely needs a refactor and cleanup.

Building

To build run npm run build

Future Plans & Wants

• Recalculates when moved to a new frame
• Close Pass / Close Fail

Authors

• Zach Inglis - Twitter

With Thanks

• https://remixicon.com/
• https://css-tricks.com/converting-color-spaces-in-javascript/
• https://blog.cristiana.tech/calculating-color-contrast-in-typescript-using-web-content-accessibility-guidelines-wcag
• https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o