diff --git a/lib/less/functions/color.js b/lib/less/functions/color.js index af29978d3..db72f6e02 100644 --- a/lib/less/functions/color.js +++ b/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) { diff --git a/test/css/functions.css b/test/css/functions.css index ab5df5bb5..4f8061225 100644 --- a/test/css/functions.css +++ b/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";