automated-a11y-sass

Sass functions that support accessible color contrast ratios

Requirements

Minimum Sass version 3.4.25. Libsass 3.5.4 (best performance).

Sandboxes

Editable sandbox on CodePen to see how this all works. Change the color variables to see the updates in real-time within the size tests.

When an edge case has been encountered, a version in SassMeister with debug output is helpful to see what might be happening (I changed the main function to a mixin so I can debug the output):

sassmeister.com/gist/42b8402a3cb5ac41f8557df4e175b1f7

Article with Full Explanation

Programming Sass to Create Accessible Color Combinations

Acknowledgments

• Previous ideas used lots of math to replicate a pow() function but it was not performant. Then I used a lookup table and that worked pretty well. Better still, Merovex provided a succinct and performant pow() from Hail2u
• Luminance function adapted from Sérgio Gomes who borrowed code from voxpelli
• “Light or Dark?” function also adapted from Sérgio Gomes
• Contrast ratio calculation adapted from Lea Verou’s Color.js
• Debugging the @while Sass statement help from Merovex
• And finally, lots of other various sources of math and approaches to this until I came across the best way to do things (so far)