WCAGコントラストチェッカー
文字色と背景色のコントラスト比を計算し、WCAG 2.2のAA・AAA基準を文字サイズ別に表示します。
2色の組み合わせを確認
sRGBの相対輝度とWCAG 2.2の式を使います。通常文字AA 4.5:1、大きな文字AA 3:1、通常文字AAA 7:1、大きな文字AAA 4.5:1を判定します。
ツール本体
入力・操作・結果
上から入力し、必要な操作を行って、表示された結果と次の操作を確認してください。
2色を入力して確認してください。
入力データは原則ブラウザ内で処理し、URLやアクセス解析へ保存しません。ページを更新すると入力は失われます。機密情報は入力しないでください。
使い方
- 文字色と背景色をHEXで入力します。
- コントラスト比を計算します。
- 実際に使う文字サイズのAA・AAA結果を確認します。
この結果は指定した2色のcontrast criteriaだけを確認します。ページやサイト全体のWCAG適合を保証しません。
このツールを使う場面
- 確認できること
- 指定した2色について、sRGBの相対輝度と文字contrast基準を確認できます。
- 使う前に見るポイント
- 実際に隣接する不透明な文字色と背景色をHEXで用意します。
- 結果を見たあとにやること
- 文字サイズ別の結果を確認し、ページ全体のWCAG適合とは分けて扱います。
つまずきやすいポイント
2色が通ればサイト全体も適合と思う
操作、構造、代替テキストなど他の達成基準は検査しません。
半透明色をそのまま入力する
このページは不透明なHEX 3桁または6桁だけに対応します。
境界値・事前チェック項目
黒と白
最大の21:1です。
同じ色
最小の1:1となり、文字の基準は通りません。
よくあるミスと回避策
大きな文字の定義を見た目で決める
large-scaleの定義はWCAG本文を確認してください。
小数を丸めてから判定する
PASS/FAILは丸め前の比率で判定します。
FAQ
どの基準を使っていますか？
W3CのWCAG 2.2にある相対輝度、contrast ratio、1.4.3、1.4.6を使います。
PASSならサイトはWCAG適合ですか？
いいえ。指定した2色の文字contrastだけの結果です。
基本FAQ
入力データは外部へ送信されますか？
原則として送信されません。入力内容はブラウザ内で処理し、URLやアクセス解析へ保存しません。例外がある場合は各ツールページ内に明記しています。
入力内容は自動保存されますか？
原則として自動保存しません。ページを更新すると入力は失われます。コピーやダウンロードで保存する場合は、ご利用端末内に保存されます。
結果を使う前に何を確認すべきですか？
対象年度・入力前提・提出先ルールを先に確認してください。必要に応じて公式情報や担当窓口で最終確認する運用を推奨します。
関連ツール
同じ作業の前後で使うことがあるツールです。