added "color brightness difference" and "color difference" rules

3 files changed, 73 insertions, 1 deletions

diff --git a/exampleData/ruleSets/accessibility/accessibility.json b/exampleData/ruleSets/accessibility/accessibility.json
index ba7c7aa..4c2a940 100644
--- a/exampleData/ruleSets/accessibility/accessibility.json
+++ b/exampleData/ruleSets/accessibility/accessibility.json
@@ -2,6 +2,8 @@
 , "description": "Web Accessibility Guidelines"
 , "rules": [ "titleNonEmpty.js",
              "headingExists.js",
-             "imagesAltText.js"
+             "imagesAltText.js",
+             "colorBrightness.js",
+             "colorDifference.js"
            ]
 }
diff --git a/exampleData/ruleSets/accessibility/colorBrightness.js b/exampleData/ruleSets/accessibility/colorBrightness.js
new file mode 100644
index 0000000..737e0d6
--- /dev/null
+++ b/exampleData/ruleSets/accessibility/colorBrightness.js
@@ -0,0 +1,39 @@
+exports.name = "colorBrightness";
+
+exports.description = "Elements should provide sufficient color brightness " +
+                      "difference";
+
+exports.rule = function() {
+
+  var MIN_DIFF = 125; // http://www.w3.org/TR/2000/WD-AERT-20000426#color
+
+  /**
+   * Return a weighted average of RGB values. See
+   * http://www.w3.org/TR/2000/WD-AERT-20000426#color
+   * Input is an RGB color object: { r: <r>, g: <g>, b: <b> }.
+   */
+  var bright = function (c) {
+    return (c.r*299 + c.g*587 + c.b*114) / 1000.0;
+  };
+
+  /**
+   * Return the absolute difference between brightnesses of the
+   * given RGB color objects.
+   * Input is two RGB color objects (see `bright`).
+   */
+  var brightDiff = function (c1, c2) {
+    return Math.abs(bright(c1) - bright(c2));
+  };
+
+  var that = this;
+  fiveui.query('*').each(function (i) {
+    var fg = fiveui.color.colorToRGB($(this).attr('color'));
+    var bg = fiveui.color.colorToRGB($(this).attr('background'));
+    if (fg && bg) {
+      var diff = brightDiff(fg, bg);
+      if (diff < MIN_DIFF) {
+        that.report('Element has poor brightness difference: ' + diff, e);
+      }
+    }
+  });
+};
diff --git a/exampleData/ruleSets/accessibility/colorDifference.js b/exampleData/ruleSets/accessibility/colorDifference.js
new file mode 100644
index 0000000..c7a581d
--- /dev/null
+++ b/exampleData/ruleSets/accessibility/colorDifference.js
@@ -0,0 +1,31 @@
+exports.name = "colorDifference";
+
+exports.description = "Elements should provide sufficient color difference";
+
+exports.rule = function() {
+
+  var MIN_COLOR_DIFF = 500; // http://www.w3.org/TR/2000/WD-AERT-20000426#color
+
+  /**
+   * Return the absolute "color difference" between two * given RGB color
+   * objects.
+   * Input is two RGB color objects.
+   */
+  var colorDiff = function (c1, c2) {
+    return Math.abs(c1.r - c2.r) +
+           Math.abs(c1.g - c2.g) +
+           Math.abs(c1.b - c2.b);
+  };
+
+  var that = this;
+  fiveui.query('*').each(function (i) {
+    var fg = fiveui.color.colorToRGB($(this).attr('color'));
+    var bg = fiveui.color.colorToRGB($(this).attr('background'));
+    if (fg && bg) {
+      var diff = colorDiff(fg, bg);
+      if (diff < MIN_DIFF) {
+        that.report('Element has poor color difference: ' + diff, e);
+      }
+    }
+  });
+};