誰もが読める配色を、2クリックで検証
約12人に1人は特定のコントラストを認識しにくいと言われます。WCAG（Web Content Accessibility Guidelines）はテキストと背景の最小比率を定めています。このチェッカーは公式の相対輝度の計算式でリアルタイムに比率を算出し、実際の組み合わせのプレビューを表示します。
-
2色を選ぶ
カラーピッカーで、または16進コード（#rrggbbまたは#rgb）を貼り付けて。
-
比率を読む
1:1から21:1まで。通常テキストと大テキストそれぞれのAA/AAA判定が4つ表示されます。
-
必要なら調整
プレビューを見ながら、どちらかの色の明度を合格まで調整します。
WCAG基準値の一覧
| レベル | 通常テキスト | 大きなテキスト |
|---|---|---|
| AA（最低基準） | 4.5 : 1 | 3 : 1 |
| AAA（強化基準） | 7 : 1 | 4.5 : 1 |
| UIコンポーネント（2.1） | 3 : 1 | 3 : 1 |
コントラストはインターフェースのすべてのテキスト／背景ペアで確認が必要です。ホバー時のリンク、無効化ボタン、プレースホルダー、ダークモードなどの状態もお忘れなく。
よくある質問
コントラスト比とは何ですか？
明るい色と暗い色の輝度の比率で、1:1（同色）から21:1（白地に黒）までの値を取ります。WCAGは弱視の方を含むすべての人にテキストの可読性を保証するためにこれを使用します。
どの基準値を満たすべき？
レベルAA：通常テキストは4.5:1、大きなテキストは3:1。より厳しいレベルAAA：それぞれ7:1と4.5:1。AAは多くの国で公共サービスの法的最低基準です。
「大きなテキスト」とは？
WCAGの定義では、通常の太さで18pt（24px）以上、または太字で14pt（18.5px）以上。大見出しは本文より低いコントラストが許容されます。
テキスト以外の要素にもコントラストは必要？
はい。WCAG 2.1以降、UIコンポーネント（入力欄の枠線、情報を伝えるアイコン、フォーカス状態）は隣接色に対して3:1が必要です（達成基準1.4.11）。
比率が足りない場合、どう直す？
文字を暗くするか背景を明るくします（ダークテーマでは逆）。多くの場合、明度を数段階変えるだけで十分です。色相は保ち、明度だけ調整すればパレットの統一感を維持できます。