1

の中に<p>要素があり<div>ます。段落テキストには、白または黒の2つの色があります。この色は、実行時にランダムに選択されます。背景divの色は、実行時に1,600万色の中からランダムに選択されます。これらのプロセスは両方ともランダムであるため、同じような色が一緒になってしまい、段落のテキストが非常に見づらくなったり、まったく見えなくなったりすることがあります。

2つの色を互いに比較し、パーセンテージ表記で、ある色が別の色の上にどのように見えるかを返すアルゴリズムはありますか？

この質問は、2つの色がどれほど似ているかを尋ねていました。カラーロジックアルゴリズム

重ねたときにどのように見えるか知りたい。たとえば、上記の投稿で定義されている関数によると、黄色と白は同じような色ではありませんが、黄色に白を書くと、テキストが見づらくなります。

4

2 に答える 2

1

この Web サイトが役立つはずです。

http://24ways.org/2010/calculating-color-contrast

それに応じて、この関数を使用して、背景色に黒または白を使用するかどうかを決定します。

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

もちろん、色を使用するには、色を 16 進値に変換する必要があります。

于 2012-10-12T02:41:10.973 に答える
0

sc-color ライブラリ(開示: I'm the author ) には、 と呼ばれる同様の組み込み関数がありcontrastWhiteBlack()ます。

これは、ランダムな背景色でテキストの色を生成するためのJsFiddle デモです。

コアコードは次のようになります。

// Parse, generate a contrast color, convert back to a color string
var textColor = sc_color([color string to parse]).contrastWhiteBlack().html();
于 2012-10-12T19:33:45.210 に答える