An-Anonymous-Pen.markdown

An Anonymous Pen

Compass's color contrast mixin seems to favor dark text because it depends on the HSLA lightness of a color. Selecting between light and dark text based on a lightness threshold is not enough to make proper color contrast decisions.

W3C discusses an algorithm to ensure a color is well contrasted against a background. http://www.w3.org/WAI/ER/WD-AERT/#color-contrast

I've used the algorithm here for finding the difference between a given background color, and specified light, and dark values. The mixin will use the light or dark value that has a greater difference form the background color.

I left the compass "contrasted" mixin commented in the code, un comment to see the difference between contrast choices.

A Pen by Anonasaurus Rex on CodePen.

License.

index.haml

.grid.clearfix
  .row
    %span.number.color1 WOOHOO!
    %span.number.color2 WOOHOO!
    %span.number.color3 WOOHOO!
    %span.number.color4 WOOHOO!
    %span.number.color5 WOOHOO!
    %span.number.color6 WOOHOO!
    %span.number.color7 WOOHOO!
    %span.number.color8 WOOHOO!
    %span.number.color9 WOOHOO!
    %span.number.color10 WOOHOO!
  
  .row
    %span.number.color11 WOOHOO!
    %span.number.color12 WOOHOO!
    %span.number.color13 WOOHOO!
    %span.number.color14 WOOHOO!
    %span.number.color15 WOOHOO!
    %span.number.color16 WOOHOO!
    %span.number.color17 WOOHOO!
    %span.number.color18 WOOHOO!
    %span.number.color19 WOOHOO!
    %span.number.color20 WOOHOO!

  .row
    %span.number.color21 WOOHOO!
    %span.number.color22 WOOHOO!
    %span.number.color23 WOOHOO!
    %span.number.color24 WOOHOO!
    %span.number.color25 WOOHOO!
    %span.number.color26 WOOHOO!
    %span.number.color27 WOOHOO!
    %span.number.color28 WOOHOO!
    %span.number.color29 WOOHOO!
    %span.number.color30 WOOHOO!

  .row
    %span.number.color31 WOOHOO!
    %span.number.color32 WOOHOO!
    %span.number.color33 WOOHOO!
    %span.number.color34 WOOHOO!
    %span.number.color35 WOOHOO!
    %span.number.color36 WOOHOO!
    %span.number.color37 WOOHOO!
    %span.number.color38 WOOHOO!
    %span.number.color39 WOOHOO!
    %span.number.color40 WOOHOO!

  .row
    %span.number.color41 WOOHOO!
    %span.number.color42 WOOHOO!
    %span.number.color43 WOOHOO!
    %span.number.color44 WOOHOO!
    %span.number.color45 WOOHOO!
    %span.number.color46 WOOHOO!
    %span.number.color47 WOOHOO!
    %span.number.color48 WOOHOO!
    %span.number.color49 WOOHOO!
    %span.number.color50 WOOHOO!

  .row
    %span.number.color51 WOOHOO!
    %span.number.color52 WOOHOO!
    %span.number.color53 WOOHOO!
    %span.number.color54 WOOHOO!
    %span.number.color55 WOOHOO!
    %span.number.color56 WOOHOO!
    %span.number.color57 WOOHOO!
    %span.number.color58 WOOHOO!
    %span.number.color59 WOOHOO!
    %span.number.color60 WOOHOO!

  .row
    %span.number.color61 WOOHOO!
    %span.number.color62 WOOHOO!
    %span.number.color63 WOOHOO!
    %span.number.color64 WOOHOO!
    %span.number.color65 WOOHOO!
    %span.number.color66 WOOHOO!
    %span.number.color67 WOOHOO!
    %span.number.color68 WOOHOO!
    %span.number.color69 WOOHOO!
    %span.number.color70 WOOHOO!

  .row
    %span.number.color71 WOOHOO!
    %span.number.color72 WOOHOO!
    %span.number.color73 WOOHOO!
    %span.number.color74 WOOHOO!
    %span.number.color75 WOOHOO!
    %span.number.color76 WOOHOO!
    %span.number.color77 WOOHOO!
    %span.number.color78 WOOHOO!
    %span.number.color79 WOOHOO!
    %span.number.color80 WOOHOO!

  .row
    %span.number.color81 WOOHOO!
    %span.number.color82 WOOHOO!
    %span.number.color83 WOOHOO!
    %span.number.color84 WOOHOO!
    %span.number.color85 WOOHOO!
    %span.number.color86 WOOHOO!
    %span.number.color87 WOOHOO!
    %span.number.color88 WOOHOO!
    %span.number.color89 WOOHOO!
    %span.number.color90 WOOHOO!

  .row
    %span.number.color91 WOOHOO!
    %span.number.color92 WOOHOO!
    %span.number.color93 WOOHOO!
    %span.number.color94 WOOHOO!
    %span.number.color95 WOOHOO!
    %span.number.color96 WOOHOO!
    %span.number.color97 WOOHOO!
    %span.number.color98 WOOHOO!
    %span.number.color99 WOOHOO!
    %span.number.color100 WOOHOO!

  .row
    %span.number.color101 WOOHOO!
    %span.number.color102 WOOHOO!
    %span.number.color103 WOOHOO!
    %span.number.color104 WOOHOO!
    %span.number.color105 WOOHOO!
    %span.number.color106 WOOHOO!
    %span.number.color107 WOOHOO!
    %span.number.color108 WOOHOO!
    %span.number.color109 WOOHOO!
    %span.number.color110 WOOHOO!

  .row
    %span.number.color111 WOOHOO!
    %span.number.color112 WOOHOO!
    %span.number.color113 WOOHOO!
    %span.number.color114 WOOHOO!
    %span.number.color115 WOOHOO!
    %span.number.color116 WOOHOO!
    %span.number.color117 WOOHOO!
    %span.number.color118 WOOHOO!
    %span.number.color119 WOOHOO!
    %span.number.color120 WOOHOO!

  .row
    %span.number.color121 WOOHOO!
    %span.number.color122 WOOHOO!
    %span.number.color123 WOOHOO!
    %span.number.color124 WOOHOO!
    %span.number.color125 WOOHOO!
    %span.number.color126 WOOHOO!
    %span.number.color127 WOOHOO!
    %span.number.color128 WOOHOO!
    %span.number.color129 WOOHOO!
    %span.number.color130 WOOHOO!

