Created
January 14, 2014 21:55
-
-
Save matbrady/8426563 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="color"> | |
<span class="old">Old Color:</span> | |
</br> | |
<span class="new">New Color:</span> | |
</div> | |
<div class="small"> | |
<a href="#" class="old">Original Color</a> | |
<a href="#" class="new">Constrasted Color</a> | |
</div> | |
<div class="medium"> | |
<a href="#" class="old">Original Color</a> | |
<a href="#" class="new">Constrasted Color</a> | |
</div> | |
<div class="large"> | |
<a href="#" class="old">Original Color</a> | |
<a href="#" class="new">Constrasted Color</a> | |
</div> | |
<div class="links"> | |
<a href="http://juicystudio.com/services/luminositycontrastratio.php#specify">Luminosity Contrast Ration</a> | |
</br> | |
<a href="http://webaim.org/resources/contrastchecker/">Contrast Checker</a> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.0.rc.2) | |
// Compass (v1.0.0.alpha.17) | |
// ---- | |
$fg-color: white; | |
$bg-color: #26a7df; | |
// ---- | |
// Sass (v3.3.0.rc.2) | |
// Compass (v1.0.0.alpha.17) | |
// ---- | |
// == SCSS Color Methods for Accessibility ================================ | |
// Adjust given colors to ensure that those color combination provide | |
// sufficient contrast | |
// Methods using calculations from: | |
// * "Techniques For Accessibility Evaluation And Repair Tools (AERT)" | |
// working draft @see http://www.w3.org/TR/AERT#color-contrast | |
// TODO: add methods with WCAG2 formulas | |
// @version 0.1 | |
// @link http://eye48.com/go/scsscontrast | |
// @license http://www.gnu.org/licenses/lgpl.html GNU Lesser General Public License (LGPL) | |
// @author Michael Haschke, http://michael.haschke.biz/ | |
// -- AERT ---------------------------------------------------------------- | |
@function color_adjust_contrast_AERT( | |
$color_adjust, | |
$color_keep, | |
$lightness_change_value:1, | |
$saturation_change_value:1, | |
$brightness_min: 75, | |
$difference_min: 500) | |
{ | |
@if (color_test_contrast_AERT($color_adjust, $color_keep, $brightness_min, $difference_min) == true) | |
{ | |
@return $color_adjust; | |
} | |
$color_save: $color_adjust; | |
$S: saturation($color_adjust); | |
$L: lightness($color_adjust); | |
$foundresult: false; | |
@while(($foundresult == false) and ($S > 0 or ($L > 0 and $L < 100))) | |
{ | |
$color_adjust: desaturate($color_adjust, $saturation_change_value); | |
$S: $S - $saturation_change_value; | |
@if (lightness($color_keep) > lightness($color_adjust)) | |
{ | |
$color_adjust: darken($color_adjust, $lightness_change_value); | |
$L: $L - $lightness_change_value; | |
} | |
@else | |
{ | |
$color_adjust: lighten($color_adjust, $lightness_change_value); | |
$L: $L + $lightness_change_value; | |
} | |
$foundresult: color_test_contrast_AERT($color_adjust, $color_keep, $brightness_min, $difference_min); | |
} | |
@if ($foundresult == false) | |
{ | |
@debug $color_save + " was adjusted to " + $color_adjust + " but this is not enough contrast to " + $color_keep + " (AERT)."; | |
} | |
@return $color_adjust; | |
} | |
@function color_test_contrast_AERT($color_1, $color_2, $brightness_min: 75, $difference_min: 500) | |
{ | |
$difference_brightness: math_absolute(color_brightness_AERT($color_1) - color_brightness_AERT($color_2)); | |
$difference_color: color_difference_AERT($color_1, $color_2); | |
@if (($difference_brightness < $brightness_min) or ($difference_color < $difference_min)) | |
{ | |
@return false; | |
} | |
@else | |
{ | |
@return true; | |
} | |
} | |
@function color_brightness_AERT($color) | |
{ | |
$r: red($color); | |
$g: green($color); | |
$b: blue($color); | |
@return (($r * 299) + ($g * 587) + ($b * 114)) / 1000; | |
} | |
@function color_difference_AERT($color1, $color2) | |
{ | |
$r1: red($color1); | |
$g1: green($color1); | |
$b1: blue($color1); | |
$r2: red($color2); | |
$g2: green($color2); | |
$b2: blue($color2); | |
@return (math_max($r1, $r2) - math_min($r1, $r2)) + (math_max($g1, $g2) - math_min($g1, $g2)) + (math_max($b1, $b2) - math_min($b1, $b2)); | |
} | |
// -- math stuff ---------------------------------------------------------- | |
@function math_max($value1, $value2) | |
{ | |
@if ($value1 > $value2) { @return $value1; } | |
@return $value2; | |
} | |
@function math_min($value1, $value2) | |
{ | |
@if ($value1 < $value2) { @return $value1; } | |
@return $value2; | |
} | |
@function math_absolute($value) | |
{ | |
@if ($value > 0) { @return $value; } | |
@return $value * -1; | |
} | |
@mixin set_font_size($size) | |
{ | |
font-size: $size + px; | |
&:after { | |
content: " " + $size + "px"; | |
} | |
} | |
@function get_new_color($fg-color, $bg-color) | |
{ | |
$color: color_adjust_contrast_AERT($bg-color, color_adjust_contrast_AERT($fg-color, $bg-color)); | |
@return $color; | |
} | |
.color, | |
.small, | |
.medium, | |
.large { | |
font-family: Helvetica, arial, sans-serif; | |
margin-bottom: 20px; | |
a { | |
padding: 8px 15px; | |
} | |
&:after, | |
&:before { | |
content: ""; | |
display: table; | |
} | |
&:after { | |
clear:both; | |
} | |
} | |
.small { | |
a { | |
@include set_font_size(12); | |
} | |
} | |
.medium { | |
a { | |
@include set_font_size(16); | |
} | |
} | |
.large { | |
a { | |
@include set_font_size(30); | |
} | |
} | |
$new_color: get_new_color($fg-color, $bg-color); | |
span { | |
&.old { | |
color: $bg-color; | |
&:after { | |
content: " " + $bg-color; | |
} | |
} | |
&.new { | |
color: $new_color; | |
&:after { | |
content: " " + $new_color; | |
} | |
} | |
} | |
a { | |
display: inline-block; | |
text-decoration: none; | |
&.old { | |
color: $fg-color; | |
background: $bg-color; | |
} | |
&.new { | |
color: $fg-color; | |
background: $new_color; | |
} | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.color, | |
.small, | |
.medium, | |
.large { | |
font-family: Helvetica, arial, sans-serif; | |
margin-bottom: 20px; | |
} | |
.color a, | |
.small a, | |
.medium a, | |
.large a { | |
padding: 8px 15px; | |
} | |
.color:after, .color:before, | |
.small:after, | |
.small:before, | |
.medium:after, | |
.medium:before, | |
.large:after, | |
.large:before { | |
content: ""; | |
display: table; | |
} | |
.color:after, | |
.small:after, | |
.medium:after, | |
.large:after { | |
clear: both; | |
} | |
.small a { | |
font-size: 12px; | |
} | |
.small a:after { | |
content: " 12px"; | |
} | |
.medium a { | |
font-size: 16px; | |
} | |
.medium a:after { | |
content: " 16px"; | |
} | |
.large a { | |
font-size: 30px; | |
} | |
.large a:after { | |
content: " 30px"; | |
} | |
span.old { | |
color: #26a7df; | |
} | |
span.old:after { | |
content: " #26a7df"; | |
} | |
span.new { | |
color: #25647f; | |
} | |
span.new:after { | |
content: " #25647f"; | |
} | |
a { | |
display: inline-block; | |
text-decoration: none; | |
} | |
a.old { | |
color: white; | |
background: #26a7df; | |
} | |
a.new { | |
color: white; | |
background: #25647f; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="color"> | |
<span class="old">Old Color:</span> | |
</br> | |
<span class="new">New Color:</span> | |
</div> | |
<div class="small"> | |
<a href="#" class="old">Original Color</a> | |
<a href="#" class="new">Constrasted Color</a> | |
</div> | |
<div class="medium"> | |
<a href="#" class="old">Original Color</a> | |
<a href="#" class="new">Constrasted Color</a> | |
</div> | |
<div class="large"> | |
<a href="#" class="old">Original Color</a> | |
<a href="#" class="new">Constrasted Color</a> | |
</div> | |
<div class="links"> | |
<a href="http://juicystudio.com/services/luminositycontrastratio.php#specify">Luminosity Contrast Ration</a> | |
</br> | |
<a href="http://webaim.org/resources/contrastchecker/">Contrast Checker</a> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment