web-dev-qa-db-ja.com

黄色を他の色と同じコントラストにするには、どのくらい暗くすればよいですか？

コンピュータ画面に表示される他の色と同じコントラスト値を得るには、黄色をどれだけ暗くする必要がありますか？

これは私が一目でわかることですが、これに関するルールはないのかと思っていました。

6つの異なる色で6列のブロックを作成しました。各行には、明るい、通常の、暗い、テキストブロックがあります。
各行の2番目のブロックは色参照であり、最も明るい形式（＃FF0000、＃FF00FF、＃0000FF、...）の色です。
最初のブロックは明るい色のコードで、3番目のブロックは暗い色のコードです。これらはそれぞれ、他の色と同じ量で明るくまたは暗くなります。
4番目のブロックは、最初のブロックと同じで、テキストは参照ブロックの色で表示されます。

color table

ご覧のとおり、色は比例していますが、黄色は他の色と比べてコントラストが最小です。
黄色と言うテキストを緑と同じコントラストに近づけるには、テキストの色を（255,255,0）から（245,245,0）に変更する必要があります。

なぜ白地の黄色はそれほどコントラストが低く、他の色と同じコントラストを得るために黄色をどれだけ暗くすべきですか？

colorcontrastcolor-perception
6
jan

2つの異なる色の明るさの一致

次の式を使用して、「標準的な」モニターで色のグレースケールの明るさを計算できます。

Y = 0.2126 * (R/255)^2.2  +  0.7151 * (G/255)^2.2  +  0.0721 * (B/255)^2.2

したがって、たとえば、高彩度の純粋な緑（0、255、0）の明るさは次のとおりです。

Y = 0.2126 * (0/255)^2.2  +  0.7151 * (255/255)^2.2  +  0.0721 * (0/255)^2.2
Y = 0.7151

黄色の色合いについては、R = G、B = 0の色を意味すると仮定します。X= R = Gとします。したがって、黄色の明るさは次のとおりです。

Y = 0.2126 * (X/255)^2.2  +  0.7151 * (X/255)^2.2  +  0.0721 * (0/255)^2.2
Y = (0.2126  + 0.7151) * (X/255)^2.2  
Y = 0.9277 * (X/255)^2.2

Xの解法：

X = ((Y/0.9277) ^ 0.4545) * 255

緑の明るさに合わせるには（Y = 0.7151）：

R = G = X = ((0.7151/0.9277) ^ 0.4545) * 255 = 227

または、RGBが227、227、0です。眼球が伝えたものにかなり近いです。モニターはそれぞれ異なるため、どのような場合でも正確ではありません。

2組の色の間のコントラストの一致

同じY値を持つ2つの色は、同じように明るく表示されます（モニターのバリエーションを除く）。等しい明るさの色の2つのペアを取得するにはコントラスト（たとえば、緑がかった背景にある緑のテキストを黄色と同じくらい読みやすくするために）黄色がかった背景のテキスト）、各ペアのコントラストを計算して比較する必要があります。コントラストを取得するには、ペアの各色のYを計算し（Y1とY2と呼びます）、各ペアの輝度比Cを計算します。

C = (Y1 + 0.05) / (Y2 + 0.05)

明るさの比率を比較するには、常に明るい色（大きいY）を上に置きます。

コントラストを一致させるには、両方のペアのCが等しくなるまで色を調整します。あなたは4色を持っているので、たくさんのオプションがあります。たとえば、テーブルの赤い「Foo」は255、0、0なので、Y2 = 0.2126です。淡い赤の背景は255、221、221なので、Y1 = 0.7873です。輝度比は次のとおりです。

C = (0.7873 + 0.05) / (0.2126 + 0.05) = 3.19

淡い黄色の背景（255、255、221）上の黄色の「Foo」（255、255、0）の場合：

C = (0.9804 + 0.05) / (0.9278 + 0.05) = 1.05

コントラストが低いほど、読み取りが難しくなります。そのため、淡い黄色の赤は淡い赤の赤よりも見にくくなっています。

黄色のコントラストを赤に一致させる1つの方法は、提案したように、黄色を暗くすることです。カットアンドトライ（私は別の式を導出するのが面倒なので）146、146、0がその仕事をすることがわかります。

C = (0.9804 + 0.05) / (0.2720 + 0.05) = 3.20

暗い黄色のY（0.2720）は、明るい背景（0.9804対0.7873）に黄色を表示しているため、赤のY（0.2126）より明るい

ちなみに、アクセシビリティのために W3Cが推奨 背景のテキストのCは少なくとも3.0です。

なぜ黄色が明るいのですか？

人間の目は、昼間に地球上で見られる最も強い光の周波数に最も敏感になるように進化しました。それは太陽からの光でしょう。太陽は黄色の周波数の周りで最も強いため（つまり、黄色に見える）、黄色が最も明るく見えるのはそのためです。追加のキッカーとして、LCDは1つではなく2つのサブピクセルを通して光を照らすことで黄色を作ります（たとえば、緑のように）。 2番目に明るいのは、黄、緑、シアン、オレンジに近い周波数であるため、これらの彩度の高い値は、淡い色では不十分で、暗い色では十分です。黄色、青、赤から最も遠い周波数が最も暗く表示され、それらの高彩度の値は、淡い色では比較的よく対照的で、暗い色では対照的です。

カラーコードの解除 に色とコントラストの詳細があります。

10
Michael Zuschlag