style.scss

@import "compass";
@import "compass";

/**=== Variable ===**/
$color1: AliceBlue;
$color2: AntiqueWhite;
$color3: Aqua;
$color4: Aquamarine;
$color5: Azure;
$color6: Beige;
$color7: Bisque;
$color8: Black;
$color9: BlanchedAlmond;
$color10: Blue;

$color11: BlueViolet;
$color12: Brown;
$color13: BurlyWood;
$color14: CadetBlue;
$color15: Chartreuse;
$color16: Chocolate;
$color17: Coral;
$color18: CornflowerBlue;
$color19: Cornsilk;
$color20: Crimson;

$color21: Cyan;
$color22: DarkBlue;
$color23: DarkCyan;
$color24: DarkGoldenrod;
$color25: DarkGray;
$color26: DarkGreen;
$color27: DarkKhaki;
$color28: DarkGray;
$color29: DarkMagenta;
$color30: DarkOliveGreen;

$color31: DarkOrange;
$color32: DarkOrchid;
$color33: DarkRed;
$color34: DarkSalmon;
$color35: DarkSeaGreen;
$color36: DarkSlateBlue;
$color37: DarkSlateGray;
$color38: DarkTurquoise;
$color39: DarkViolet;
$color40: DeepPink;

$color41: DeepSkyBlue;
$color42: DimGray;
$color43: DodgerBlue;
$color44: Firebrick;
$color45: FloralWhite;
$color46: ForestGreen;
$color47: Fuchsia;
$color48: Gainsboro;
$color49: GhostWhite;
$color50: Gold;

$color51: Goldenrod;
$color52: Gray;
$color53: Green;
$color54: GreenYellow;
$color55: Honeydew;
$color56: HotPink;
$color57: IndianRed;
$color58: Indigo;
$color59: Ivory;
$color60: Khaki;

$color51: Lavender;
$color52: LavenderBlush;
$color53: LawnGreen;
$color54: LemonChiffon;
$color55: LightBlue;
$color56: LightCoral;
$color57: LightCyan;
$color58: LightGoldenrodYellow;
$color59: LightGray;
$color60: LightGreen;

$color61: lightpink;
$color62: lightsalmon;
$color63: lightseagreen;
$color64: lightskyblue;
$color65: lightslategray;
$color66: lightsteelblue;
$color67: lightyellow;
$color68: lime;
$color69: magenta;
$color70: maroon;

