Lessphp contrast function's output doesn't match with the documentation

Question

I've been using the contrast function for the first time and think it's buggy.

On this page, I find the following explanation:

contrast(@color1, @darkcolor, @lightcolor);
    // outputs @darkcolor, when @color1 have more than 43% Luma
    // if not it outputs @lightcolor

I have these 2 Colors:

@gBlue: #2196F3;
@gLightBlue: #03A9F4;

The first color has 60 Luma and the second one has 65 Luma. I expect Less to give me the @lightcolor for both colors. But that's not the result I'm getting!

Lessphp returns the @darkcolor for @gBlue and the @lightcolor for @gLightBlue.

Can anyone tell me why it does this? Is this a bug? Why don't I get the @lightcolor in both cases?

Answer 1

Note: The source code for v0.5.0 shows that lessphp is also now checking luma values instead of lightness (used in v0.4.0) and hence upgrading to the latest version should also solve the problem.

This doesn't seem to be a bug but rather a difference in terms of how the contrast function works in Less.js, Less.PHP and lessphp (upto v0.4.0).

In Less.js and Less.PHP, the contrast function decides on output color based on the luma value of the reference color. The luma values of the 2 colors given in question are less than 43% and hence they output the @lightcolor. You can check the output of the below code at Less2CSS.org (Online Less.js compiler) and Online Less.PHP compiler.

#sample{
  color:contrast(@color1, @darkcolor, @lightcolor);
  luma-color1: luma(@color1);
  luma-color2: luma(@color2);
}

@color1: #2196F3;
@color2: #03A9F4;
@darkcolor: black;
@lightcolor: white;

---

The lessphp documentation however describes the contrast function as follows: (looks like the doc is not updated with v0.5.0 changes)

contrast(color, dark, light) — if color has a lightness value greater than 50% then dark is returned, otherwise return light.

The lightness value for the first color is 54% while that for the second color is 48%. Because of this, lessphp outputs the @darkcolor when the first color is used as reference and @lightcolor when the second color is used as reference.

You can try the below code at the Online lessphp compiler for v0.4.0 to see what I mean:

#sample{
  color:contrast(@color2, @darkcolor, @lightcolor);
  lightness-color1: lightness(@color1);
  lightness-color2: lightness(@color2);
}

@color1: #2196F3;
@color2: #03A9F4;
@darkcolor: black;
@lightcolor: white;

---

It could very easily be that lessphp introduced the contrast function at first based on lightness value before the official Less (the JS version) compiler implemented the same function but based it on luma instead of lightness value. The below statement could be found in the Less documentation:

This function works the same way as the contrast function in Compass for SASS. In accordance with WCAG 2.0, colors are compared using their gamma-corrected luma value, not their lightness.