- SCSS Contrast Checker -

Paste SCSS color variables below. We'll show you contrast ratios for all foreground/background combinations, with WCAG labels (AAA, AA, Fail).

I use this in all my work and in combination with frequent audits, it's very helpful tool for building highly accessible sites. Because I use it myself, it is under active development and will change quite a lot.

- WCAG Grid -

Once generated, you'll see a matrix here with all combinations and their contrast ratios.

Thanks

This part of the website would not have happened but for a chance tech support encounter when I was first starting my career in software. A really good person named Marvin taught me a lot about accessibility. As the decades have ticked by, I have had many other teachers but that person started me down the path that lead to this.

Also thanks to my friends Hari and Jim for trying this tool out and giving me feedback. Anything good about this is largely their doing. Anything bad is 100% my oversight and/or eagerness to launch this.