1 files changed, 50 insertions, 11 deletions
diff --git a/guidelines/wikipedia/color.js b/guidelines/wikipedia/color.js
index 2ff1f42..13c5422 100644
--- a/guidelines/wikipedia/color.js
+++ b/guidelines/wikipedia/color.js
@@ -2,30 +2,69 @@ 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;
+var AA_NORMAL = 4.5;
+var AA_BIG = 3;
+var AAA_NORMAL = 7;
+var AAA_BIG = 4.5;
+
+
+/**
+ * Compute the font size in points, assuming 96dpi.
+ */
+var fontSizePt = function(elt) {
+  var px = $(elt).css('font-size');
+  return parseInt(px) * 72 / 96;
+};
+
+var isBold = function(elt) {
+  return $(elt).css('font-weight') == 'bold';
+};
+
+/**
+ * See if the text counts as "large scale" according to the W3C:
+ * (http://www.w3.org/TR/2008/REC-WCAG20-20081211/#larger-scaledef)
+ */
+var isLargeScale = function(elt) {
+  var size = fontSizePt(elt);
+  var bld = isBold(elt);
+  return (18 <= size || (14 <= size && bld));
+};
+
+var getAARatio = function(elt) {
+  if (isLargeScale(elt)) {
+    return AA_BIG;
+  }
+  return AA_NORMAL;
+};
+
+var getAAARatio = function(elt) {
+  if (isLargeScale(elt)) {
+    return AAA_BIG;
+  }
+  return AAA_NORMAL;
+};
 
 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));
+    .each(function (i,elt) {
+      var fg = fc.colorToRGB($(elt).css('color'));
+      var bg = fc.findBGColor($(elt));
       if (fg && bg) {
         var ratio = fc.contrast(fc.luminance(fg), fc.luminance(bg));
-
-        if (ratio < AA_RATIO) {
+        console.log("comparing witch ratio" + ratio);
+        if (ratio < getAARatio(elt)) {
           report.error('Element has poor contrast: ' + ratio +
-                       " ratio should be greater than " + AA_RATIO, this);
-        } else if (ratio < AAA_RATIO){
+                       " ratio should be greater than " + getAARatio(elt), elt);
+        } else if (ratio < getAAARatio(elt)){
           report.warning('Element has poor contrast: ' + ratio +
-                      " ratio should be greater than " + AAA_RATIO, this);
+                      " ratio should be greater than " + getAAARatio(elt), elt);
         }
       }
   });
-
 };