1. ホーム
  2. javascript

[解決済み] プログラムで2色のコントラスト比を計算するには?

2023-01-26 12:58:52

質問

簡単に言うと、黄色と白をとってください。

back_color = {r:255,g:255,b:255}; //white
text_color = {r:255,g:255,b:0}; //yellow

神の住む普遍的な定数の地球で、黄色い文字は白い背景では読めず、青い文字は読めるという事実は、物理学のどんな法則で成り立っているのでしょうか?

私のカスタマイズ可能なウィジェットのために、私は変換関数を見つけたすべての可能なカラーモデルを試しましたが、数値比較だけでは、緑が白で黄色が読めないということは言えません。

私はAdsense(これはすべてのインターネットのBuddaによって作成されます)を見て、彼らが何をしたか推測します、彼らはプリセットとカラーセルの距離計算を作りました。私はそれを行うことはできません。私のユーザーは、テキストがまだ読める限り、最も網膜に炎症があり、美しくない組み合わせを選ぶ権利を持っているのです。

どのように解決するのですか?

Wikipedia によると、輝度をグレースケール表現に変換する場合、その赤、緑、青の値を取得し、次の割合で混合する必要があるそうです。R:30% G:59% B:11

したがって、白は100%の輝度を持ち、黄色は89%の輝度を持つことになります。同時に、緑は59%と小さくなります。11%は41%の4倍近い差です。

さらにライム( #00ff00 )は大量の文章を読むのに向いていない。

IMHOは、良いコントラストのために、色の明るさは少なくとも50%異なるべきです。そしてこの明るさはグレースケールに変換されたものとして測定されるべきです。

更新 : 最近見つけた 総合ツール を見つけた。 の公式を順番に使用するもので w3ドキュメント 閾値は #1.4 より高度なことをするための実装は以下のとおりです。

function luminance(r, g, b) {
    var a = [r, g, b].map(function (v) {
        v /= 255;
        return v <= 0.03928
            ? v / 12.92
            : Math.pow( (v + 0.055) / 1.055, 2.4 );
    });
    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function contrast(rgb1, rgb2) {
    var lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
    var lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
    var brightest = Math.max(lum1, lum2);
    var darkest = Math.min(lum1, lum2);
    return (brightest + 0.05)
         / (darkest + 0.05);
}
contrast([255, 255, 255], [255, 255, 0]); // 1.074 for yellow
contrast([255, 255, 255], [0, 0, 255]); // 8.592 for blue
// minimal recommended contrast ratio is 4.5, or 3 for larger font-sizes

詳しくは WCAG 2.0 ドキュメント を参照してください。