カラーコントラストチェッカー

配色の組み合わせをWCAGアクセシビリティ基準で検証 — ライブプレビューと自動修正提案付き。

💡 テキスト色と背景色を選択してください。コントラスト比とWCAG AA/AAAの判定がリアルタイムで更新されます。不合格の場合は、提案色をクリックすると即座に修正できます。

コントラスト比
3.67:1
通常テキスト
24px未満（太字は18.5px未満）— AAは4.5:1以上、AAAは7:1以上
✗ AA 不合格✗ AAA 不合格
大きいテキスト
24px以上(太字は18.5px以上)— AAは3:1以上、AAAは4.5:1以上
✓ AA 合格✗ AAA 不合格
UIコンポーネント・グラフィック
ボタン、フォームの枠線、アイコン — AAは3:1以上
✓ AA 合格
修正候補

色相と彩度を維持したまま、基準を満たすまで明度を調整した色です。クリックで適用できます。

ライブプレビュー

これは16pxの通常の本文テキストです。長い段落でも快適に読めることが重要です — ウェブ上のほとんどのコンテンツはこのサイズです。

大きい見出しテキスト

ボタンコンポーネント
#6b7280/#111827

カラーコントラストチェッカーとは?

カラーコントラストチェッカーは、2つの色(通常はテキストとその背景)の輝度差を測定し、1:1(同一色)から21:1(白地に黒)までの比率で表します。この比率は、ロービジョンや色覚特性のある方、また強い日差しの下で画面を見る人にとって読みやすいかどうかを決定します。Webコンテンツアクセシビリティガイドライン(WCAG)は、ウェブサイトがアクセシブルと見なされるために満たすべき最小比率を定義しており、多くの国では米国のADAや欧州アクセシビリティ法、日本のJIS X 8341-3などの法規制・規格に組み込まれています。

WCAG AAとAAAの違いは?

WCAGはコントラストについて2つの適合レベルを定義しています。レベルAAは、ほとんどの法律や監査で要求される標準で、通常テキストには4.5:1以上、大きいテキスト(24px以上、太字なら18.5px以上)とUIコンポーネントには3:1以上を要求します。レベルAAAはより厳格で、通常テキストに7:1、大きいテキストに4.5:1を要求し、重度の視覚障害のあるユーザー向けコンテンツに推奨されます。多くのプロジェクトはAAを基準とし、法的文書や医療情報などの重要なコンテンツにAAAを適用します。

コントラスト比はどう計算される?

WCAGの計算式では、まず各色を相対輝度に変換します。相対輝度とは知覚される明るさの指標で、人間の目は緑に最も敏感なため、赤や青より緑に大きな重みを与えます。各RGBチャンネルにガンマ補正を施した後、0.2126×R + 0.7152×G + 0.0722×B として合成します。比率は (L1 + 0.05) / (L2 + 0.05) で、L1は明るい方の色の輝度です。このツールはこの正確な計算式をブラウザ内で実行します — データが端末の外に送信されることはありません。

アクセシブルな配色デザインのコツ

  • 色だけに頼らない — エラーなどの状態にはアイコン、下線、ラベルを併用する
  • ライトテーマとダークテーマの両方でテストする — 片方で合格する配色がもう片方で不合格になることは多い
  • 白地のグレーテキストは #767676 以下の暗さでないとAAに合格しない
  • ホバー、フォーカス、無効状態も確認する — UIコンポーネントとして3:1が必要
  • このツールの修正候補を使えば、ブランドの色相を保ったまま明度だけを調整できる