DEV Community

Cover image for 🎩 JavaScript Enhanced Scss mixins! 🎩 - Intelligent Accessibility with css variables
Adam Crockett 🌀
Adam Crockett 🌀

Posted on

🎩 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 
}
Enter fullscreen mode Exit fullscreen mode

How it works

Conceptually it uses the same technique as:

Bonus tips.

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

Top comments (0)