added color guidelines for wikipedia, and factored some color checks into the prelude

5 files changed, 91 insertions, 6 deletions

diff --git a/guidelines/wikipedia/color.js b/guidelines/wikipedia/color.js
new file mode 100644
index 0000000..2ff1f42
--- /dev/null
+++ b/guidelines/wikipedia/color.js
@@ -0,0 +1,31 @@
+exports.name = "Color use";
+exports.description = "Use colors that have sufficient contrast and avoid issues with common forms of color blindness.";
+
+var fc = fiveui.color;
+var AA_RATIO = 4.5;
+var AAA_RATIO = 7;
+
+exports.rule = function (report) {
+  $5('#mw-content-text *')
+    // filter for lowest level elts having non-empty text
+    .filter(function () {
+      var $this = $(this);
+      return $this.children().length == 0 && $.trim($this.text()).length > 0;
+    })
+    .each(function (i) {
+      var fg = fc.colorToRGB($(this).css('color'));
+      var bg = fc.findBGColor($(this));
+      if (fg && bg) {
+        var ratio = fc.contrast(fc.luminance(fg), fc.luminance(bg));
+
+        if (ratio < AA_RATIO) {
+          report.error('Element has poor contrast: ' + ratio +
+                       " ratio should be greater than " + AA_RATIO, this);
+        } else if (ratio < AAA_RATIO){
+          report.warning('Element has poor contrast: ' + ratio +
+                      " ratio should be greater than " + AAA_RATIO, this);
+        }
+      }
+  });
+
+};
diff --git a/guidelines/wikipedia/strikeout.js b/guidelines/wikipedia/strikeout.js
index b3922d9..46623a5 100644
--- a/guidelines/wikipedia/strikeout.js
+++ b/guidelines/wikipedia/strikeout.js
@@ -1,5 +1,5 @@
 exports.name = "Don't use strikeout.";
