guylepage3 / m3

m3 is an advanced typography framework.
https://m3-one.vercel.app
MIT License
12 stars 2 forks source link

Add Sass color accessibility theme function #30

Closed guylepage3 closed 5 years ago

guylepage3 commented 5 years ago

Description Add Sass function that auto detects background color and outputs the correct "light" or "dark" color theme based upon color accessibility standards.

Tweet - https://twitter.com/guylepage3/status/1075021874990604290

Looking for a #sass function that auto detects background color and outputs the correct "light" or "dark" color theme based upon color accessibility standards. @UniverseLabs #meta

Tasks

guylepage3 commented 5 years ago

Need to test out something like...

// Color contrast
@function color-yiq($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if ($yiq >= $yiq-contrasted-threshold) {
    @return $yiq-text-dark;
  } @else {
    @return $yiq-text-light;
  }
}
guylepage3 commented 5 years ago

Done. Included in 1.5