Skip to content

Instantly share code, notes, and snippets.

@rjsworking

rjsworking/luminance.scss

Forked from vimtaai/luminance.scss
Created May 13, 2021 22:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rjsworking/163543a4e4fb6417c1a79732df212d12 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rjsworking/163543a4e4fb6417c1a79732df212d12 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @vimtaai vimtaai revised this gist Sep 28, 2020. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion luminance.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -60,5 +60,9 @@
    // Calculates the contrast of two colors based on the WCAG2 standard
    // Constrast calculation based on: https://www.w3.org/TR/WCAG20/#contrast-ratiodef
    @function contrast($color1, $color2) {
    @return (luminance($color1) + 0.05) / (luminance($color2) + 0.05);
    @if luminance($color1) > luminance($color2) {
    @return (luminance($color1) + 0.05) / (luminance($color2) + 0.05);
    } @else {
    @return (luminance($color2) + 0.05) / (luminance($color1) + 0.05);
    }
    }
  2. @vimtaai vimtaai revised this gist Nov 15, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion luminance.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -59,6 +59,6 @@

    // Calculates the contrast of two colors based on the WCAG2 standard
    // Constrast calculation based on: https://www.w3.org/TR/WCAG20/#contrast-ratiodef
    @function constrast($color1, $color2) {
    @function contrast($color1, $color2) {
    @return (luminance($color1) + 0.05) / (luminance($color2) + 0.05);
    }
  3. @vimtaai vimtaai created this gist Nov 15, 2019.
    64 changes: 64 additions & 0 deletions luminance.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    // Calulates power with integer exponent
    @function pow($number, $exponent) {
    $value: 1;

    @if $exponent > 0 {
    @for $i from 1 through $exponent {
    $value: $value * $number;
    }
    } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
    $value: $value / $number;
    }
    }

    @return $value;
    }

    // Calculates nth root with iteration
    @function nth-root($value, $n) {
    $precision: 1e-10;
    $previous: 0;
    $current: $value;

    @while abs($current - $previous) > $precision {
    $previous: $current;
    $current: 1 / $n * (($n - 1) * $previous + ($value / pow($previous, $n - 1)));
    }

    @return $current;
    }

    // Calculates luminance of a color based on the WCAG2 standard
    // Luminance calculation based on: https://www.w3.org/TR/WCAG20/#relativeluminancedef
    @function luminance($color) {
    $R: red($color) / 255;
    $G: green($color) / 255;
    $B: blue($color) / 255;

    @if $R <= 0.03928 {
    $R: $R / 12.92;
    } @else {
    $R: nth-root(pow($R + 0.055 / 1.055, 24), 10);
    }

    @if $G <= 0.03928 {
    $G: $G / 12.92;
    } @else {
    $G: nth-root(pow($G + 0.055 / 1.055, 24), 10);
    }

    @if $B <= 0.03928 {
    $B: $B / 12.92;
    } @else {
    $B: nth-root(pow($B + 0.055 / 1.055, 24), 10);
    }

    @return $R * 0.2126 + $G * 0.7152 + $B * 0.0722;
    }

    // Calculates the contrast of two colors based on the WCAG2 standard
    // Constrast calculation based on: https://www.w3.org/TR/WCAG20/#contrast-ratiodef
    @function constrast($color1, $color2) {
    @return (luminance($color1) + 0.05) / (luminance($color2) + 0.05);
    }