Amended contrast function, see less#2743

Synchro · Dec 3, 2015 · e9a4a8c · e9a4a8c
1 parent 69cb026
commit e9a4a8c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/lib/less/functions.js b/lib/less/functions.js
@@ -191,33 +191,39 @@ tree.functions = {
     greyscale: function (color) {
         return this.desaturate(color, new(tree.Dimension)(100));
     },
-    contrast: function (color, dark, light, threshold) {
+    contrast: function (color, color1, color2, threshold) {
+        //threshold is no longer used, in line with SASS handling of the same param
         // filter: contrast(3.2);
         // should be kept as is, so check for color
         if (!color.rgb) {
             return null;
         }
-        if (typeof light === 'undefined') {
-            light = this.rgba(255, 255, 255, 1.0);
+        if (typeof color1 === 'undefined') {
+            color1 = this.rgba(0, 0, 0, 1.0);
         }
-        if (typeof dark === 'undefined') {
-            dark = this.rgba(0, 0, 0, 1.0);
+        if (typeof color2 === 'undefined') {
+            color2 = this.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
+        //http://www.w3.org/TR/WCAG20/#contrast-ratiodef
+        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;
         }
     },
     contrast2: function (color) {

diff --git a/test/css/functions.css b/test/css/functions.css
@@ -34,7 +34,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;
@@ -45,11 +45,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;
   contrast2-white: #000000;
   contrast2-black: #ffffff;
   contrast2-wrongargs: #ffffff;