2色のコントラスト比を計算し、WCAG（Webアクセシビリティ基準）に適合するかを判定します。文字色と背景色の組み合わせを決めるときに使えます。
WCAGの基準
UIコンポーネント（ボタンの枠線、フォームの境界など）やグラフィックは、3:1以上が求められます。
| レベル | 通常の文字 | 大きい文字（18pt以上／太字14pt以上） |
|---|---|---|
| AA（推奨される最低ライン） | 4.5:1 以上 | 3:1 以上 |
| AAA（より高い水準） | 7:1 以上 | 4.5:1 以上 |
なぜ重要か
コントラストが低いと、視覚に困難のある人だけでなく、屋外の明るい場所や、輝度を落とした画面でも読めなくなります。特定の人だけの問題ではありません。
日本では高齢者を含む幅広い層がWebを使っています。薄いグレーの文字は「おしゃれ」に見えても、読めなければ情報は伝わりません。
改善のしかた
- 文字色を濃くする（もっとも簡単で効果的）
- 背景を薄くする
- 文字サイズを大きくする、または太字にする（基準が緩和されます）
- 背景画像の上の文字は、半透明のオーバーレイを敷いて確保する
確認しておきたい箇所
薄いグレーの補助テキストは、デザイン上は落ち着いて見えますが、基準を下回りやすい代表例です。
- 本文の文字色と背景色
- リンクの色（周囲の文字と区別できるか）
- プレースホルダーや補助テキスト（薄くしすぎがちです）
- ボタンの文字と背景
- エラーメッセージの色
よくある質問
Q コントラスト比はどう計算されますか？
2色の相対輝度から算出します。最大は21:1（黒と白）、最小は1:1（同じ色）です。
Q AAとAAAのどちらを目指すべきですか？
多くのサイトではAA（4.5:1）が実務上の目標です。AAAは達成が難しい場面もあります。
Q 大きい文字の基準が緩いのはなぜ？
文字が大きいほど視認しやすいためです。18pt以上、または太字14pt以上が対象です。
Q ロゴにも基準は適用されますか？
ロゴタイプは対象外とされています。ただし読みやすさの観点では配慮が望ましいです。