🎩 JavaScript Enhanced Scss mixins! 🎩 - Intelligent Accessibility with css variables

Have you ever wanted to pick a background colour and not have to worry if it meets the WCAG 2.0 AAA standard, you want to just do it in scss and never worry about it.

Well now you can.

Usage

1. drop the 14 lines of mixins into your codebase
2. drop the 68 lines of JavaScript into your codebase
3. Include the tiny-color js library
4. do this:

.test {
    @include colorAuto();
    background-color: #83a787;
    color: #000; // optional
    font-size: 14px; // optional 
}

How it works

Conceptually it uses the same technique as:

🎩 JavaScript Enhanced SCSS mixins! 🎩 - Making CSS scopes with CSS variables.

Adam Crockett 🌀 ・ Jul 26 '19

#css #sass #javascript #codepen

Bonus tips.

• The chrome color picker has a standards checker built in!
• This is the worlds nicest accessible color library http://clrs.cc/a11y/