Toon Tone
日
ENEnglishESEspañol日日本語한한국어FRFrançaisDEDeutschRUРусскийPTPortuguês

無料のWCAG 2.2デザインツール

カラーコントラストチェッカー WCAG AA・AAA

カラーコントラストチェッカーで前景色と背景色を測定し、文字とUIの基準、実用的なプレビュー、近い合格色、パレット全体の組み合わせを確認できます。色データは送信されません。

2026年7月25日更新

チェッカーを開くToon Toneで遊ぶ

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

カラーコントラストチェッカーは何を判定しますか？

カラーコントラストチェッカーは2つのHEXからWCAG比率を計算します。通常文字と大きな文字のAA・AAA、UIに関係する3:1、ライブプレビュー、パレット表を別々に表示します。カラーコントラストチェッカーは4.5:1または7:1に届く近いHSB前景色も探します。数値の合格はページ全体の認証ではありません。

一つの比率を実装判断へ変える

カラーコントラストチェッカーは数値、見た目、修正方法を同じ流れで示します。

  • 5種類の結果を分離

    カラーコントラストチェッカーは通常文字AA・AAA、大きな文字AA・AAA、UIの3:1を別表示します。用途を取り違えずに判断できます。

  • 実際のUIに近いプレビュー

    カラーコントラストチェッカーは見出し、本文、ボタン、バッジに選択色を適用します。コンポーネント化する前に違和感を発見できます。

  • パレット全体の比較表

    2〜8色を追加すると、カラーコントラストチェッカーが全組み合わせを測定します。単一ペアでは見えない安全な役割の組を探せます。

WCAG 2.2 · HEX · HSB

カラーコントラストチェッカーを使う

2つのHEXを入力してください。計算はすべてブラウザ内で即時更新されます。

コントラスト比14.05:1

合格 · AA 通常文字

AA 通常文字4.5:1合格
AAA 通常文字7:1合格
AA 大きな文字3:1合格
AAA 大きな文字4.5:1合格
UIコンポーネント3:1合格
ライブ表示

読みやすさのUIプレビュー

選んだ背景の上で、前景色を文字、境界線、操作要素に使用しています。

近い合格前景色を探す

可能な限り色相を保ち、HSBの彩度と明るさを最小限変更します。

すべての計算はこのブラウザ内で行われます。
:root {
  --accessible-foreground: #1F2937;
  --accessible-background: #F9FAFB;
}

.your-component {
  color: var(--accessible-foreground);
  background: var(--accessible-background);
}

パレット・コントラスト表

2〜8色を追加します。各セルは行色と列色の比率です。

パレット全色ペアのWCAGコントラスト比
色1#1F29372#F9FAFB3#2563EB4#F59E0B
1#1F2937—14.05:1AA2.84:13:1未満6.83:1AA
2#F9FAFB14.05:1AA—4.95:1AA2.06:13:1未満
3#2563EB2.84:13:1未満4.95:1AA—2.41:13:1未満
4#F59E0B6.83:1AA2.06:13:1未満2.41:13:1未満—

WCAG 2.2のコントラスト基準

カラーコントラストチェッカーは文字の基準と非テキストの3:1を区別します。

カラーコントラストチェッカーが使用するWCAG 2.2基準
用途レベル最小比率意味
通常文字AA4.5:1WCAGの大きな文字に該当しない文字。
大きな文字AA3:1通常約24 CSS px、太字約18.5 CSS px以上。
通常文字AAA7:1小さい文字の強化基準。
大きな文字AAA4.5:1大きな文字の強化基準。
UI・図形AA3:1隣接色に対する必要な視覚情報。

3段階のコントラスト確認

カラーコントラストチェッカーを繰り返せるレビュー工程として使います。

1. 本番の色を入力する

カラーコントラストチェッカーには実際のデザイントークンを入力します。元のHEXがあるときは圧縮画像から採色しません。通常、ホバー、アクティブ、フォーカス、エラー、選択、無効の各状態は隣接色が変わるため別々に確認します。

2. 内容に合う基準を選ぶ

通常文字のAAは4.5:1、AAAは7:1です。大きな文字の低い基準は表示サイズと太さが定義を満たす場合だけ使います。重要な境界、アイコン、状態表示は非テキスト3:1として確認します。

3. 完成コンポーネントを検証する

カラーコントラストチェッカーで合格後、ズーム、両テーマ、実際の文章で確認します。フォーカス、色以外の手掛かり、全状態も検証します。自動計算は比率を、人のレビューは文脈を確認します。

カラーコントラストチェッカーの計算方法

