Developer Utility
Color Contrast Checker
テキスト色と背景色のコントラスト比を計算し、WCAG AA・AAA アクセシビリティ基準を満たしているか確認できる色コントラストチェックツールです。
色の入力
テキスト色と背景色を HEX コードで入力するか、カラーピッカーで指定してください。
この文章は、実際の Web ページでテキストが背景の上にどのように表示されるかを確認するためのサンプルです。本文、ボタン、カード、バナー、ダークモードの色組み合わせ確認に利用できます。
チェック結果
計算されたコントラスト比と WCAG アクセシビリティ基準の達成状況を確認できます。
色を入力して、コントラストチェックボタンを押してください。
チェック結果がここに表示されます。
色コントラスト基準の比較
テキストサイズとアクセシビリティレベルに応じて必要なコントラスト比が異なります。
本文、説明文、メニュー、フォームラベルなどの小さな文字は、最低 4.5:1 以上のコントラスト比が推奨されます。
大きな見出しや太字テキストは、通常テキストより低い 3:1 の基準でも AA 通過とされます。
ボタン、バッジ、カード、入力欄の背景色を決める際にも、テキストが十分に読めるか確認することが重要です。
ヘルプ
Color Contrast Checker とは？
Color Contrast Checker は、テキスト色と背景色のコントラスト比を計算し、Web ページで文字が十分に読みやすいか確認できる無料の開発者・デザイン向けユーティリティです。
ボタン、バナー、本文テキスト、カード UI、ダークモード配色、ブログテーマの色確認などに活用できます。
対応機能
- テキスト色と背景色のコントラスト比計算
- WCAG AA・AAA 基準の通過確認
- 通常テキストと大きなテキストの基準を分けて表示
- カラーピッカーと HEX コード入力対応
- 色組み合わせのプレビュー
- チェック結果のコピー
活用例
- Web サイト本文テキストの可読性確認
- ボタンテキストと背景色のアクセシビリティ確認
- ブログテーマの色組み合わせ確認
- ダークモード UI のコントラストチェック
- ランディングページ、カード UI、バナーデザイン確認
- デザインシステムのカラーパレット検討
WCAG AA と AAA 基準とは何ですか？
WCAG は Web コンテンツのアクセシビリティを評価するための基準です。通常テキストは AA で 4.5:1 以上、AAA で 7:1 以上が推奨されます。大きなテキストは AA で 3:1 以上、AAA で 4.5:1 以上が推奨されます。
通常テキストと大きなテキストの違いは何ですか？
通常テキストは本文、説明文、メニューなど比較的小さい文字です。大きなテキストは見出しのようにサイズが大きい、または太字の文字を指し、通常テキストより低いコントラスト基準が適用される場合があります。
コントラスト比が高ければ常に良いデザインですか？
高いコントラストは可読性に有利ですが、強すぎるコントラストは視覚的に負担になることがあります。アクセシビリティ基準を満たしつつ、ブランドトーンや画面の雰囲気に合う配色を選ぶことが重要です。
どの HEX 形式を入力できますか？
#111827 のような 6 桁 HEX コードと #fff のような 3 桁 HEX コードを入力できます。# 記号を省略しても自動で補正されます。
チェック結果だけでアクセシビリティは保証されますか？
いいえ。このツールは色のコントラスト比を基準に確認します。実際の使いやすさはフォントサイズ、太さ、画面の明るさ、ユーザー環境によって変わるため、最終適用前に実画面でも確認することをおすすめします。