diff --git a/lib/less/functions.js b/lib/less/functions.js index 40d804212..8e65373d1 100644 --- 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 index 6456523e2..e0f0b6c84 100644 --- 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;