-exports.description = "Strikout tags are poorly supported by screenreaders, which can cause confusion.";
+exports.description = "By default, most screen readers do not indicate presentational text attributes (bold, italic, underline) or even semantic text attributes (emphasis, importance, text deletion), so struck-out text is read normally along with any other text.";
 
 exports.rule = function (report) {
   var err = function(idx, elt) {
diff --git a/guidelines/wikipedia/testPages/Évariste Galois - Wikipedia, the free encyclopedia.html b/guidelines/wikipedia/testPages/Évariste Galois - Wikipedia, the free encyclopedia.html
index bb72c7d..9be190b 100644
--- a/guidelines/wikipedia/testPages/Évariste Galois - Wikipedia, the free encyclopedia.html
+++ b/guidelines/wikipedia/testPages/Évariste Galois - Wikipedia, the free encyclopedia.html
@@ -150,7 +150,7 @@ mw.loader.load(["mediawiki.page.startup","mediawiki.legacy.wikibits","mediawiki.
 <p></p>
 <h2><span class="mw-headline" id="Life">Life</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="http://en.wikipedia.org/w/index.php?title=%C3%89variste_Galois&action=edit&section=1" title="Edit section: Life">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
 <h4><span class="mw-headline" id="Early_life">Early life</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="http://en.wikipedia.org/w/index.php?title=%C3%89variste_Galois&action=edit&section=2" title="Edit section: Early life">edit</a><span class="mw-editsection-bracket">]</span></span></h4>
-<p>Galois was born on 25 October 1811 to Nicolas-Gabriel Galois and Adélaïde-Marie (born Demante). His father was a <a href="http://en.wikipedia.org/wiki/First_French_Republic" title="First French Republic" class="mw-redirect">Republican</a> and was head of Bourg-la-Reine's <a href="http://en.wikipedia.org/wiki/Liberal_party" title="Liberal party" class="mw-redirect">liberal party</a>. He became mayor of the village after <a href="http://en.wikipedia.org/wiki/Louis_XVIII_of_France" title="Louis XVIII of France">Louis XVIII</a> returned to the throne in 1814. His mother, the daughter of a <a href="http://en.wikipedia.org/wiki/Jurist" title="Jurist">jurist</a>, was a fluent reader of <a href="http://en.wikipedia.org/wiki/Latin" title="Latin">Latin</a> and <a href="http://en.wikipedia.org/wiki/Classical_literature" title="Classical literature" class="mw-redirect">classical literature</a> and was responsible for her son's education for his first twelve years. At the age of 10, Galois was offered a place at the <a href="http://en.wikipedia.org/w/index.php?title=College_of_Reims&action=edit&redlink=1" class="new" title="College of Reims (page does not exist)">college of Reims</a>, but his mother preferred to keep him at home.</p>
+<p style="color: #ccc">Galois was born on 25 <span style="color: #bbb">October 1811</span> to Nicolas-Gabriel Galois and Adélaïde-Marie (born Demante). His father was a <a href="http://en.wikipedia.org/wiki/First_French_Republic" title="First French Republic" class="mw-redirect">Republican</a> and was head of Bourg-la-Reine's <a href="http://en.wikipedia.org/wiki/Liberal_party" title="Liberal party" class="mw-redirect">liberal party</a>. He became mayor of the village after <a href="http://en.wikipedia.org/wiki/Louis_XVIII_of_France" title="Louis XVIII of France">Louis XVIII</a> returned to the throne in 1814. His mother, the daughter of a <a href="http://en.wikipedia.org/wiki/Jurist" title="Jurist">jurist</a>, was a fluent reader of <a href="http://en.wikipedia.org/wiki/Latin" title="Latin">Latin</a> and <a href="http://en.wikipedia.org/wiki/Classical_literature" title="Classical literature" class="mw-redirect">classical literature</a> and was responsible for her son's education for his first twelve years. At the age of 10, Galois was offered a place at the <a href="http://en.wikipedia.org/w/index.php?title=College_of_Reims&action=edit&redlink=1" class="new" title="College of Reims (page does not exist)">college of Reims</a>, but his mother preferred to keep him at home.</p>
 <p>In October <strike>1492</strike> 1823, he entered the <a href="http://en.wikipedia.org/wiki/Lyc%C3%A9e_Louis-le-Grand" title="Lycée Louis-le-Grand">Lycée Louis-le-Grand</a>, and despite some <del>chaos</del> turmoil in the school at the beginning of the term (when about a hundred students were expelled), Galois managed to perform well for the first two years, obtaining the first prize in Latin. He soon became bored with his studies and, at the age of 14, he began to take a serious interest in mathematics.</p>
 <p>He found a copy of <a href="http://en.wikipedia.org/wiki/Adrien_Marie_Legendre" title="Adrien Marie Legendre" class="mw-redirect">Adrien Marie Legendre</a>'s <i><a href="http://en.wikipedia.org/w/index.php?title=%C3%89l%C3%A9ments_de_G%C3%A9om%C3%A9trie&action=edit&redlink=1" class="new" title="Éléments de Géométrie (page does not exist)">Éléments de Géométrie</a></i>, which it is said that he read "like a novel" and mastered at the first reading. At 15, he was reading the original papers of <a href="http://en.wikipedia.org/wiki/Joseph_Louis_Lagrange" title="Joseph Louis Lagrange" class="mw-redirect">Joseph Louis Lagrange</a>, such as the landmark <i><a href="http://en.wikipedia.org/wiki/R%C3%A9flexions_sur_la_r%C3%A9solution_alg%C3%A9brique_des_%C3%A9quations" title="Réflexions sur la résolution algébrique des équations" class="mw-redirect">Réflexions sur la résolution algébrique des équations</a></i> which likely motivated his later work on equation theory, and <i>Leçons sur le calcul des fonctions</i>, work intended for professional mathematicians, yet his classwork remained uninspired, and his teachers accused him of <i>affecting</i> ambition and originality in a negative way.<sup id="cite_ref-stewart-gt_2-0" class="reference"><a href="http://en.wikipedia.org/wiki/Galois#cite_note-stewart-gt-2"><span>[</span>2<span>]</span></a></sup></p>
 <h3><span class="mw-headline" id="Budding_mathematician">Budding mathematician</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="http://en.wikipedia.org/w/index.php?title=%C3%89variste_Galois&action=edit&section=3" title="Edit section: Budding mathematician">edit</a><span class="mw-editsection-bracket">]</span></span></h3>
diff --git a/guidelines/wikipedia/wikipedia.json b/guidelines/wikipedia/wikipedia.json
index ea2df09..87b20b1 100644
--- a/guidelines/wikipedia/wikipedia.json
+++ b/guidelines/wikipedia/wikipedia.json
@@ -4,5 +4,6 @@
 , "rules":
   [ "headingOrder.js"
   , "strikeout.js"
+  , "color.js"
   ]
 }
\ No newline at end of file
diff --git a/src/js/fiveui/injected/prelude.js b/src/js/fiveui/injected/prelude.js
index cb1422a..250488f 100644
--- a/src/js/fiveui/injected/prelude.js
+++ b/src/js/fiveui/injected/prelude.js
@@ -284,7 +284,7 @@ equalRGBA = function (c1, c2) {
  */
 fiveui.color.rgbToHex = function (r, g, b) {
   return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
+};
 
 /**
  * Convert a 3-byte hex value to base-10 RGB 
@@ -296,7 +296,7 @@ fiveui.color.hexToRGB = function (hex) {
         g: parseInt(result[2], 16),
         b: parseInt(result[3], 16)
     } : null;
-}
+};
 
 /**
  * Covert rgb colors to hex and abreviated hex colors to their full 3 byte
@@ -319,7 +319,7 @@ fiveui.color.colorToHex = function(color) {
       }
     }
     else if (color.substr(0,3) === 'rgb') {
-      var c = fiveui.color.colorToRGB(color)
+      var c = fiveui.color.colorToRGB(color);
       return fiveui.color.rgbToHex(c.r, c.g, c.b);
     }
     else {
@@ -366,6 +366,59 @@ fiveui.color.colorToRGB = function(color) {
            a: alpha };
 };
 
+
+/**
+ * Calculate the relative {@link
+ * http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ * luminance} of an sRGB color.
+ *
+ * This function does not account for alpha values that are not 1.
+ * That is, it assumes that the incomming color is fully opaque, or
+ * displayed on a white background.
+ *
+ * @param {!Object} An RGB color object with attributes: r, g, b, a
+ * @returns {!doubl} A measure of the relative luminance according to
+ * the WCAG 2.0 specification.
+ *
+ */
+fiveui.color.luminance = function(color) {
+  var toSRGB = function(c) {
+    return c/255;
+  };
+
+  var toLumComponent = function(c) {
+    if (c <= 0.03928) {
+      return c / 12.92;
+    } else {
+      return Math.pow((c + 0.055) / 1.055, 2.4);
+    }
+  };
+
+  return 0.2126 * toLumComponent(toSRGB(color.r))
+       + 0.7152 * toLumComponent(toSRGB(color.g))
+       + 0.0722 * toLumComponent(toSRGB(color.b));
+};
+
+/**
+ * Compute the contrast ratio, according to {@link
+ * http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+ * WCAG 2.0}
+ *
+ * This function will try to figure out which color is lighter (the
+ * smaller one).
+ *
+ * @param {!double} lum1 The relative luminance of the first color.
+ * @param {!double} lum2 The relative luminance of the second color.
+ * @returns {!double} The contrast ratio.
+ */
+fiveui.color.contrast = function(lum1, lum2) {
+  if (lum1 > lum2) {
+    return (lum1 + 0.05) / (lum2 + 0.05);
+  } else {
+    return (lum2 + 0.05) / (lum1 + 0.05);
+  }
+};
+
 /**
  * Computationally determine the actual displayed background color for
  * an object.  This accounts for parent colors that may appear when 
@@ -466,7 +519,7 @@ fiveui.font.getFont = function (jElt) {
       };
     }
     else {
-      res.size = psize
+      res.size = psize;
     }
   } else {
     res.size = '';