Why did I build this?

I wanted a tool that enabled me to easily translate between color spaces and reactively calculate contrast ratio. There are a number of existing tools that perform the individual tasks very well in one way or another, but I wanted to create something that worked well for my personal workflow.

How did I build this?

This site was build using Svelte Kit. Inspiration and some of the code for the color calculations was derived from this article on CSS-Tricks and the WCAG documentation . The entirety of the source code is available on GitHub.

Why on earth did I use Svelte Kit for this?

Svelte Kit was most definitely overkill. As were Gatsby and Sapper in my previous versions. In short, I needed an excuse to play around with Svelte & Svelte Kit in general, and this was a very simple way to dip my toe in those waters. I even considered building this with Svelte originally back in 2019, but opted for React/Gatsby for the sake of familiarity.

• Web Content Accessibility Guidelines
• Converting Color Spaces in JavaScript, by Jon Kantner on CSS-Tricks
• Converting Colors
• WebAIM: Contrast Checker
• Contrast Ratio