コントラストチェッカー
文字の色と背景の色のコントラスト比を計算し、WCAGの達成基準（AA・AAA）との適合を即座に判定します。読みやすい配色づくりの確認に役立ちます。
コントラスト比
-
プレビュー
配色の確認用テキスト あいうえお 12345
0123456789 abcdefghijklmnopqrstuvwxyz
WCAG達成基準
| WCAG達成基準 | 要求値 | 判定 |
|---|---|---|
| 通常テキスト（AA） | 4.5:1 | - |
| 大きな文字（AA） | 3:1 | - |
| 通常テキスト（AAA） | 7:1 | - |
| 大きな文字（AAA） | 4.5:1 | - |
使い方
- 1
文字色と背景色を入力
カラーピッカーかカラーコードで、文字の色と背景の色を指定します。
- 2
コントラスト比を確認
2つの色のコントラスト比が即座に表示されます。
- 3
基準との適合を確認
WCAGのAA・AAA各レベルとの適合を一覧で確認し、必要なら色を調整します。
このツールの特長
- 文字色と背景色のコントラスト比を即時計算
- WCAGのAA・AAA各レベルとの適合を一覧で判定
- プレビューで実際の見え方を確認
- すべてブラウザ内で計算、入力した色は送信しない
こんな場面で便利
サイトの文字色の確認
背景色に対して、本文や見出しの文字色が基準を満たすか確認する。
ボタンとリンクの設計
ボタンのラベルやリンクの色が、操作できることが伝わるか検証する。
資料やスライドの配色確認
プロジェクターでも読めるよう、資料の文字と背景のコントラストを確認する。
詳しい説明
コントラスト比は、文字と背景の明るさの差を数値化したものです。WCAG 2.xでは、各色の「相対輝度」（sRGBの値を線形化したうえで0.2126・0.7152・0.0722の重みで合成した値）をもとに、明るい側と暗い側の比を (L1 + 0.05) ÷ (L2 + 0.05) で計算します。
達成基準は、通常テキストがAAで4.5:1以上（AAAで7:1以上）、大きな文字（18pt以上など）がAAで3:1以上（AAAで4.5:1以上）です。黒と白の組み合わせは最大値の21:1になります。逆に、白背景に明るいグレーの文字のような組み合わせは基準を満たさず、多くの人に読みにくくなります。
本ツールの判定はWCAGの数値基準に基づく機械的な確認です。実際の読みやすさには文字の太さやフォントも影響するため、基準を満たしていても実際の表示での確認をおすすめします。計算はすべてブラウザ内で完結し、入力した色が送信されることはありません。
よくある質問
コントラスト比はどこで確認できますか？
WCAG 2.x（W3C）の定義に基づき、文字色と背景色の相対輝度から本ツールが計算します。黒と白の組み合わせが最大の21:1です。
何対あれば合格ですか？
通常の文字はAAで4.5:1以上（AAAで7:1以上）、18pt以上の大きな文字はAAで3:1以上（AAAで4.5:1以上）が基準です。
基準を満たしていても読みにくいことはありますか？
あります。文字の太さやサイズ、フォントのデザインも読みやすさに影響します。基準は最低限の目安として、実際の表示でも確認してください。
入力した色は送信されますか？
いいえ。計算はすべてブラウザ内で完結し、入力内容がサーバーへ送信されることはありません。
関連ガイド
ガイド配色の決め方｜補色・類似色・トライアドの基本と選び方
配色の決め方を色相環ベースで解説します。補色・類似色・トライアド・モノクロームの4つの組み合わせと色相の角度、60-30-10ルール、文字と背景のコントラストの考え方を、Webサイトや資料の例つきで初心者向けにまとめました。
ガイドコントラスト比の調べ方｜WCAG基準と文字色の確認手順
文字と背景のコントラスト比の調べ方を解説します。WCAG 2.xの相対輝度の仕組み、AA・AAA各レベルの基準値（4.5:1・3:1・7:1）、よくある色の組み合わせの比率例、基準を満たすための調整方法を、計算例つきで初心者向けにまとめました。
関連ツール
すべての処理はブラウザ内で実行されます。ファイルがアップロードされることはありません。
検証: 既知の比率・判定表・入れ替え・エラー表示を自動テストで確認
今日の豆知識
白と黒のコントラスト比は21:1、つまり理論上の最大値です。読みやすさの基準としてよく使われる4.5:1は、この21分の1以下の差でも成立します。