Merge pull request #2754 from Synchro/master

Update contrast function and tests, fixes #2743

Author: matthew-dean

lib/less/functions/color.js

@@ -266,33 +266,41 @@ colorFunctions = {
     greyscale: function (color) {
         return colorFunctions.desaturate(color, new Dimension(100));
     },
-    contrast: function (color, dark, light, threshold) {
+    contrast: function (color, color1, color2, threshold) {
+        // Return which of `color1` and `color2` has the greatest contrast with `color`
+        // according to the standard WCAG contrast ratio calculation.
+        // http://www.w3.org/TR/WCAG20/#contrast-ratiodef
+        // The threshold param is no longer used, in line with SASS.
         // filter: contrast(3.2);
         // should be kept as is, so check for color
         if (!color.rgb) {
             return null;
         }
-        if (typeof light === 'undefined') {
-            light = colorFunctions.rgba(255, 255, 255, 1.0);
+        if (typeof color1 === 'undefined') {
+            color1 = colorFunctions.rgba(0, 0, 0, 1.0);
         }
-        if (typeof dark === 'undefined') {
-            dark = colorFunctions.rgba(0, 0, 0, 1.0);
+        if (typeof color2 === 'undefined') {
+            color2 = colorFunctions.rgba(255, 255, 255, 1.0);
         }
-        //Figure out which is actually light and dark!
-        if (dark.luma() > light.luma()) {
-            var t = light;
-            light = dark;
-            dark = t;
+        var contrast1, contrast2;
+        var luma = color.luma();
+        var luma1 = color1.luma();
+        var luma2 = color2.luma();
+        // Calculate contrast ratios for each color
+        if (luma > luma1) {
+            contrast1 = (luma + 0.05) / (luma1 + 0.05);
+        } else {
+            contrast1 = (luma1 + 0.05) / (luma + 0.05);
         }
-        if (typeof threshold === 'undefined') {
-            threshold = 0.43;
+        if (luma > luma2) {
+            contrast2 = (luma + 0.05) / (luma2 + 0.05);
         } else {
-            threshold = number(threshold);
+            contrast2 = (luma2 + 0.05) / (luma + 0.05);
         }
-        if (color.luma() < threshold) {
-            return light;
+        if (contrast1 > contrast2) {
+            return color1;
         } else {
-            return dark;
+            return color2;
         }
     },
     argb: function (color) {

test/css/functions.css

@@ -38,7 +38,7 @@
   saturate-filter: saturate(5%);
   contrast-white: #000000;
   contrast-black: #ffffff;
-  contrast-red: #ffffff;
+  contrast-red: #000000;
   contrast-green: #000000;
   contrast-blue: #ffffff;
   contrast-yellow: #000000;
@@ -49,11 +49,11 @@
   contrast-light-thresh: #111111;
   contrast-dark-thresh: #eeeeee;
   contrast-high-thresh: #eeeeee;
-  contrast-low-thresh: #111111;
+  contrast-low-thresh: #eeeeee;
   contrast-light-thresh-per: #111111;
   contrast-dark-thresh-per: #eeeeee;
   contrast-high-thresh-per: #eeeeee;
-  contrast-low-thresh-per: #111111;
+  contrast-low-thresh-per: #eeeeee;
   replace: "Hello, World!";
   replace-captured: "This is a new string.";
   replace-with-flags: "2 + 2 = 4";