テキストと背景の間の色のコントラストの式
私のAndroidアプリでは、ユーザーはアイテムの色を選択できます。この色は、背景にテキストが表示された状態で表示されます。テキストを黒または白のどちらで表示するかによって、背景色。
テキストを黒ではなく白で表示した方がよい場合に計算する式はありますか？色の濃さや、白よりも黒の場合の正確な値を探していると思います。
はい、数式があります。私は ハイコントラストカラーに関する記事 を最近書きました。これは、範囲のコントラスト比が最も高い前景色として、黒または白（実際にはオフホワイトの＃f0f0f0およびオフブラック＃101010）の変化をグラフ化したものです背景色の。
インタラクティブSVGバージョン もあり、コントラスト比のツールチップが表示されます
コントラスト比 は、（L1 + 0.05）/（L2 + 0.05）として計算されます。
L1は次のとおりです。 相対輝度 より明るい色の
L2は、暗い色の相対的な輝度です。
私が作成したグラフは、上記の記事のメモの一部と一緒に以下にあります。
各カラーセルには円があります。
- 黒丸：コントラスト比<= 4.5
- 太い円：コントラスト比> 4.5（14 ptのテキストに対してWCAG 2.0 AA準拠）
- 細い円：コントラスト比> 7（14ptテキストに対してWCAG 2.0 AAA準拠）
最初のグラフでは、明度は一定の128ですが、色相と彩度は異なります。
青と赤を除いて、黒は一般に白よりもはるかに優れていることがわかります。白の方が良い黄色と緑はなく、黒はそれらの黄色と緑の素晴らしい色合いのために7を超えるコントラスト比を持っていますが、白は最も純粋な深い青を除いて7を超える比を得るのに苦労しています。黒が再び優れている紫のギャップも興味深いものです。
2番目のグラフでは、彩度は定数255ですが、色相と明度は異なります。
当然のことながら、白は黒に機能し、黒は白に機能しますが、青は例外として全体的に黒が支配的です。黄色に対して黒が最も支配的です。ここには多くの驚きはありませんが、このようにレイアウトされた証拠を見るのは説得力があります。変化する彩度とは異なり、ここでは比率の大部分が7（細い円）を超えています。
成功基準1.4.3、WCAGのコントラスト（最小） を満たすようなテキストの色を選択する必要があります。必要なコントラスト比4.5は、背景色をどのように選択しても満たすことができ、白と黒のテキストを選択するアルゴリズムは非常に簡単です。
ステップ1：入力色（この場合は背景）をHSLに変換します。実際には、必要なのは輝度（または明度）だけです。 RGB空間から変換する式については、 WCAG 2.0での相対輝度の定義 を参照してください。
ステップ2： WCAG 2.0の定義で指定されているコントラスト比の式 は、テキストが黒（輝度= 0）または白（輝度= 1）。したがって、入力色の明度をLにすると、次のようになります。
- L≥0.175の場合、黒のテキストで問題ありません。
- L≤0.1833の場合、白いテキストで問題ありません。
どちらかの選択がコントラスト要件を満たす色の範囲が狭いため、どちらの場合もコントラスト比が等しいカットオフ値を使用すると、0.1791で発生します（ Wolfram alpha solution ）。あるいは、純粋な黒と純粋な白の使用から少し後退することもできますが、代数をやり直す必要があります。
これは、@ roger-attrillの回答で得られた結果の簡単な代数的証明であることに注意してください。明度が0.1833を下回る場合よりも0.175を上回る場合の方がはるかに多くの色があるため、通常は黒の方が適しています。