配色チェックツール
配色コントラストチェッカー
文字色と背景色を選ぶだけで、コントラスト比とWCAGのAA/AAA基準への適合をその場で判定します。
1色を選ぶ
文字色
背景色
2プレビュー
大きな見出しテキストの見え方
これは通常サイズの本文テキストです。実際のコンテンツに近い長さで、読みやすさを確認できます。
ボタンの例3判定結果
21.00
: 1 のコントラスト比
通常テキスト・AA(4.5:1以上)
通常テキスト・AAA(7:1以上)
大きな文字・AA(3:1以上)
大きな文字・AAA(4.5:1以上)
UIコンポーネント(3:1以上)
「大きな文字」は18pt(24px)以上、または14pt(18.66px)以上の太字が目安です。UIコンポーネント基準は、ボタンの枠線やアイコンなど文字以外の意味を持つ要素に適用されます。
4色覚シミュレーション
P型・D型・T型(色覚多様性)でこの配色がどう見えるかを並べて比較できます。行列変換による簡易シミュレーションのため、実際の見え方の目安としてご利用ください。
5もっと確認する
AA準拠の近似色を提案
今の色相・彩度を保ったまま、文字色の明るさだけを調整してAA基準(4.5:1)を満たす色を探します。
アクセシブル配色ガチャ
ランダムな背景色に対して、AA基準を満たす文字色を自動で組み合わせます。
この配色を共有
現在の組み合わせをURLにして、チームやデザイナーと共有できます。
ご自身のWebサイト全体の見やすさ・使いやすさが気になる方へ。
専門のアクセシビリティ簡易診断も承っています。
この判定はWCAG(JIS X 8341-3:2016)のコントラスト基準に基づく概算です。実際の適合判定は専門のアクセシビリティ診断とあわせてご確認ください。