こんな方におすすめ
- 文字色を選ぶデザイナー
- ライト・ダークテーマを確認する開発者
Developer Utility
Color Contrast Checker
テキスト色と背景色のコントラスト比を計算し、WCAG AA・AAA アクセシビリティ基準を満たしているか確認できる色コントラストチェックツールです。
コントラスト比の計算
テキスト色と背景色の相対輝度差を計算し、明確なコントラスト比を表示します。
WCAG 基準チェック
通常テキストと大きなテキストの基準ごとに、AA・AAA の達成状況を確認できます。
リアルタイムプレビュー
入力した色の組み合わせが実際の UI でどのように見えるかをすぐに確認できます。
色の入力
テキスト色と背景色を HEX コードで入力するか、カラーピッカーで指定してください。
Preview
Color Contrast Checker
この文章は、実際の Web ページでテキストが背景の上にどのように表示されるかを確認するためのサンプルです。本文、ボタン、カード、バナー、ダークモードの色組み合わせ確認に利用できます。
チェック結果
計算されたコントラスト比と WCAG アクセシビリティ基準の達成状況を確認できます。
Contrast Ratio
-
色を入力して、コントラストチェックボタンを押してください。
通常テキスト AA
4.5:1 以上
待機
通常テキスト AAA
7:1 以上
待機
大きなテキスト AA
3:1 以上
待機
大きなテキスト AAA
4.5:1 以上
待機
チェック結果がここに表示されます。
色コントラスト基準の比較
テキストサイズとアクセシビリティレベルに応じて必要なコントラスト比が異なります。
通常テキスト
本文、説明文、メニュー、フォームラベルなどの小さな文字は、最低 4.5:1 以上のコントラスト比が推奨されます。
大きなテキスト
大きな見出しや太字テキストは、通常テキストより低い 3:1 の基準でも AA 通過とされます。
UI コンポーネント
ボタン、バッジ、カード、入力欄の背景色を決める際にも、テキストが十分に読めるか確認することが重要です。
再現できる色の組み合わせで文字のコントラストを確認
文字色と背景色をHEXで入力し、通常文字と大きな文字のWCAG AA・AAA判定を確認します。本文、ラベル、ボタン内の文字色を検討するときに使えます。
活用場面
- 灰色のラベルと実際の背景色を比較する。
- 色の入れ替えで同じ比率になることを確認する。
入力から結果の確認まで
- 1
不透明な3桁または6桁のHEX色を入力するか、色選択を使います。
- 2
コントラストを検査します。
- 3
実際の文字サイズと太さに合う判定を確認します。
- 4
HEXを編集したら再検査してからレポートをコピーします。
黒と白
- 入力
- 文字：#000000 背景：#ffffff
- 結果
- 21.00:1、4項目すべて通過
文字色と背景色を入れ替えても比率は同じです。
通常文字AAの境界に近い灰色
- 入力
- 文字：#777777 背景：#ffffff
- 結果
- 4.48:1、通常文字AAは不合格、大きな文字AAは合格
丸め前は約4.4781です。通常文字AAには4.5以上が必要で、表示の丸め値では判定しません。
計算・処理の仕組み
sRGBを線形化して相対輝度を求め、明るい色の輝度に0.05を加えた値を、暗い色の輝度に0.05を加えた値で割ります。通常文字のAA・AAAは4.5・7、大きな文字は3・4.5が基準です。表示は小数第2位、判定は丸め前の値を使います。
注意点と制限
- 不透明なHEX色だけに対応し、透明色、画像、グラデーションは採取しません。
- 実際の文字サイズや太さは自動判別しません。
- 文字コントラストの合格は、キーボード操作や代替テキストなどを含むサイト全体の適合を意味しません。
データの取り扱い
色はブラウザー内で計算し、アップロードや履歴保存はしません。コピーには検査した色、比率、判定が含まれます。
参考資料
あわせて使えるツール
- CSSグラデーション生成
背景を作り、文字の下の色を確認します。
- CSS clamp生成
画面幅に応じた文字サイズを設計します。
よくある質問
大きな文字とは何ですか？
WCAGでは18pt以上、または14pt以上の太字を示します。CSSでは約24px、または約18.67pxの太字です。実際のフォントと太さを確認してください。
透明色を入力できますか？
できません。背景と合成した後の不透明な色を求め、そのHEXを入力してください。
編集すると結果が消えるのはなぜですか？
以前の結果は編集前の色に対応します。再検査することで現在の色に合うレポートをコピーできます。