カラーコントラストチェッカー
大きな文字のサンプル
このコントラストでの通常本文テキストの見え方です。
コントラスト比
4.48:1
AA · 通常テキスト✕
AAA · 通常テキスト✕
AA · 大きなテキスト✓
AAA · 大きなテキスト✕
提案する文字色：#717171
関連する外部ツール
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
カラーコード変換HEX・RGB・HSL・HSV・RGBA を一画面で相互変換。どれか1つを直すと全部追従、ワンクリックコピー・透過・WCAGコントラスト対応。配色ジェネレーターベース色から補色・類似色・トライアドなど色彩理論に基づく調和したカラーパレットを自動生成。色をロックして再生成、CSS変数・Tailwind・JSONに書き出し。グラデーションジェネレーターlinear・radial・conic の CSS グラデーションを複数カラーストップで作成。角度・形状・中心を調整し、background CSS や Tailwind 値をワンクリックでコピー。画像配色抽出画像をサーバーに送らずブラウザ内だけで主要カラー（HEX/RGB）と占有率（%）を抽出。色数指定・ワンクリックコピー・CSS/JSON書き出し対応。
テキストが背景に対して読みやすいかを確認します。文字色と背景色を入力すると、WCAGコントラスト比と通常テキスト・大きなテキストそれぞれのAA・AAAの合否が表示され、ライブプレビューで実際の見た目を確認できます。不合格の場合は合格する類似色を提案します。すべてブラウザ上で完結します。
使い方
- 文字色を選ぶ。
- 背景色を選ぶ。
- コントラスト比とAA・AAAの結果を確認する。
- 不合格の場合は、合格する提案色を適用する。
WCAGのレベルについて
コントラスト比は1:1（コントラストなし）から21:1（白地に黒）まであります。通常テキストではAAが4.5:1以上、AAAが7:1以上を必要とします。大きなテキストではAAが3:1、AAAが4.5:1です。少なくともAAを満たすと、弱視の方がコンテンツを読みやすくなります。
機能
正確なコントラスト比
2色間の正確なWCAG比率を表示します。
AA・AAAの合否判定
通常テキストと大きなテキストの両方について合否を一覧表示します。
ライブプレビュー
選択した色で実際のテキストを表示し、読みやすさを直接確認できます。
合格色の提案
コントラストが不足している場合、AAを満たす近似色を提案します。
プライバシー重視の設計
すべての計算はブラウザ上で行われます。アップロードは一切ありません。
主な用途
アクセシブルなUI
インターフェースのテキストがアクセシビリティ要件を満たしているか確認します。
ブランドカラー
ブランドカラーの組み合わせが文字として読みやすいか確認します。
ボタン・リンク
色付きのボタンやリンクのラベルが判読できるか検証します。
ドキュメント・スライド
色付き背景でテキストが十分目立つか確認します。
注意事項・ヒント
- 大きなテキストとは約18pt以上、または14ptボールド以上を指し、コントラスト要件が低くなります。
- 意味の伝達を色だけに頼らず、テキストやアイコンと組み合わせましょう。
- コントラストは読みやすさの一要素であり、フォントサイズや字間も重要です。
- すべての処理はデバイス上で実行されます。サーバーには何も送信されません。
よくある質問
- コントラスト比とは何ですか？
- 2色の明度の違いを1:1（同一）から21:1（白地に黒）のスケールで表した値です。数値が高いほど読みやすくなります。
- AAとAAAの違いは何ですか？
- AAは標準的なアクセシビリティ基準（通常テキストで4.5:1）、AAAはより厳格な基準（7:1）で読みやすさが向上します。
- 「大きなテキスト」とはどのサイズですか？
- おおよそ18pt以上のレギュラー、または14ptボールド以上です。大きなテキストはコントラスト要件が低く（AAで3:1）なります。
- 提案色とは何ですか？
- 文字色がAAに不合格の場合、背景色に対して4.5:1を満たすまで明るく・または暗く調整した色を提案します。
- データはアップロードされますか？
- いいえ。チェックはブラウザ上で完全に実行されます。サーバーには何も送信されません。