色のコントラスト確認 — WCAG AA/AAA
無料の WCAG コントラストチェッカー。前景／背景 Hex が AA・AAA を満たすか確認。ブラウザ内で完結し、ファイルは端末から出ません。登録不要。
Sample text Aa
コントラスト比: 3.15:1
AA 本文（≥4.5）不合格
AA 大きい文字（≥3）合格
AAA 本文（≥7）不合格
ヒント：前景を濃くするか背景を明るくすると、AA を通しやすくなります。
プライベート · 高速 · 無料
コントラスト比はアクセシビリティの基本指標。数字が高いほど背景上の文字がはっきり。WCAG は本文と大きな太字見出しで別の基準を置きます。
これは素早いデザインチェックで、完全監査ではありません — フォーカス順、スクリーンリーダー、キーボード経路も重要です。
ブランド色がとても薄いときは、ユーザーに目を細めさせず、文字を暗くするか下地を足してください。
検査の手順
- 前景と背景の hex を入力
- 比率と AA/AAA ヒントを読む
- 目標に達するまで色を調整
コントラスト検査が捕まえるもの
- 低視力の読者の負担を減らす。
- 読めないグレーでのデザインレビュー往復を減らす。
- 「自分には問題ない」論争を数字で落ち着かせる。
シナリオ
- ボタンラベルと塗り色
- 薄いグレーのフッターリンク
- 色付きパネル上のダークモード本文
ヒント
- 本文は大きなディスプレイ書体より厳しい基準 — それでも高めを目指す。
- アイコンも判別できるコントラストが要る。
- グラデーションでは文字の真後ろの色をサンプリング。
参考
| 入力 | 出力 | 備考 |
|---|---|---|
| 白地に暗い文字 | 通常 AA を通過しやすい | 典型的な本文 |
| 白地に薄いグレー | しばしば不合格 | 文字か背景を暗く |
コントラスト FAQ
- AA と AAA の違いは？
- AAA の方が厳しい。多くの製品は最低 AA、可能なら AAA。
- 大きなテキストとは？
- おおよそ大きめの通常サイズ、または中程度サイズの太字 — ページはよくある閾値を適用します。
- 色覚多様性の利用者は？
- コントラストは助けになりますが、状態を色だけで伝えないでください。