合格する暗色 × 明色
本文、AA + AAA に余裕
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */古典的な暗いスレートを白に近い背景に。本文 AAA (≥ 7:1) を余裕で合格。多くのプロダクト UI はデフォルトでこの辺りを狙うべき。
WCAG コントラストチェッカー
WCAG コントラストをチェックし、不合格の組み合わせをワンクリックで修正。
最終更新
本気でプログラミングを学びませんか？
Coddyはブラウザ上で実際にコードを書きながら学ぶサービスです。インタラクティブなレッスン、即時フィードバック、行き詰まったときのAIサポート付き。
WCAG カラーコントラストチェッカーとは？
*コントラストチェッカー*は、デザイナーや開発者が画面を公開する前に使うツールです。2 色 - テキストとその背景 - のあいだの **コントラスト比** を、Web Content Accessibility Guidelines (WCAG) の式で計算します。比が大きいほど読みやすくなります。
WCAG は 3 つのしきい値を定めます。**3:1** は大きな見出し (24px+ レギュラー or 18.66px+ ボールド)、およびボタン・フォーム・アイコンなどインタラクティブな要素の可視境界の最低値。**4,5:1** は本文向けの AA 最低値で、多くのチームが狙う基準。**7:1** は AAA、最高評価で、ロービジョンの読者を強力に支援します。
コントラストは色の派手さと**同じではありません**。鮮やかなブランドカラー同士でも、*相対輝度* が近ければ依然として読みにくいことがあります。本ツールは各チャネルに WCAG の式を適用し、正確な比を表示し、各コンテキストごとに評価するので、勘で判断する必要はありません。
コントラストを調べながら学べること
- コントラスト比は 1:1（同じ色）から 21:1（純黒と純白）まで。日常的なブランドの組み合わせはたいてい 2:1〜12:1 のあいだ。
- WCAG は知覚的な明るさではなく *相対輝度* を使う - 白地の黄色は目には大丈夫に見えても 1.3:1 で落ちる。
- 大きな文字には緩めのしきい値 (AA で 3:1) がある - 同じコントラストでも大きなグリフのほうが読みやすいから。
- ボタンや入力欄の枠、アイコンは隣接背景に対して 3:1 を満たす必要がある - WCAG 2.1 で追加された *非テキストコントラスト* 規則。
- 失敗ペアを直す最も安全な手段は色相を変えずに *明度* を調整すること - ブランドカラーを保ったまま通せる。
コントラストをステップで確認
2 つの色を入力
HEX を入力／貼り付けるか、カラーピッカーを使用。前景はテキストやアイコン、背景はその後ろにあるもの。
コントラスト比を読み取る
左側の大きな数字が WCAG のコントラスト比。3:1 未満はどんな UI でもリスクあり。4.5:1 未満は本文には不合格。
AA/AAA 評価を確認
3 行で通常テキスト (4.5/7)、大きな文字 (3/4.5)、UI コンポーネント (3:1) の合否を表示。自分のデザインが実際に使う行のチェックを緑に。
不合格なら「前景を調整」を押す
AA が落ちると、ツールが色相を保ったまま前景の明度を上下させ、合格するまで自動調整。もう一度押すと AAA を狙う。
最終ペアをコピー
両方の色が必要なコンテキストを通過したら、CSS スニペット (
color:とbackground:) をコピーし、スタイルシートやデザイントークンに貼り付け。
WCAG コントラスト目標 早見表
スタイル対象と必要レベルを照合してください。出典: WCAG 2.2 Understanding 1.4.3 と 1.4.11。
| 対象 | AA 最低 | AAA 最低 | 備考 |
|---|---|---|---|
| 本文 (< 18pt レギュラー) | 4.5 : 1 | 7 : 1 | 段落・ラベル・キャプションの標準ルール |
| 大きな文字 (≥ 18pt レギュラー or ≥ 14pt ボールド) | 3 : 1 | 4.5 : 1 | 見出し、ヒーローコピー、大きな引用 |
| UI コンポーネントと図形 | 3 : 1 | - | ボタン枠、フォーム、アイコン、フォーカスリング |
| ロゴまたは純粋な装飾 | 免除 | 免除 | ロゴと付随的テキストは免除 - ただしユーザビリティは別問題 |
| 無効状態 | 免除 | 免除 | Disabled コントロールは免除だが、低コントラストの言い訳には使わない |
試せるコントラスト例
AA を *ぎりぎり* 落とすブランドブルー
強そうで数式に弱い
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */白地の鮮やかな青はよく 4:1 付近に着地 - 大きな見出しなら読める (3:1 AA Large は合格) が、本文の 4.5:1 は不合格。18px 以上のボタンや CTA に使い、段落には使わない。
良さそうで良くない黄
目はだまされる、輝度はだまされない
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */白地の明るい黄色は有名な罠：派手に見えても輝度が近すぎる。#facc15 を #1f2937 の上に置くと ≈ 12:1 なので暗背景に限定。
よくあるコントラストのミス
- 比ではなく目を信じる。鮮やかで彩度の高い色は「強そう」に見えても WCAG 計算で落ちる。
- 細いフォントウェイトは実効コントラストを *下げる* ことを忘れる - ピクセルあたりのインク量が少ないため。ヘアラインでは比を上げる。
- 純白だけで確認する。実際の背景はオフホワイト、グラデーション、写真など - テキストが本当に乗る色で再計算。
placeholderとdisabledを WCAG ぎりぎりにする。両方とも免除だが、免除と読みやすさは別。- 3:1 の *非テキスト* ルールを飛ばす。背景に溶けるボタン、見えない境界のフォーム、見えないフォーカスリング - 本文コントラスト不足の次に多い a11y 違反。
WCAG コントラスト FAQ
良いコントラスト比はいくつ？
本文は最低 4.5:1、大きな見出しやインタラクティブ UI は 3:1 を目標に。7:1 は AAA で、ドキュメント・手順・エラーメッセージなど重要な読み流れでは価値があります。
AA と AAA の違いは？
AA は多くの規制が要求するアクセシビリティの法的最低水準 (WCAG 2.1/2.2 AA)。AAA はロービジョンの利用者を強くサポートしたい組織向けの厳しい目標。AAA は必須ではないが、本文では妥当な目標。
WCAG で「大きな文字」とは？
WCAG では 18pt 以上（約 24px）でレギュラー、または 14pt 以上（約 18.66px）でボールドを大きな文字と定義。大きな文字は AA で 3:1、それ以下のサイズは 4.5:1 が必要。
なぜブランドカラーがコントラストに落ちる？
明度 50% 付近の鮮やかな色 - 特に青・黄・赤 - は白上で 4.5:1 をぎりぎり下回ることが多い。通常は前景を暗くする（または逆転させて白テキストの背景にする）。「前景を調整」で最寄りの合格色を見つけられる。
Disabled コントロールも WCAG を通すべき？
いいえ - disabled コントロールと純粋な装飾は明示的に免除。ただし「免除」と「良い UX」は別。ユーザーが disabled ボタンを背景と区別できなければ、その存在が伝わらない。
