注: v0.5.0 のソース コードは、lessphp が明度 (v0.4.0 で使用) の代わりに輝度値もチェックするようになったことを示しているため、最新バージョンにアップグレードすると問題も解決するはずです。
これはバグではなく、contrast
Less.js、Less.PHP、lessphp (v0.4.0まで) での関数の動作の違いのようです。
Less.jsと Less.PHPluma
では、コントラスト関数が基準色の値に基づいて出力色を決定します。問題の 2 色のluma
値は 43% 未満であるため、@lightcolor
. 以下のコードの出力は、Less2CSS.org (オンライン Less.js コンパイラ) およびオンライン Less.PHP コンパイラで確認できます。
#sample{
color:contrast(@color1, @darkcolor, @lightcolor);
luma-color1: luma(@color1);
luma-color2: luma(@color2);
}
@color1: #2196F3;
@color2: #03A9F4;
@darkcolor: black;
@lightcolor: white;
ただし、lessphp のドキュメントcontrast
では、関数について次のように説明されています: (ドキュメントはv0.5.0 の変更で更新されていないようです)
contrast(color, dark, light)
— 色の明度の値が 50% を超える場合は暗が返され、それ以外の場合は明が返されます。
最初の色のlightness
値は 54% で、2 番目の色の値は 48% です。このため、lessphp@darkcolor
は、1 番目の色を基準にし た場合と 2 番目の色を基準にした場合を出力@lightcolor
します。
以下のコードを v0.4.0 のオンライン lessphp コンパイラで試して、私の意味を確認してください。
#sample{
color:contrast(@color2, @darkcolor, @lightcolor);
lightness-color1: lightness(@color1);
lightness-color2: lightness(@color2);
}
@color1: #2196F3;
@color2: #03A9F4;
@darkcolor: black;
@lightcolor: white;
公式の Less (JS バージョン) コンパイラが同じ関数を実装する前に、 lessphpがcontrast
最初に値に基づいて関数を導入した可能性がありますが、値の代わりにlightness
基づいています。以下のステートメントは、Less のドキュメントに記載されています。luma
lightness
この関数は、 Compass for SASSのコントラスト関数と同じように機能します。WCAG 2.0に従って、明度ではなく、ガンマ補正された輝度値を使用して色が比較されます。