[解決済み] プログラムで2色のコントラスト比を計算するには?
質問
簡単に言うと、黄色と白をとってください。
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 ドキュメント を参照してください。
関連
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] JavaScriptで2つの数値の間の乱数を生成する
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] JSHintの'+'前の改行不良の説明
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?