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
- drop the 14 lines of mixins into your codebase
- drop the 68 lines of JavaScript into your codebase
- Include the tiny-color js library
- 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/
Top comments (0)