カラーコントラストチェッカーはsRGB各チャンネルを線形化し、WCAGの相対輝度係数を使います。赤0.2126、緑0.7152、青0.0722です。明るい値をL1、暗い値をL2として(L1 + 0.05) / (L2 + 0.05)を計算します。同色は1:1、黒と白は21:1です。

前景色と背景色を入れ替えても数値は同じですが、実装の意味は変わります。透明度、グラデーション、画像、混合、影は2つの単色と異なるピクセルを生みます。透明色は先に実背景へ合成し、その結果をカラーコントラストチェッカーへ入力します。

合格しても認証にならない理由

WCAG適合はページや工程全体に適用されます。カラーコントラストチェッカーは文字が本当に大きいか、アイコンが必要情報か、色だけが手掛かりかを判断できません。キーボード操作、名前、役割、フォーカス順、文章の品質も別に検証します。

カラーコントラストチェッカーをアクセシビリティ確認の一項目として使い、コンポーネント、状態、トークン、基準、日付、結果を記録します。この履歴が修正理由を示し、テーマ変更後の再確認を容易にします。

カラーコントラストチェッカー公開チェックリスト

結果を公開判断の証拠にする前に、次の項目を確認します。

  1. 01

    カラーコントラストチェッカー: 圧縮画像の採色ではなく元のHEXを使う。

  2. 02

    カラーコントラストチェッカー: ライトテーマとダークテーマを別々に確認する。

  3. 03

    カラーコントラストチェッカー: 通常、ホバー、フォーカス、選択、エラー、無効を試す。

  4. 04

    カラーコントラストチェッカー: 例外がなければ通常AA文字に4.5:1を適用する。

  5. 05

    カラーコントラストチェッカー: 通常文字AAAが要件なら7:1を適用する。

  6. 06

    カラーコントラストチェッカー: 大きな文字と判断する前にサイズと太さを確認する。

  7. 07

    カラーコントラストチェッカー: 重要なアイコン、境界、状態表示を3:1で確認する。

  8. 08

    カラーコントラストチェッカー: 透明度を実背景へ合成してから測る。

  9. 09

    カラーコントラストチェッカー: 画像やグラデーションでは最も弱い部分を測る。

  10. 10

    カラーコントラストチェッカー: エラー、リンク、選択、状態に色以外の手掛かりを付ける。

  11. 11

    カラーコントラストチェッカー: フォーカス表示を前後の背景に対して確認する。

  12. 12

    カラーコントラストチェッカー: ズームして内容と操作が保たれるか確認する。

  13. 13

    カラーコントラストチェッカー: 短い例文だけでなく実際の文章を使う。

  14. 14

    カラーコントラストチェッカー: 部品、状態、トークン、基準、結果、日付を記録する。

  15. 15

    カラーコントラストチェッカー: 表から承認ペアを選び、全組合せを強制しない。

  16. 16

    カラーコントラストチェッカー: 共有トークン変更時にすべて再確認する。

  17. 17

    カラーコントラストチェッカー: 対応する場合は強制色モードも確認する。

  18. 18

    カラーコントラストチェッカー: 数値に加えてキーボード、読み上げ、目視確認を行う。

結果を支えるWCAG一次資料

カラーコントラストチェッカーは公開された式と基準を使い、公式文書を最終的な根拠とします。

AA文字基準の原文: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

公式情報源

次のカラーワークフロー

カラーシェード生成HSBカラーピッカー画像カラーピッカーアニメ色パレット生成Delta E 計算機ブログToon Toneで遊ぶ

カラーコントラストの質問

良いコントラスト比はいくつですか？

カラーコントラストチェッカーでは通常文字AAを4.5:1、AAAを7:1とします。大きな文字はAA 3:1、AAA 4.5:1です。必要なUI情報は一般に3:1です。

3:1はWCAG AAに合格しますか？

条件を満たす大きな文字と非テキスト情報には使えますが、通常AA文字には不足です。カラーコントラストチェッカーは誤解を防ぐため結果を分けます。

透明色も確認できますか？

カラーコントラストチェッカーは単色HEXを受け取ります。透明色を実背景へ先に合成してください。画像やグラデーションは最も比率が低い場所を測ります。

自動調整はどう色を選びますか？

カラーコントラストチェッカーは可能な限り色相を維持し、HSBの彩度と明るさを探索します。目標比率に届く近い前景色を提案しますが、デザイン内で再確認します。

合格すればページ全体がアクセシブルですか？

いいえ。カラーコントラストチェッカーは選択色の数学的関係を確認します。全体では構造、キーボード、フォーカス、ラベル、代替、完全な工程の検証も必要です。