A Pen by Mike.

Contrast---WCAG-compliant-(sass).markdown

Contrast - WCAG compliant (sass)

A Pen by Mike on CodePen.

License.

index.haml

- ["B0C4DE","F08080","556B2F","D2691E","3CB371","6B8E23","BC8F8F","0000FF","FF69B4","808080","2F4F4F","F0FFF0","F0FFFF","0000CD","6A5ACD","D2B48C","DB7093","98FB98","7CFC00","9400D3","F5FFFA","8A2BE2","CD853F","A0522D","BA55D3","FF4500","9932CC","00BFFF","9370DB","FFF8DC","800000","FFA07A","FFF5EE","2E8B57","008000","B22222","4682B4","E9967A","AFEEEE","C0C0C0","228B22","F8F8FF","800080","FFE4B5","778899","4169E1","008080","00FF7F","191970","FAEBD7","EE82EE","006400","00FF00","8B008B","FFD700","EEE8AA","FFEBCD","9ACD32","FFE4E1","FFFACD","FAFAD2","48D1CC","87CEFA","ADD8E6","1E90FF","708090","FDF5E6","F4A460","C71585","E0FFFF","F5F5DC","FFDEAD","FFF0F5","FFC0CB","7B68EE","40E0D0","4B0082","ADFF2F","87CEEB","FF7F50","A9A9A9","6495ED","E6E6FA","7FFF00","FF0000","008B8B","DEB887","B0E0E6","696969","00CED1","DDA0DD","808000","90EE90","F5DEB3","8B4513","8FBC8F","DA70D6","FF6347","66CDAA","5F9EA0","FA8072","FAF0E6","B8860B","FF8C00","FFFFFF","CD5C5C","000080","000000","FFE4C4","DCDCDC","FFFF00","8B0000","FFFFE0","FFDAB9","A52A2A","FFFAFA","00FFFF","00008B","DC143C","00FA9A","FFEFD5","FFA500","32CD32","BDB76B","DAA520","7FFFD4","FF00FF","FFFAF0","D3D3D3","FFFFF0","483D8B","00FFFF","F0F8FF","FF1493","D8BFD8","F0E68C","FF00FF","FFB6C1","20B2AA","F5F5F5"].each do |i|
  %div{:class => "background-#{i}"} ##{i}

style.scss

@function luma($color){ 
  // Adapted from: https://gist.github.com/voxpelli/6304812
  $rgba: red($color), green($color), blue($color);
  $rgba2: ();
  @for $i from 1 through 3 {
    $rgb: nth($rgba, $i);
    $rgb: $rgb / 255;
    $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4));
    $rgba2: append($rgba2, $rgb);
  }
  @return (.2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3))*100;
}
@function contrast_ratio($color1, $color2) {
  $luma1: luma($color1) + 5;
  $luma2: luma($color2) + 5;
  $ratio: $luma1 / $luma2;
  @if $luma1 < $luma2 {
    $ratio: 1 / $ratio;
  } 
  @return $ratio;
}
 
