Merge pull request #2754 from Synchro/master

Update contrast function and tests, fixes #2743
less · Mar 15, 2016 · bcc8ced · bcc8ced
2 parents 2f07cd7 + 6dd409a
commit bcc8ced
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git 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
@@ -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";