カラーコントラストチェッカー｜WCAG 2.2判定
文字色と背景色のコントラスト比を計算する無料ツールです。WCAG 2.2のAA・AAA、大きな文字、UI部品を判定し、基準を満たす代替色とCSSも作成できます。
WCAG 2.2
文字色と背景色を比較
例：
px
読みやすい文字色か確認します
The quick brown fox jumps over the lazy dog. 0123456789
コントラスト比
12.63:1
通常文字・AA基準 4.5:1
合格
合格する文字色の候補
現在の背景色を保ち、文字色を白または黒方向へ最小限調整します。
WCAGのコントラスト比とは？
コントラスト比は、明るい色と暗い色の相対輝度から算出され、1:1（同じ明るさ）から21:1（白と黒）の範囲になります。このツールはsRGBの色をWCAG 2.2の計算式で比較します。
レベルAAは4.5:1以上、より高いAAAは7:1以上が基準です。
24px以上、または約18.7px以上の太字は、AA 3:1・AAA 4.5:1が基準です。
操作に必要な境界線、アイコン、グラフなどは、隣接色に対して3:1以上が目安です。
表示値を丸めて合否判定しません。たとえば計算結果が4.499:1の場合、画面上で4.50:1と見えても4.5:1基準には不合格です。半透明色・グラデーション・背景画像は、実際に隣接する見え方を個別に確認してください。
基準：W3C SC 1.4.3 Contrast (Minimum)、SC 1.4.6 Contrast (Enhanced)、SC 1.4.11 Non-text Contrast
このツールの使い方・詳細
🛠 使い方
文字色と背景色をカラーピッカーまたはHEX形式で指定します。文字サイズと太さに応じたWCAG判定、通常文字・大きな文字・UI部品の基準一覧、合格する文字色候補を確認できます。
💡 活用シーン・ユースケース
- Webサイトの文字色がWCAG 2.2の最低コントラスト基準を満たすか確認する
- 文字サイズと太さを含めてAA・AAAの合否をレビューする
- 基準を満たす代替色やCSSを作り、デザインへ反映する