Commits

Christian Krebs committed 16aefc1

Added TC to measure color contrast.

Comments (0)

Files changed (2)

resources/scripts/colors.js

   this.__hsv = [0, 50, 50]; 
 }
 
+Color.KEYWORD = "keyword";
+Color.HEX = "hex";
+Color.RGB = "rgb";
+Color.RGBA = "rgba";
+Color.HSL = "hsl";
+Color.HSLA = "hsla";
+
 Color.prototype = new function()
 {
 
     yellowgreen: '9acd32'
   }
 
-  this.KEYWORD = 'keyword';
-  this.HEX = 'hex';
-  this.RGB = 'rgb';
-  this.RGBA = 'rgba';
-  this.HSL = 'hsl';
-  this.HSLA = 'hsla';
+  this.KEYWORD = Color.KEYWORD;
+  this.HEX = Color.HEX;
+  this.RGB = Color.RGB;
+  this.RGBA = Color.RGBA;
+  this.HSL = Color.HSL;
+  this.HSLA = Color.HSLA;
   this._double_hex = function(c){return c + c};
   this._trim_int = function(c){return parseInt(c.trim())};
   this._re_hex6 = /^#[0-9a-fA-F]{6}$/;
   {
     var str = in_str.trim(), color = null;
     this.cssvalue = in_str;
-    this.alpha = null;
+    this.alpha = 1;
     this.type = '';
     if (str == "transparent")
     {
     return null;
   }
 
+    
+  this.serializeToCSSColor = function(type)
+  {
+    switch (type)
+    {
+      case Color.HEX:
+        return this.hhex;
+
+      case Color.RGB:
+        return this.rgb;
+      
+      case Color.RGBA:
+        return this.rgba;
+
+      case Color.HSL:
+        return this.hsl;
+
+      case Color.HSLA:
+        return this.hsla;
+    }
+    throw new Error("NOT_VALID_COLOR_TYPE");
+  };
+
   this.invert = function()
   {
     this.setHue( (this.__hsl[HUE] + 180 ) % 360 );
    */
   this.getHex = function()
   {
-    return this.rgb_to_hex_c(this.__rgb);
+    return this.rgb_to_hex_c(this.__rgb).toUpperCase();
+  }
+
+  // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+  this.getLuminance = function()
+  {
+    var RGB = this.__rgb.map(function(c)
+    { 
+      var cs =  c / 255;
+      return cs <= 0.03928
+           ? cs / 12.92
+           : Math.pow(((cs + 0.055) / 1.055), 2.4);
+    });
+    return 0.2126 * RGB[0] + 0.7152 * RGB[1] + 0.0722 * RGB[2];
+  };
+
+  // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+  this.getContrastRatio = function(color2)
+  {
+    var l1 = this.getLuminance();
+    var l2 = color2.getLuminance();
+    return l1 > l2
+         ? (l1 + 0.05) / (l2 + 0.05)
+         : (l2 + 0.05) / (l1 + 0.05);
+  };  
+
+
+  this._alpha2string = function()
+  {
+    if (typeof this.alpha == 'number')
+    {
+      if (this.alpha == 1)
+        return "1";
+
+      if (this.alpha == 0)
+        return "0";
+
+      return this.alpha.toFixed(3);
+    }
+    return "1";
   }
   
   // convenience 
       this.getHue() + ', ' +
       this.getSaturation() + '%, ' +
       this.getLuminosity() + '%, ' +
-      (typeof this.alpha == 'number' ? this.alpha.toFixed(3) : '1') +
+      this._alpha2string() +
       ")");
   });
   this.__defineSetter__('hsla', function(val){}); // parse hsl?
       this.getRed() + ', ' +
       this.getGreen() + ', ' +
       this.getBlue() + ', ' +
-      (typeof this.alpha == 'number' ? this.alpha.toFixed(3) : '1') +
+      this._alpha2string() +
       ")");
   });
   this.__defineSetter__('rgba', function(val){}); // parse rgb?
   {
     return this._rgb_to_hsl_or_hsv ( r, g, b, true );
   }
+}
 
-}
-Color.prototype.constructor = Color;
+Color.prototype.constructor = Color;

tests/color-contrast/index.html

+<!doctype html>
+<style>
+body
+{
+  font: menu;
+}
+</style>
+<script src="../../resources/scripts/colors.js"></script>
+<script>
+document.oninput = function()
+{
+  var FOREGROUND = 0;
+  var BACKFROUND = 1;
+  var inputs = document.querySelectorAll("input");
+  var c1 = new Color().parseCSSColor(inputs[FOREGROUND].value);
+  var c2 = new Color().parseCSSColor(inputs[BACKFROUND].value);
+  var s = document.querySelector("p + p");
+  s.style.cssText = "color: " + inputs[FOREGROUND].value + "; " +
+                    "background-color:" + inputs[BACKFROUND].value + "; ";
+  document.querySelector("h2").textContent = "contrast: " + c1.getContrastRatio(c2).toFixed(2);
+}
+</script>
+
+<p>
+  <label>foreground color: <input type=color value=#000000></label>
+  <label>background color: <input type=color value=#ffffff></label>
+<p>The quick brown fox jumps over the lazy dog
+<h2></h2>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.