WCAGカラーコントラストチェッカー
2色を選ぶだけで、アクセシビリティ法規(WCAG AA/AAA)への適合を即座に確認。色覚異常ユーザーの見え方をシミュレートし、ワンクリックで修正提案を取得できます。
サンプルの組み合わせ
大見出しテキスト(18pt ボールド)
素早い茶色の狐が怠けた犬を飛び越えた。通常の本文テキスト、16px。
小さなキャプション 12px — 最も読みにくいサイズ。
17.06
コントラスト比
AAA — 優秀
WCAG AAPass
通常テキスト(< 18pt / < 14pt ボールド)
4.5:1
WCAG AAAPass
通常テキスト(< 18pt / < 14pt ボールド)
7:1
WCAG AAPass
大きいテキスト(≥ 18pt または ≥ 14pt ボールド)
3:1
WCAG AAAPass
大きいテキスト(≥ 18pt または ≥ 14pt ボールド)
4.5:1
WCAG 2.1では通常テキストに4.5:1(AA)または7:1(AAA)、大きいテキストに3:1(AA)または4.5:1(AAA)を要求します。AAは多くの国の法的最低基準です。
色覚異常シミュレーション
Aa 123
正常視覚
17.1:1
Aa 123
1型色覚(赤盲)
16.8:1
Aa 123
2型色覚(緑盲)
17.2:1
Aa 123
3型色覚(青盲)
16.9:1
Aa 123
全色盲(色なし)
17.0:1
Machado 2009モデル(重症度1.0)を線形sRGB空間で適用したシミュレーションです。赤緑色盲の合計は男性の約8%に影響します。
よくある質問
- コントラスト比とは何ですか?どのように計算しますか?
- コントラスト比は、WCAG 2.1が定義する2色間の輝度差の数値指標です。1:1(同一色、コントラストなし)から21:1(純黒と純白)の範囲で、計算式は(L1 + 0.05) / (L2 + 0.05)です。L1とL2はそれぞれ明るい色と暗い色の相対輝度を表します。
- WCAG AAとAAAの違いは何ですか?
- WCAG AAは多くの国で法的最低基準とされており、通常テキストに4.5:1、大きいテキストに3:1のコントラスト比を要求します。WCAG AAAは高度な基準で、通常テキストに7:1、大きいテキストに4.5:1を要求し、弱視や読字困難のユーザーに適しています。ほとんどの法規制はAAを義務付けており、AAAはベストプラクティスの目標です。
- WCAGの「大きいテキスト」はどのように定義されますか?
- WCAGでは大きいテキストを、通常ウェイトで18pt(24px)以上、またはボールドウェイトで14pt(約18.67px)以上と定義しています。大きなテキストは低いコントラストでも読みやすいため、WCAGはより低い閾値を適用しています。これらのサイズ未満のテキストはすべて通常テキストとして扱われ、より厳しい4.5:1(AA)または7:1(AAA)基準が必要です。
- 色覚シミュレーションでコントラスト比が変わるのはなぜですか?
- 色覚シミュレーションは知覚モデル(Machado 2009、重症度1.0)を線形sRGB空間で適用して色を変換します。変換後のRGB値の相対輝度が元の値と異なるため、コントラスト比が変化します。正常視覚でWCAG AAに合格する組み合わせが、赤盲(1型)や緑盲(2型)のユーザーには不合格になる場合があり、このツールはそのギャップを可視化します。
- このツールは色データをどこかに送信しますか?
- いいえ。コントラスト比の計算、WCAGバッジの評価、色覚異常シミュレーション、修正提案のすべてが、JavaScriptによりブラウザ内で完結します。色の値がAppicLabのサーバーや第三者に送信されることは一切ありません。
- 自動修正提案はどのように使いますか?
- 色の組み合わせがWCAG AAに不合格の場合、提案パネルにはテキストまたは背景色の明度を最小限に調整してターゲット比を達成する方法が表示されます(元の色相と彩度を維持)。「適用」をクリックするとリアルタイムでプレビューでき、hexコードを直接コピーすることもできます。サイコロアイコンをクリックすると、基準を満たす新しいランダムなパレットを生成できます。
- カラーコントラスト不足で罰金や訴訟を受けることはありますか?
- はい。米国ではADA(障害を持つアメリカ人法)がウェブサイトに適用され、カラーコントラスト不足などを理由に連邦裁判所で企業が訴えられた事例があります。EUでは欧州アクセシビリティ法(EAA)により、ほとんどのデジタル製品・サービスは2025年6月までにWCAG 2.1 AA準拠が義務付けられ、違反には各国の罰則が科されます。英国の2010年平等法も同様の義務を課しています。政府・公共機関のサイトはより厳しい適用を受けます。WCAG AAのコントラスト基準を満たすことは、法的リスクを下げるうえで最もコストパフォーマンスの高い施策の一つです。