現在作業中のページの1つで、表示されるテキストの背景を変更できます。JavaScriptの対照的な色を計算する
は、テキストのコントラストを維持するために、フォアグラウンドカラーを自動的に変更したいと考えています。
また、色の範囲は自由裁量であることが望ましいでしょう。たとえば、バックグラウンドが白から黒に255の増分で変化している場合、前景色の色合いが255色になることは望ましくありません。このシナリオでは、おそらく2から4まで、ちょうどを維持するために、妥当なのコントラストを維持します。
任意のUI /デザイン/カラースペシャリスト/数式を外に出すためにそこにいる画家？
わかりやすい読みやすさの点では、バックグラウンドで白黒のテキストを使用したいと考えています。 RGBをHSVに変換し、Vが<であるかどうかを確認するだけです。そうであれば白、そうでなければ黒。
まずそれを試してみて、それが魅力的かどうかを確認してください。
あなたがそうしないと、背景が明るすぎたり暗すぎたりすると、白と黒がぼんやりとしないようにすることができます。これをトーンダウン同じ色相と彩度を維持し、明るさのためにこれらの値を使用するには：
background V foreground V
0.0-0.25 0.75
0.25-0.5 1.0
0.5-0.75 0.0
0.75-1.0 0.25
中間色で、あなたはまだうまく読めるようになる黒または白のテキストが表示されます。暗い色または薄い色では、同じ色のテキストが表示されますが、明るさの点で少なくとも3/4離れているため、読みやすくなります。私はそれが素敵に見えるように願っています:)
色相は移動したいが、彩度や値は移動しないとよいでしょう。
したがって、RGB値をHSVに変換し、H（モジュロ360度のモジュロ）に180度を加え、RGBに戻します。
ああ、それはひどい考えです。シフトする色合いは、あなたに最高の（木の茶色+ダークブルー）と最悪の場合は目がくらむような頭痛（赤+緑）を混乱させる。より安全なコースが価値をシフトさせています。 –
これは、十進法の値を扱うjavascriptの方法のために少し複雑です。 この目的のために、私はバックグラウンドに任意の色を変えさせる方がはるかに優れていることを発見しましたが、テキストは白黒に切り替えるだけです。 コントラストのある色を使用すると、多くの組み合わせが本当に立つことは難しいでしょう。また、一部の人々はカラーブラインドなので、アクセシビリティの観点からは非常に良いアイデアではありません。
Try this exampleは、r、g、b値の平均値に応じて黒または白に設定します。テストにも良い！非常にうまくいかないケースが見つかった場合は、より良いアルゴリズムに置き換えてください。
<html>
<head>
<script>
function rgbstringToTriplet(rgbstring)
{
var commadelim = rgbstring.substring(4,rgbstring.length-1);
var strings = commadelim.split(",");
var numeric = [];
for(var i=0; i<3; i++) { numeric[i] = parseInt(strings[i]); }
return numeric;
}
function adjustColour(someelement)
{
var rgbstring = someelement.style.backgroundColor;
var triplet = rgbstringToTriplet(rgbstring);
var newtriplet = [];
// black or white:
var total = 0; for (var i=0; i<triplet.length; i++) { total += triplet[i]; }
if(total > (3*256/2)) {
newtriplet = [0,0,0];
} else {
newtriplet = [255,255,255];
}
var newstring = "rgb("+newtriplet.join(",")+")";
someelement.style.color = newstring;
return true;
}
function randomiseBackground(someelement)
{
var vals = [];
for(var i=0; i<3; i++) { vals[i]=Math.floor(Math.random()*256+1); }
someelement.style.backgroundColor="rgb("+vals.join(",")+")";
return true;
}
</script>
</head>
<body onload="adjustColour(document.getElementById('mypara'));">
<p id="mypara" style="background-color:#2287ea">Some text</p>
<form>
<input type=button onclick="var elem=document.getElementById('mypara'); randomiseBackground(elem); adjustColour(elem);" value="randomise background" />
</form>
</body>
</html>
ルミナの白黒決定をベースにして、かなりうまく動作します。ルーマは、R、G、およびB値の加重和であり、ビデオアプリケーションでは明らかに一般的に見られる相対的な明るさの人間の知覚のために調整されています。 lumaの公式の定義は、時間の経過と共に変化し、重み付けが異なっています。ここをクリックしてください：http://en.wikipedia.org/wiki/Luma_(video)。私はRecを使って最良の結果を得ました。 709バージョン、下のコードのように。おそらく165の黒白の閾値が良いようです。
function contrastingColor(color)
{
return (luma(color) >= 165) ? '000' : 'fff';
}
function luma(color) // color can be a hx string or an array of RGB values 0-255
{
var rgb = (typeof color === 'string') ? hexToRGBArray(color) : color;
return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings
}
function hexToRGBArray(color)
{
if (color.length === 3)
color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
else if (color.length !== 6)
throw('Invalid hex color: ' + color);
var rgb = [];
for (var i = 0; i <= 2; i++)
rgb[i] = parseInt(color.substr(i * 2, 2), 16);
return rgb;
}
何らかの理由でHSVは望みの効果を与えません。一方、HSLは、飽和色がほとんどなく、純粋なb/wであっても（黒に向かって少し偏っていても）非常にうまくいきます。 – georged
OK、おそらくHSLは私が本当に意味していたものです：私は完全にはわかりません。 –