web-dev-qa-db-ja.com

与えられた色と白の間のコントラストを測定する方法は？

色付きの背景に白いテキストを表示する場合、その色と白の間のある種のコントラストに応じて、テキストが多少読みやすくなると思います。

私の質問は、そのようなコントラストを測定する式はありますか？

以下は、私が尋ねていることの例です。

次の3つの色を検討してください。

.orange
{
    background-color: rgb(255,192,0)
}
.pink
{
    background-color: rgb(255,102,204)
}
.blue
{
    background-color: rgb(0,255,255)
}

これらの色はここ https://jsfiddle.net/evkep9g9/ で確認できます：

enter image description here

IMO白地に青のテキストは、他の2つよりも読みやすくありません。

そのコントラストを測定するフォーマルはありますか？

HSLとHSVに関するWikipediaの記事を読み込もうとしましたが、理解できませんでした。

http://www.rapidtables.com/convert/color/rgb-to-hsl.htm および http://www.rapidtables.comを使用して計算されたこれらの3つの色の座標/convert/color/rgb-to-hsv.htm は次のとおりです。

      Orange:          Pink:              Blue:

RGB:  255,192,0        255,102,205        0,255,255
HSL:  45°,100%,50%     320°,100%,70%      180°,100%,50%
HSV:  45°,100%,100%    320°,60%,100%      180°,100%,100%

H、S、L、および/またはVを理解していなくても、それらの1つが他の2つよりも青。

しかし、そうではありません。

  • ブルーのSLとSVの値はオレンジの値と同じです。
  • ブルーのLの値はピンクの値よりも小さくなっています。

私は、白いテキストと色付きの背景とのコントラストを測定する「白とのコントラスト」属性がいくつかあると思います。

この属性がSまたはLまたはV？

私は受け入れました この答え 、その数値結果は私の主観的な印象と一致しているようです（青のコントラストが低い）。

このOPの「青」のコントラストが低いのは、実際には（明るい）緑が多いためです。

（以下の回答で）私が受け入れたこの式は、ウィキペディアの HSL and HSV の記事で詳細に説明されていません（見落としがちです）。関連する記事に最も近いのはこれです。

より知覚的に適切な代替手段は、明度次元として輝度Y 'を使用することです（図12d）。 Lumaは、知覚された輝度への寄与に基づく、ガンマ補正されたR、G、およびBの加重平均であり、カラーテレビ放送で単色次元として長く使用されています。のためにsRGBで使用される709原色、Y'709 = 0.21R + 0.72G + 0.07B;のために601 NTSC原色、Y'601 = 0.30R + 0.59G + 0.11B;他の原色では異なる係数を使用する必要があります。

Y'601 = 0.30R + 0.59G + 0.11B

要約すると、属性には「ルマ」という名前が付けられ、文字「Y」で指定されますが、それを計算するための式は（おそらくパレットの色度に応じて）異なります。以下の承認された回答は、World Wide WebのRGBの定義に基づくものです。

colorcolor-schemecolor-perception
10
ChrisW

あなたが探している属性は「 相対輝度 」です。これは、標準のモニターの場合、次のように計算できます。

L = 0.2126 * Rg + 0.7152 * Gg + 0.0722 * Bg、

ここで、Rg、Gg、およびBgは、次のように変換されたR、G、Bの値です。

r <= 10の場合、Rg = R/3294、それ以外の場合Rg =（R/269 + 0.0513）^ 2.4

g <= 10の場合、Gg = G/3294、そうでなければGg =（G/269 + 0.0513）^ 2.4

b <= 10の場合、Bg = B/3294、それ以外の場合、Bg =（B/269 + 0.0513）^ 2.4

上記の数式を使用して：

  • 白（255,255,255）は（四捨五入内）：1.000

  • オレンジ（255,192,0）は0.588

  • ピンク（255,102,204）は0.397

  • 青（0,255,255）は0.787

このことから、青は白とのコントラストが悪く（その相対輝度は白の1.000に最も近い）、オレンジ、ピンクの順であることがわかります。あなたが直感したように、コントラストが強いほど、テキストを読みやすくなります。 コントラスト比 は次のように計算できます

（L1 + 0.05）/（L2 + 0.05）

ここで、L1はLより大きい相対輝度、L2は小さい輝度です。そう：

  • 白地にオレンジのコントラスト比は1.65

  • ホワイトオンピンクのコントラスト比は2.35です。

  • 白地に青のコントラスト比は1.25です。

