web-dev-qa-db-ja.com

マテリアルデザイン-テキストの色がコントラストを最大化しない

説明文

Material Design のカラーパレットは、色、および各バッキング色に使用する適切な色付きのテキスト（白/黒）を指定します。たとえば、Redパレットには、10の「プライマリ」（50、100、200、300、400、500、600、700、800、900の番号）と4つの「アクセント」の色相（A100、A200、A400、A700の番号）があります。 ）。マテリアルデザインの仕様では、色合いが400〜900とA200〜A700の場合は白色のテキストを推奨しています。

ただし、 コントラストチェッカー を使用している場合（または コントラスト比 の計算を自分で実行している場合）、色相400-600およびA200-A400は実際には白よりも黒の方がコントラストが高いことがわかります。

色相500（これはマテリアルデザインのデフォルトの主要な色相であるため重要です）の場合、ヘクスは＃f44336です。白とのコントラストは3.68：1、黒とのコントラストは5.7：1です。

私は以前（マテリアルデザインの色相選択プロセスをリバースエンジニアリングする他の試みにおいて）、Googleはアルゴリズムのアプローチを色選択に採用しておらず、代わりに（おそらく）経験豊富なデザイナーが選んだ色に依存していることを読んだことがあります。

主な質問

これらの特定の色がこれらの特定の色相に選択された理由を説明するリソースはありますか？または、マテリアルデザインのテキストと色の選択を厳密に近似するために使用できる別のコントラスト計算または色選択アルゴリズムはありますか？

さらなるテスト

私が試した他の何かは、色の明るさと色の違い（ コントラスト比 でも定義されています）を使用することです。

500の色相（＃f44336）の場合、色の明るさは0.4644745で、白を優先します。色の違いは、白に対して1.568627、黒に対して1.4313725です。

400色相（＃ef5350）の場合、色の明るさは0.507066で、黒をわずかに優先します。色の違いは、白に対して1.423529、黒に対して1.57647です。

material-designcontrast
10
Ng Oon-Ee

アクセシビリティセクション のマテリアルデザインは次のように述べています。

W3Cでは、本文と画像のテキストに次のコントラスト比を推奨しています。

  • 小さなテキストは、その背景に対して少なくとも4.5：1のコントラスト比を持つ必要があります。
  • 大きなテキスト（14 ptの太字/ 18 ptの標準以上）は、その背景に対して少なくとも3：1のコントラスト比を持つ必要があります。

ただし、お気づきのように、提案されたカラーパレットの値は、そのコントラスト比に従っていません。私の推測：「The W3Crecommends」。

カラーセクション の状態：

明るい背景に暗いテキスト

明るい背景に暗いテキストを使用するには、次の不透明度レベルを適用します。

  • 最も重要なテキストの不透明度は87％です。
  • 視覚的な階層の下にあるセカンダリテキストは、不透明度が54％です。
  • テキストヒント（テキストフィールドやラベルのヒントなど）および無効化されたテキストは、38％の不透明度でさらに目立ちます。

暗い背景に白いテキスト

表の値は、暗い背景の白いテキストの相対的な重要度を表します。

色付きの背景に表示される白いテキストは、不透明度100％で表示されます。

ただし、カラーパレットでは、すべての暗いテキストはrgba（0,0,0,0.87）（87％の不透明度の黒）であり、＃fffテキストカラーとrgba（255,255,255,0.87）（不透明度の白87％）。それぞれの白の値がどのように選択されるのかわかりませんでした。

あなたの質問について。

すべてのカラーパレットを Lab color space でチェックしました。ここで、Lは0（黒）から100（白）の明度の値を表します。

私はこの結論に達しました：

  • 背景色の明度が62-100の場合、テキストの色は暗くなります。

  • 明度の値が0〜62の場合、テキストの色は明るいです。

したがって、限界値は62前後であり、場合によっては暗い値が適用され、一部は明るい値になります。値が61であるいくつかの例外がありますが、暗いテキストが適用されます。

これは厳密な規則ではありませんが、使用するテキストの色を決めるのに近づく可能性があります。

画像の中央の数字は、背景色の明度の値です。

01020304050607080910111213141516171819

1
Alvaro

マテリアルデザインの色は鮮やかさを重視して選択され（ 第2原則を確認 ）、物理的な印刷色をデジタルライフに取り入れることで、より良いエクスペリエンス（視覚的に楽しい）をもたらすことを目指しています。

そして、コントラストに関する限り、コントラストが最適である（必ずしも最大ではない）ようにテキストの色を選択する必要があり、追加する場合は、必要に応じてアイコンのコントラストをもう少しトーンアップすることができます...

0
Harshit Choudhary