web-dev-qa-db-ja.com

読めるようになるまで色を暗くする最良の方法は？

読めるようになるまで色を暗くする最良の方法は何ですか？

色が関連付けられている一連のタイトルがありますが、これらの色のいくつかは非常に明るく、そこに描かれたテキストは判読できません。 HSBをいじくり回していて、銀色に見えるようにせずに色を暗くするアルゴリズムを取得できないようです。

彩度も変えたいと思います。これを行う標準的な方法はありますか？

accessibilitycolorlegibilitycontrast
4
Mark

HSBでは、通常、Bを減らして特定の色の暗いバージョンを取得し、色が鈍すぎると思われる場合はSを増やします。これは黄色以外のほとんどの色で機能します（最終的には醜い濁った色になります）。これは、「濃い黄色」などがないためです。

開始色が白でなければ、なぜ銀色になるのかはわかりませんが、銀は「暗い白」と同じように言うのは当然です。ブラウンは「ダークオレンジ」。

それでも結果が気に入らない場合は、色を変更せずに、明るい背景に黒いテキストを使用し、暗い背景に白いテキストを使用してください。 （背景色に関連して）ハイコントラストのテキスト色を動的に選択する を参照してください。

4
Michael Zuschlag

色を別の色空間に変換する場合。 YIQ、YUV、またはより優れたCIE-L * ab、CIE-L * CHの場合、RGBの赤、緑、青のチャネルの代わりに、強度が1つである3つの異なるチャネルになります。

YIQ、YUVではYチャネルが強度を概算し、LabおよびLCHではLチャネルがこれを行います。

その後、強度チャネルを簡単に減らしてから、RGBに戻すことができます。

コントラストを高くするには、前景と背景のコントラストの範囲が少なくとも半分になるまで、強度を変更することをお勧めします。

例えば。範囲が0 ... 255の場合、強度チャネルで少なくとも127の差があります。

注：YIQは、RGBとの間で最も単純な変換を行います。

Y = 0.299 * R + 0.587 * G + 0.114 * B
I = 0.596 * R - 0.274 * G - 0.322 * B
Q = 0.212 * R - 0.523 * G + 0.311 * B

R = 1.0 * Y + 0.956 * I + 0.621 * Q
G = 1.0 * Y - 0.272 * I - 0.647 * Q
B = 1.0 * Y - 1.105 * I + 1.702 * Q

編集： W3Cガイドラインの使用

コントラスト比：（L1 + 0.05）/（L2 + 0.05）
ここで、L1は明るい色の相対輝度で、L2は暗い色の相対輝度です。

コントラスト（最小）：通常のテキストの場合は4.5：1、大規模テキストの場合は3：1

背景が明るい場合は、背景のYチャネルをL1として、前景のYチャネルをL2として使用します。

前景が明るい場合は、前景のYチャネルをL1として、背景のYチャネルをL2として使用します。

ノート：

  1. RGBチャネルに0 ... 255の範囲を使用している場合、コントラスト式で使用する前に、それらを（またはY）を255で除算します。これは、式が0 ... 1の正規化された範囲のように見えるためです。

  2. コントラスト式は、色が濃いほど、高いコントラストを実現するために必要な色間の差が小さいことを示しています。 （黒の明るい色は白の明るい色よりも認識されやすいです。）

8
Danny Varod

WCAG2.0は、許容できるコントラストを構成するものについて十分に研究され、国際的に合意された基準を備えており、Bevanが述べた主観性を排除しています。

ここには、必要な最小レベルになるまでスライダーを使用して色を微調整できる非常に優れたチェッカーがあります。 AA/AAAコンプライアンスのどのレベルを目指しているかに応じて、rght手側で「はい」を目指しています。

http://snook.ca/technical/colour_contrast/colour.html

許容レベルの計算に使用される式の詳細へのリンクがそこにあります。

1
Ian Hamilton

「読み取り可能」は、モニターの設定、性別（ほとんどの色欠乏症は男性にある）、年齢などに依存する、やや主観的な尺度です。

色相を維持し、彩度を1.0に、明るさを0.5に強制することにより、わずかに「強引な」アプローチを取ることができます。

（私が数年前に読んだ記事から思い出すように、60歳の角膜を通過する光の量は、18歳のときに通過するものの25％未満です。私が見つけた記事によると- ここ 、数値はさらに悪い-条件に応じて、光透過率は最高16％（1/6）および最低6％（1/16）の範囲です。）

0
Bevan