あなたはすべてかなり悪いです.4.5の最小コントラスト比が必要です。特に、例にあるような小さなテキストの場合は、7が推奨されます。これらは W3Cアクセシビリティガイドライン の標準ですが、「一般的な」ユーザーにとっても良いルールです。選択した色*を暗くすることもできますが、それによって色が大幅に変わります（オレンジが茶色になり、ピンクが桑になる）。これらの色を使用して、許容できるコントラストを得る最も簡単な方法は、黒のテキストを使用することです。最小コントラスト比は7.99です。

*余談ですが、高彩度の背景は非常に派手に見える傾向があることを上司に提案することをお勧めします。それは本当に彼が望む効果なのでしょうか？これはパーティーのWebサイトか何かですか？

15
Michael Zuschlag

WCAG 2. Webアクセシビリティ標準によれば、テキストと背景色のコントラストは少なくとも4.5：1の比率である必要があります。彼らのチェッカーは、現在の背景色が薄すぎると表示します。違いのスクリーンショットを撮りました：

Current Yellow Background ColorCurrent Pink Background ColorCurrent Blue Background Color

背景色とテキストのコントラストが不十分です。目がテキストを読むために緊張しなければならない場合、ウェブサイトはあまり効果的ではなく、障害を持つ人々はそれをさらに読むことができなくなります。

WebAIM Color Contrast Checker と呼ばれるリソースがあり、コントラスト比をチェックします。細心の注意を払って、彼らは2つのレベルのコントラスト比を持っています。 1つはAAと呼ばれ、もう1つはAAAと呼ばれます。より深刻なレベルのコントラストの場合、小さいまたは通常のサイズのテキストの比率は7：1です。

Yellow Background Color with Normal Sized White Text at AAA Ratio Level

Pink Background Color with Normal Sized White Text at AAA Ratio Level

Blue Background Color with Normal Sized White Text at AAA Ratio Level

または、大きなテキスト（18ptより上）にAA比率の評価を使用することもできます。これは次のようになり、デザインを変更する機会が増えます。

Blue Background Color with Large Sized White Text at AA Ratio Level

4
Clare Suereth

ここでは少し混乱していると思います。 HSLは Hue、Saturation、Lightness の略です。あなたが知る必要があるなら white = 100％Lightness 。したがって、白の反対はまだ[〜＃〜] l [〜＃〜]であり、0％の場合のみです（したがって、 [〜＃〜] h [〜＃〜]および[〜＃〜] s [〜＃〜] 、[〜＃〜] l [〜＃〜]値に0％を追加すると、黒くなる）。

w3の推奨事項と例をここに表示できます

HSVについては、[〜＃〜] v [〜＃〜]（ Value、または [〜＃〜] b [〜＃〜] for Brightness ）、それでも0％で黒のままですが、100％に設定すると、 saturation value に応じて白または別の色になる可能性があります。

どちらの方法でも、これらの方法の両方が明るさを処理していることがわかります。そのため、科学的なバックアップがなくても、上司は多かれ少なかれ話題になっているようです。

あなたの特定の色については、それらはあなたの質問とは関係がないので、本当にあなたの意味を理解していませんが、簡単に言えば、あなたの特定の質問に答えるには、白の反対は黒です、そしてHSVとHSLのどちらを使用しても、常に0になります

3
Devin

背景とは対照的にテキストの読みやすさを確認したい場合は、次のリンクを使用してください- webaim.org/resources/contrastchecker

テキストと背景の間に十分なコントラストがあるかどうかを簡単に識別して、視覚障害のある人がテキストを読むことができるかどうかを判断できます。また、WCAG 2.0のレベルAA（またはAAA）標準を満たすのにも役立ちます。ページに十分なコントラストがあるかどうかを示すガイドラインがあります（この場合、4.5：1の比率が理想的です）。

2
Clint

http://contrastchecker.com/ を使用して、前景（テキスト）と背景の色の組み合わせがWCAG基準を満たしているかどうかを確認してください。ウェブサイトには、組み合わせを確認できる6つの基準がリストされています。

0
Harshit Choudhary

Snookカラーコントラストチェッカー

Snookカラーコントラストチェッカーを使用して、前景色と背景色の組み合わせをテストできます。

http://snook.ca/technical/colour_contrast/colour.html コントラストがさまざまなWCAGコンプライアンスに合格するかどうかなど、さまざまな結果が得られます。

結果の例：

enter image description here

N.b。これは、デザイナーが従うためにBBCによって推奨されています

すべての前景色と背景色の組み合わせをSnookカラーコントラストチェッカーでテストしますすべての組み合わせはWCAG 2.0 AA標準に合格する必要があります http://www.bbc.co.uk/guidelines/futuremedia/accessibility/html/colour-contrast .shtml

0
Dave Haigh