The Contrast Triangle

https://contrast-triangle.com

---

Prior art

Inspired by Lea Verou's excellent Contrast Ratio

Most of the color translation logic is from this CSS tricks article by Jon Kanter:

https://css-tricks.com/converting-color-spaces-in-javascript/

Query Parameter support is from this Medium article by Fernando Abolafio

https://medium.com/swlh/using-react-hooks-to-sync-your-component-state-with-the-url-query-string-81ccdfcb174f

Luminance calculation function is from this gist by John Schulz:

https://gist.github.com/jfsiii/5641126

On / Off Toggle inspired by the Toggle Button Inclusive Component Pattern by Heydon Pickering

---

This project is built with Vite and React.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in development mode. Open http://localhost:5173 to view it in the browser.

yarn test

Runs the test suite with Vitest.

yarn build

Builds the app for production to the dist folder.