When I rebuilt my website I decided to make another one of my tools public. SCSS Contrast - WCAG Grid takes SCSS variables and creates a grid that shows all of your 'safe' colour combinations.
Why I built it
I'm not a very good designer - I'm more a productive beginner and I rely on cheat sheets. A SCSS Contrast Grid was one of my most useful cheat sheets and it was especially useful for designing buttons. As I kept using it, I kept refining it and decided to release it. Not only was it genuinely useful to me but I got kind of tired of having to open up another folder and run the application. My website makes it more convenient for me too.
Help
SCSS Contrast would not have happened without some inspiration and two friends to test it out. The inspiration came a long time ago during a chance encounter on a tech support call. I was just starting my career and got a really good introduction to accessibility.
As I readied it for release, two good friends agreed to test it out. Jim and Hari provided amazing feedback from two very different perspectives and their feedback really helped make this more usable. They gave me a lot more feedback than I have incorporated thus far and my backlog is quite long for a one page tool...
The future
In the next few days, I am going to fix the data that gets copied. This is okay but I don't think it's terribly useful to know that if your text color and background-color are the same, your contrast ratio will only be 1.0 so I will remove that.
Background \ Foreground,$black,$white
$black,1.00 (Fail),21.00 (AAA)
$white,21.00 (AAA),1.00 (Fail)
Shortly after, the first real task on the backlog is the change the output to create a section that highlights pairings that do validate. As part of that, it makes sense to change the input slightly. Currently it only works with scss variables because that's how I work, but I think I could make the input more forgiving.