01
色の入力形式をそろえる
3桁または6桁のHEXを使います。透過率は前景色の専用欄で指定し、8桁HEXの末尾を黙って無視することはありません。
Color & Accessibility
カラーコントラストチェッカー文字色を確かめる
文字色と背景色を入力し、透明度と文字サイズを合わせてから5つの判定を確認します。
カラーコントラストチェッカー
プレビュー文
コントラスト比
4.48:1
選択した文字の判定: 不合格 · AA · 必要値 4.5:1
通常文字として判定 · 合成後の前景色: #777777
通常文字AA · 4.5:1不合格
通常文字AAA · 7:1不合格
大きい文字AA · 3:1合格
大きい文字AAA · 4.5:1不合格
UI・図形AA · 3:1合格
色のプレビュー
この文字で色と文字サイズを確認できます。
基準を満たす色の候補
前景色を調整
#767676 · 4.54:1
背景色を調整
#060606 · 4.52:1
計算はブラウザー内で行われ、色の値は送信されません。
文字の条件
結果は最新です。
デザイン上は読める灰色でも、白い入力欄に置くと通常文字のAA基準をわずかに下回ることがあります。カラーコントラストチェッカーなら公開前にその境目を数値で確かめられます。
小さなラベルと大きな見出しでは必要な比率が違います。このカラーコントラストチェッカーは文字色の透過を背景色と合成し、見えている色でコントラスト比を計算します。
カラーコントラストチェッカーを使う理由
入力したHEXそのものではなく、画面に現れる文字色を対象にします。
透過した文字色を先に合成
前景色の不透明度を0～100%で設定できます。カラーコントラストチェッカーは背景上の合成色を表示してから輝度を求めるため、半透明の文字を不透明な色として過大評価しません。
文字色と背景色を別々に提案
選んだAA・AAA目標に届かない場合、文字色を変える案と背景色を変える案をそれぞれ表示します。候補の比率を確認してから適用し、元の色へ一度戻せます。
判定を読む前に合わせる三つの条件
色の重なり方、文字の大きさ、目標レベルを実際のデザインに合わせます。
02
文字サイズと太字を指定
通常の文字は24px以上、太字なら約18.67px以上で大きい文字と判定します。自動チェックは変更後に短く待って更新し、手動へ切り替えることもできます。
03
丸める前の合否を確認
画面の比率は小数第2位までですが、合否は丸める前の値で決めます。結果が古い間はコピーも候補の適用もできません。
見えている色とWCAGの条件
色の比率と文字条件の合否を分けて示します。
透過色の合成
前景色を不透明な背景に重ね、表示色のHEXも示します。透明度を変えると同じ元の色でも比率が変わる理由を確認できます。
文字の条件に沿った判定
コントラスト比の計算自体は文字サイズで変わりません。変わるのは通常文字と大きい文字に適用するAA・AAAのしきい値です。
五つの結果を同時表示
通常文字と大きい文字のAA・AAA、意味のあるUI図形のAAを別々に表示します。目標を変更しても基礎となる比率は同じです。
適用前に色を比較
文字色と背景色の修正候補に新しい比率を添えます。ブランドカラーを勝手に書き換えず、適用後にも一度元へ戻せます。
一組の色だけで分からないこと
比率が通ってもページ全体のアクセシビリティを証明するものではありません。
- 背景は不透明な単色のみ
- 透明背景にはさらに下の色が必要です。写真やグラデーションも場所によって色が違うため、この二色の計算には含めません。
- HEXは3桁か6桁
- 色名、rgb()、hsl()、OKLCH、8桁HEXを自動変換しません。アルファ値は前景色の不透明度欄で指定してください。
- ページ全体の監査ではない
- カラーコントラストチェッカーは指定した一組の色を調べます。キーボード操作、フォーカス表示、他の状態の色は別途確認が必要です。
- APCAの点数を混ぜない
- ここでのAA・AAAはWCAG 2.xの比率です。APCAは計算法も目標値も異なるため同じ合格表示にまとめません。
カラーコントラストチェッカーのよくある質問
AA・AAA、大きい文字、透過色と判定範囲を整理します。
AAとAAAの違いは何ですか？
AAは通常文字で4.5:1、大きい文字で3:1です。AAAは通常文字で7:1、大きい文字で4.5:1とさらに厳しくなります。
「大きい文字」の定義は何ですか？
通常の太さなら24px以上、太字なら14ptに相当する約18.67px以上です。20pxの通常文字を大きい文字として扱うことはできません。
4.5:1を満たせないとき、どう調整すればよいですか？
文字色を暗くする案と背景色を明るくする案を見比べてください。候補はプレビューのみで、確認して適用するまでは元の色は残ります。
透過した文字色のコントラスト比はどう計算しますか？
前景色を背景色へ合成してから相対輝度を求めます。不透明度が0%なら文字は背景と同色になり、比率は1:1です。
色の組み合わせが合格すればページ全体もアクセシブルですか？
いいえ。このカラーコントラストチェッカーが判定するのは指定した文字条件と色の組み合わせだけです。ページの構造や操作性は別に確認してください。
判定が違う色の組み合わせはありますか？