2色を入力
前景色とその直後の単色背景を入力します。
FREE WCAG COLOR CONTRAST CHECKER
無料WCAGカラーコントラストチェッカー
文字色と背景色が読みやすい組み合わせかWCAG 2.2基準ですぐ確認できます。
入力した色と結果はサーバーへ送信・保存されません。
- 1色を入力
- 2コントラスト確認
- 3結果をコピー
1 · 色を入力
比較する色を選んでください
カラーピッカーまたは3桁・6桁のHEX値を使えます。
2 · コントラスト確認
WCAG 2.2 コントラスト結果
コントラスト比—
- AA 通常文字4.5:1以上—
- AA 大きな文字3:1以上—
- AAA 通常文字7:1以上—
- AAA 大きな文字4.5:1以上—
- UIコンポーネント3:1以上—
3 · 結果をコピー
実際の配色プレビュー
通常文字のプレビュー — 本文が読みやすいか確認してください。
大きな文字のプレビュー不透明な単色sRGBのみを確認します。透明度、グラデーション、画像、ページ全体の適合性は検査しません。
無料カラーアクセシビリティガイド
2色で読みやすい組み合わせを確認
登録やインストールなしでWCAG 2.2のコントラストを無料計算します。基準を確認
通常・大きな文字とUIのAA・AAA結果を確認します。
表示を確認
実用サイズの文字と部品の見え方も確認します。
WCAGコントラストを理解する
1つの比率を用途別の基準で判定
文字サイズと適合レベルで必要な最低比率が変わります。
通常文字 4.5:1
WCAG AAの通常文字には4.5:1以上が必要です。
大きな文字 3:1
大きな文字は3:1からAAに合格します。
UIも3:1
識別に必要な部品や図形には3:1が必要です。
FREE WCAG COLOR CONTRAST CHECKER FAQ
カラーコントラストのよくある質問
無料利用、WCAG基準と検査範囲を確認できます。1無料で使えますか？
はい。登録不要・回数制限なしで無料利用できます。
2AAとAAAの違いは何ですか？
AAAの方が高いコントラストを求めます。通常文字はAAで4.5:1、AAAで7:1以上です。
3大きな文字とは？
WCAGでは通常ウェイト約24px以上、または太字約18.66px以上です。
4この結果だけでサイト全体がWCAG適合になりますか？
いいえ。不透明な単色2色だけの計算です。実際の隣接色、各状態、画像や他の要件も確認してください。