$color71: mediumaquamarine;
$color72: mediumblue;
$color73: mediumorchid;
$color74: mediumpurple;
$color75: mediumseagreen;
$color76: mediumslateblue;
$color77: mediumspringgreen;
$color78: mediumturquoise;
$color79: mediumvioletred;
$color80: midnightblue;

$color81: mintcream;
$color82: mistyrose;
$color83: moccasin;
$color84: navajowhite;
$color85: navy;
$color86: oldlace;
$color87: olive;
$color88: olivedrab;
$color89: Orange;
$color90: Orangered;

$color91: orchid;
$color92: palegoldenrod;
$color93: palegreen;
$color94: paleturquoise;
$color95: palevioletred;
$color96: papayawhip;
$color97: peachpuff;
$color98: peru;
$color99: pink;
$color100: plum;

$color101: powderblue;
$color102: purple;
$color103: red;
$color104: rosybrown;
$color105: royalblue;
$color106: saddlebrown;
$color107: salmon;
$color108: sandybrown;
$color109: seagreen;
$color110: seashell;

$color111: sienna;
$color112: silver;
$color113: skyblue;
$color114: slateblue;
$color115: slategray;
$color116: snow;
$color117: springgreen;
$color118: steelblue;
$color119: tan;
$color120: teal;

$color121: thistle;
$color122: tomato;
$color123: turquoise;
$color124: violet;
$color125: wheat;
$color126: white;
$color127: whitesmoke;
$color128: yellow;
$color129: yellowgreen;
$color130: #BadA55;

$num: 0;

$dark-text-color: darkslategray;
$light-text-color: whitesmoke;

$contrasted-dark-default: $dark-text-color;
$contrasted-light-default: $light-text-color;

/**=== Mixins ===**/
@mixin text-contrast($bg-color, $dark-text: $dark-text-color, $light-text: $light-text-color) {
  
  $color-brightness: round((red($bg-color) * 299) + (green($bg-color) * 587) + (blue($bg-color) * 114) / 1000);
  
  $light-text-brightness: round((red($light-text) * 299) + (green($light-text) * 587) + (blue($light-text) * 114) / 1000);
  
  $dark-text-brightness: round((red($dark-text) * 299) + (green($dark-text) * 587) + (blue($dark-text) * 114) / 1000);
  
  @if abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness) {
    color: $light-text;
  }
    
  @else {
    color: $dark-text;
  }
  
  content: "#{$bg-color}";
}

/**=== CSS ===**/
body * {
  @include box-sizing(border-box);
}
.grid {
  .row {
    @include clearfix;
  }
  .number {
    float: left;
    width: 10%;
    padding: 25px 0 50px;
    position: relative;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
  }
}
.color-block {
  padding: 3px 6px;
  margin: 0;
}
@each $color in $color1, $color2, $color3, $color4, $color5, $color6, $color7, $color8, $color9, $color10, $color11, $color12, $color13, $color14, $color15, $color16, $color17, $color18, $color19, $color20, $color21, $color22, $color23, $color24, $color25, $color26, $color27, $color28, $color29, $color30, $color31, $color32, $color33, $color34, $color35, $color36, $color37, $color38, $color39, $color40, $color41, $color42, $color43, $color44, $color45, $color46, $color47, $color48, $color49, $color50, $color51, $color52, $color53, $color54, $color55, $color56, $color57, $color58, $color59, $color60, $color61, $color62, $color63, $color64, $color65, $color66, $color67, $color68, $color69, $color70, $color71, $color72, $color73, $color74, $color75, $color76, $color77, $color78, $color79, $color80, $color81, $color82, $color83, $color84, $color85, $color86, $color87, $color88, $color89, $color90, $color91, $color92, $color93, $color94, $color95, $color96, $color97, $color98, $color99, $color100, $color101, $color102, $color103, $color104, $color105, $color106, $color107, $color108, $color109, $color110, $color111, $color112, $color113, $color114, $color115, $color116, $color117, $color118, $color119, $color120, $color121, $color122, $color123, $color124, $color125, $color126, $color127, $color128, $color129, $color130 {
  $num: $num + 1;
  .color#{$num} {
    background: $color;
    @include text-contrast($color);
    //@include contrasted($color);
    &:after {
     @include text-contrast($color);
      position: absolute;
      bottom: 22px;
      font-weight: normal;
      font-size: 14px;
      left: 50%;
      width: 100%;
      margin-left: -50%;
      line-height: 11px;
      white-space: pre;
    }
  }
}