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