@function text-contrast($color, $bgcolor: $color) {
  $threshold: 4.5; // 4.5 = WCAG AA,7= WCAG AAA
  $list: 20 30 40 50 60 70 80 90 100;
  @each $percent in $list {
    $lighter: lighten($bgcolor, $percent);
    $darker: darken($bgcolor, $percent);
    $darker-ratio: contrast_ratio($color, $darker);
    $lighter-ratio: contrast_ratio($color, $lighter);
    @if($lighter-ratio > $darker-ratio){
      @if ($lighter-ratio > $threshold){
        @return $lighter;
      }
    }
    @if($darker-ratio > $lighter-ratio){
      @if ($darker-ratio > $threshold){
        @return $darker;
      }
    }
  }
  @return if(lightness($color) < 51, #FFF, #000)
}
div {
  width: 80px;
  height: 50px;
  padding: 5px 10px;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  border: 1px solid #999;
  font-size: 16px;
  display: inline-block;
  font-weight: bold;
}

.background-B0C4DE { background: #B0C4DE; color: text-contrast(#B0C4DE); }
.background-F08080 { background: #F08080; color: text-contrast(#F08080); }
.background-556B2F { background: #556B2F; color: text-contrast(#556B2F); }
.background-D2691E { background: #D2691E; color: text-contrast(#D2691E); }
.background-3CB371 { background: #3CB371; color: text-contrast(#3CB371); }
.background-6B8E23 { background: #6B8E23; color: text-contrast(#6B8E23); }
.background-BC8F8F { background: #BC8F8F; color: text-contrast(#BC8F8F); }
.background-0000FF { background: #0000FF; color: text-contrast(#0000FF); }
.background-FF69B4 { background: #FF69B4; color: text-contrast(#FF69B4); }
.background-808080 { background: #808080; color: text-contrast(#808080); }
.background-2F4F4F { background: #2F4F4F; color: text-contrast(#2F4F4F); }
.background-F0FFF0 { background: #F0FFF0; color: text-contrast(#F0FFF0); }
.background-F0FFFF { background: #F0FFFF; color: text-contrast(#F0FFFF); }
.background-0000CD { background: #0000CD; color: text-contrast(#0000CD); }
.background-6A5ACD { background: #6A5ACD; color: text-contrast(#6A5ACD); }
.background-D2B48C { background: #D2B48C; color: text-contrast(#D2B48C); }
.background-DB7093 { background: #DB7093; color: text-contrast(#DB7093); }
.background-98FB98 { background: #98FB98; color: text-contrast(#98FB98); }
.background-7CFC00 { background: #7CFC00; color: text-contrast(#7CFC00); }
.background-9400D3 { background: #9400D3; color: text-contrast(#9400D3); }
.background-F5FFFA { background: #F5FFFA; color: text-contrast(#F5FFFA); }
.background-8A2BE2 { background: #8A2BE2; color: text-contrast(#8A2BE2); }
.background-CD853F { background: #CD853F; color: text-contrast(#CD853F); }
.background-A0522D { background: #A0522D; color: text-contrast(#A0522D); }
.background-BA55D3 { background: #BA55D3; color: text-contrast(#BA55D3); }
.background-FF4500 { background: #FF4500; color: text-contrast(#FF4500); }
.background-9932CC { background: #9932CC; color: text-contrast(#9932CC); }
.background-00BFFF { background: #00BFFF; color: text-contrast(#00BFFF); }
.background-9370DB { background: #9370DB; color: text-contrast(#9370DB); }
.background-FFF8DC { background: #FFF8DC; color: text-contrast(#FFF8DC); }
.background-800000 { background: #800000; color: text-contrast(#800000); }
.background-FFA07A { background: #FFA07A; color: text-contrast(#FFA07A); }
.background-FFF5EE { background: #FFF5EE; color: text-contrast(#FFF5EE); }
.background-2E8B57 { background: #2E8B57; color: text-contrast(#2E8B57); }
.background-008000 { background: #008000; color: text-contrast(#008000); }
.background-B22222 { background: #B22222; color: text-contrast(#B22222); }
.background-4682B4 { background: #4682B4; color: text-contrast(#4682B4); }
.background-E9967A { background: #E9967A; color: text-contrast(#E9967A); }
.background-AFEEEE { background: #AFEEEE; color: text-contrast(#AFEEEE); }
.background-C0C0C0 { background: #C0C0C0; color: text-contrast(#C0C0C0); }
.background-228B22 { background: #228B22; color: text-contrast(#228B22); }
.background-F8F8FF { background: #F8F8FF; color: text-contrast(#F8F8FF); }
.background-800080 { background: #800080; color: text-contrast(#800080); }
.background-FFE4B5 { background: #FFE4B5; color: text-contrast(#FFE4B5); }
.background-778899 { background: #778899; color: text-contrast(#778899); }
.background-4169E1 { background: #4169E1; color: text-contrast(#4169E1); }
.background-008080 { background: #008080; color: text-contrast(#008080); }
.background-00FF7F { background: #00FF7F; color: text-contrast(#00FF7F); }
.background-191970 { background: #191970; color: text-contrast(#191970); }
.background-FAEBD7 { background: #FAEBD7; color: text-contrast(#FAEBD7); }
.background-EE82EE { background: #EE82EE; color: text-contrast(#EE82EE); }
.background-006400 { background: #006400; color: text-contrast(#006400); }
.background-00FF00 { background: #00FF00; color: text-contrast(#00FF00); }
.background-8B008B { background: #8B008B; color: text-contrast(#8B008B); }
.background-FFD700 { background: #FFD700; color: text-contrast(#FFD700); }
.background-EEE8AA { background: #EEE8AA; color: text-contrast(#EEE8AA); }
.background-FFEBCD { background: #FFEBCD; color: text-contrast(#FFEBCD); }
.background-9ACD32 { background: #9ACD32; color: text-contrast(#9ACD32); }
.background-FFE4E1 { background: #FFE4E1; color: text-contrast(#FFE4E1); }
.background-FFFACD { background: #FFFACD; color: text-contrast(#FFFACD); }
.background-FAFAD2 { background: #FAFAD2; color: text-contrast(#FAFAD2); }
.background-48D1CC { background: #48D1CC; color: text-contrast(#48D1CC); }
.background-87CEFA { background: #87CEFA; color: text-contrast(#87CEFA); }
.background-ADD8E6 { background: #ADD8E6; color: text-contrast(#ADD8E6); }
.background-1E90FF { background: #1E90FF; color: text-contrast(#1E90FF); }
.background-708090 { background: #708090; color: text-contrast(#708090); }
.background-FDF5E6 { background: #FDF5E6; color: text-contrast(#FDF5E6); }
.background-F4A460 { background: #F4A460; color: text-contrast(#F4A460); }
.background-C71585 { background: #C71585; color: text-contrast(#C71585); }
.background-E0FFFF { background: #E0FFFF; color: text-contrast(#E0FFFF); }
.background-F5F5DC { background: #F5F5DC; color: text-contrast(#F5F5DC); }
.background-FFDEAD { background: #FFDEAD; color: text-contrast(#FFDEAD); }
.background-FFF0F5 { background: #FFF0F5; color: text-contrast(#FFF0F5); }
.background-FFC0CB { background: #FFC0CB; color: text-contrast(#FFC0CB); }
.background-7B68EE { background: #7B68EE; color: text-contrast(#7B68EE); }
.background-40E0D0 { background: #40E0D0; color: text-contrast(#40E0D0); }
.background-4B0082 { background: #4B0082; color: text-contrast(#4B0082); }
.background-ADFF2F { background: #ADFF2F; color: text-contrast(#ADFF2F); }
.background-87CEEB { background: #87CEEB; color: text-contrast(#87CEEB); }
.background-FF7F50 { background: #FF7F50; color: text-contrast(#FF7F50); }
.background-A9A9A9 { background: #A9A9A9; color: text-contrast(#A9A9A9); }
.background-6495ED { background: #6495ED; color: text-contrast(#6495ED); }
.background-E6E6FA { background: #E6E6FA; color: text-contrast(#E6E6FA); }
.background-7FFF00 { background: #7FFF00; color: text-contrast(#7FFF00); }
.background-FF0000 { background: #FF0000; color: text-contrast(#FF0000); }
.background-008B8B { background: #008B8B; color: text-contrast(#008B8B); }
.background-DEB887 { background: #DEB887; color: text-contrast(#DEB887); }
.background-B0E0E6 { background: #B0E0E6; color: text-contrast(#B0E0E6); }
.background-696969 { background: #696969; color: text-contrast(#696969); }
.background-00CED1 { background: #00CED1; color: text-contrast(#00CED1); }
.background-DDA0DD { background: #DDA0DD; color: text-contrast(#DDA0DD); }
.background-808000 { background: #808000; color: text-contrast(#808000); }
.background-90EE90 { background: #90EE90; color: text-contrast(#90EE90); }
.background-F5DEB3 { background: #F5DEB3; color: text-contrast(#F5DEB3); }
.background-8B4513 { background: #8B4513; color: text-contrast(#8B4513); }
.background-8FBC8F { background: #8FBC8F; color: text-contrast(#8FBC8F); }
.background-DA70D6 { background: #DA70D6; color: text-contrast(#DA70D6); }
.background-FF6347 { background: #FF6347; color: text-contrast(#FF6347); }
.background-66CDAA { background: #66CDAA; color: text-contrast(#66CDAA); }
.background-5F9EA0 { background: #5F9EA0; color: text-contrast(#5F9EA0); }
.background-FA8072 { background: #FA8072; color: text-contrast(#FA8072); }
.background-FAF0E6 { background: #FAF0E6; color: text-contrast(#FAF0E6); }
.background-B8860B { background: #B8860B; color: text-contrast(#B8860B); }
.background-FF8C00 { background: #FF8C00; color: text-contrast(#FF8C00); }
.background-FFFFFF { background: #FFFFFF; color: text-contrast(#FFFFFF); }
.background-CD5C5C { background: #CD5C5C; color: text-contrast(#CD5C5C); }
.background-000080 { background: #000080; color: text-contrast(#000080); }
.background-000000 { background: #000000; color: text-contrast(#000000); }
.background-FFE4C4 { background: #FFE4C4; color: text-contrast(#FFE4C4); }
.background-DCDCDC { background: #DCDCDC; color: text-contrast(#DCDCDC); }
.background-FFFF00 { background: #FFFF00; color: text-contrast(#FFFF00); }
.background-8B0000 { background: #8B0000; color: text-contrast(#8B0000); }
.background-FFFFE0 { background: #FFFFE0; color: text-contrast(#FFFFE0); }
.background-FFDAB9 { background: #FFDAB9; color: text-contrast(#FFDAB9); }
.background-A52A2A { background: #A52A2A; color: text-contrast(#A52A2A); }
.background-FFFAFA { background: #FFFAFA; color: text-contrast(#FFFAFA); }
.background-00FFFF { background: #00FFFF; color: text-contrast(#00FFFF); }
.background-00008B { background: #00008B; color: text-contrast(#00008B); }
.background-DC143C { background: #DC143C; color: text-contrast(#DC143C); }
.background-00FA9A { background: #00FA9A; color: text-contrast(#00FA9A); }
.background-FFEFD5 { background: #FFEFD5; color: text-contrast(#FFEFD5); }
.background-FFA500 { background: #FFA500; color: text-contrast(#FFA500); }
.background-32CD32 { background: #32CD32; color: text-contrast(#32CD32); }
.background-BDB76B { background: #BDB76B; color: text-contrast(#BDB76B); }
.background-DAA520 { background: #DAA520; color: text-contrast(#DAA520); }
.background-7FFFD4 { background: #7FFFD4; color: text-contrast(#7FFFD4); }
.background-FF00FF { background: #FF00FF; color: text-contrast(#FF00FF); }
.background-FFFAF0 { background: #FFFAF0; color: text-contrast(#FFFAF0); }
.background-D3D3D3 { background: #D3D3D3; color: text-contrast(#D3D3D3); }
.background-FFFFF0 { background: #FFFFF0; color: text-contrast(#FFFFF0); }
.background-483D8B { background: #483D8B; color: text-contrast(#483D8B); }
.background-00FFFF { background: #00FFFF; color: text-contrast(#00FFFF); }
.background-F0F8FF { background: #F0F8FF; color: text-contrast(#F0F8FF); }
.background-FF1493 { background: #FF1493; color: text-contrast(#FF1493); }
.background-D8BFD8 { background: #D8BFD8; color: text-contrast(#D8BFD8); }
.background-F0E68C { background: #F0E68C; color: text-contrast(#F0E68C); }
.background-FF00FF { background: #FF00FF; color: text-contrast(#FF00FF); }
.background-FFB6C1 { background: #FFB6C1; color: text-contrast(#FFB6C1); }
.background-20B2AA { background: #20B2AA; color: text-contrast(#20B2AA); }
.background-F5F5F5 { background: #F5F5F5; color: text-contrast(#F5F5F5); }