カラーコントラストチェッカー — WCAG AA/AAA のコントラスト比と APCA
文字色と背景色を WCAG 2.x の AA・AAA の基準でチェックし、APCA の Lc 値を確認して、基準を満たす最も近い色を見つけられます。
大きなテキスト、24px（18pt）標準
大きな太字テキスト、18.67px（14pt）太字
16px の通常の本文テキストです。いろはにほへと ちりぬるを。The quick brown fox jumps over the lazy dog. 長い段落には見出しより高いコントラストが必要です。小さなサイズの細い線は、互いににじんで見えるためです。
13px の小さな文字。キャプションやフッターのサイズです。
基準を満たす最も近い色
（OKLCH の）明度だけを変えるので、色相はそのままです。適用するか、コピーして使ってください。
#7676764.54:1#0606064.52:1#5959597.00:1計算はブラウザ内で行われます。入力した内容が送信・保存されることはありません。 すべての無料ツールを見る.
不具合や改善できそうな点を見つけましたか？いただいたメッセージはすべて読み、すぐに対応します。
この無料のカラーコントラストチェッカーは、ADA、欧州アクセシビリティ法、そして多くのアクセシビリティ監査の基準となっている WCAG 2.x にもとづき、背景の上のテキストが読みやすいかどうかを判定します。文字色と背景色をピッカー、HEX コード、画面のスポイトで入力すると、コントラスト比と、通常・大きなテキストサイズ、ボタンの枠線やアイコンなどの UI コンポーネントについての AA・AAA の合否が表示されます。
組み合わせが不合格の場合は、ブランドの色相が変わらないよう OKLCH で明度だけを調整して、基準を満たす最も近い文字色または背景色を提案します。また、WCAG 3 のワーキングドラフトにある新しい方式である APCA の Lc 値も表示します。これはコントラストが実際にどう知覚されるかをモデル化したもので、ダークモードや細いフォントの判定に優れています。WCAG 3 はまだ標準ではないため、準拠の判断に使うのは WCAG 2.x のコントラスト比であり、このページでは両者の判定が食い違う場面も説明しています。
使い方
- 文字色と背景色を入力します。ピッカーを使うか、HEX コード（#777 または #777777）を入力するか、目のアイコンをクリックして画面上の任意のピクセルの色を取得します（Chrome と Edge）。
- コントラスト比と 5 つの判定を確認します。本文には AA の通常テキスト（4.5:1）、24px または太字 18.66px の見出しには AA の大きなテキスト（3:1）が必要です。
- プレビューで、本文、大きな文字、キャプションのサイズで実際にどう見えるかを確認します。
- 不合格の項目があれば、「基準を満たす最も近い色」から提案された色を適用します。変わるのは明度だけです。
- 「入れ替え」で逆の組み合わせ（ダークモード版など）もテストし、結果や CSS をコピーします。
よくある質問
WCAG で必要なコントラスト比は？
WCAG 2.1 と 2.2 のレベル AA では、通常のテキストで 4.5:1 以上、大きなテキストで 3:1 以上（達成基準 1.4.3）、入力欄の枠線、フォーカスリング、アイコンなどのユーザーインターフェースコンポーネントや意味のあるグラフィックで 3:1 以上（1.4.11）が必要です。レベル AAA では、テキストの基準が通常 7:1、大きなテキスト 4.5:1 に上がります（1.4.6）。ロゴ、純粋な装飾、無効化された要素は対象外です。
WCAG でいう「大きなテキスト」とは？
18 ポイント以上の標準の太さ、または 14 ポイント以上の太字です。1 ポイントは 1.333 ピクセルなので、CSS のピクセルでは標準 24px、太字で約 18.66px になります。16px の太字の見出しや、20px の標準の太さのテキストは大きなテキストではありません。細いフォントや装飾的なフォントは、このサイズでも実際には読みにくいことがあり、これは APCA が解決しようとしている問題の 1 つです。
白地に #777777 はアクセシブルですか？
本文には使えません。#ffffff の上の #777777 はコントラスト比 4.48:1 で、AA の基準 4.5:1 をわずかに下回るため、通常のテキストでは AA 不合格となり、合格するのは大きなテキストと UI コンポーネントだけです。WCAG では切り上げが認められていないので、4.48 は不合格です。白地で AA を満たす最も明るいグレーは #767676（4.54:1）、AAA なら #595959（7.00:1）です。
APCA とは何ですか？ WCAG 2 の代わりに使うべきですか？
APCA（Accessible Perceptual Contrast Algorithm）は、WCAG 3 向けに提案されているコントラストの判定方式です。比率ではなく、約 -108〜106 の明度コントラスト値 Lc を返し、符号は極性を表します（負の値は暗い背景に明るい文字）。同じ比率でも極性や色の暗さによって読みやすさが変わることを考慮しており、そのため WCAG 2 は暗い色どうしの組み合わせを過大評価し、色付きの背景に白い文字の一部を過小評価します。より良いデザイン判断のために使いつつ、準拠の報告には WCAG 2.x を使ってください。WCAG 3 はワーキングドラフトであり、コントラストの方式はまだ変わる可能性があります。
コントラスト比はどのように計算されますか？
各色の相対輝度は、sRGB の各チャンネルをリニアな光の量に変換し、目の感度に合わせて赤 0.2126、緑 0.7152、青 0.0722 で重み付けして求めます。コントラスト比は (L1 + 0.05) / (L2 + 0.05) で、L1 は明るいほうの色です。値は 1:1（同じ色）から 21:1（白地に黒）までの範囲になります。0.05 の項は、画面に反射する周囲の光をモデル化したものです。
コントラストが不合格の色を直すには？
色相ではなく明度を変えます。基準を満たすまで、文字を暗くするか背景を明るくします（ダークモードでは逆）。このページの提案は OKLCH 色空間でまさにそれを行うので、不合格のブランドの青は別の色ではなく、より暗い青になります。どちらの方向でも目標に届かない場合（相手の色が中間調のときに起こります）は、もう一方の色を変えてください。中間のグレーの背景では、どの文字色でも 7:1 に届きません。
WCAG 2.x のコントラスト要件の早見表
• 通常のテキスト、AA（1.4.3）：4.5:1。本文、ラベル、リンク、情報を伝えるプレースホルダーテキスト、画像内のテキストに適用。
• 大きなテキスト、AA（1.4.3）：3:1。標準 24px 以上、または太字 18.66px 以上のテキスト。
• UI コンポーネントとグラフィック、AA（1.4.11）：隣接する色に対して 3:1。入力欄の枠線、チェックボックスの輪郭、フォーカスインジケーター、意味を持つアイコン、グラフの線。
• 通常のテキスト、AAA（1.4.6）：7:1。大きなテキスト、AAA：4.5:1。すべての箇所で AAA を満たすサイトはほとんどありませんが、長文の読み物や高齢の読者向けには目指す価値があります。
• 対象外：ロゴやブランド名、無効化されたコントロール、純粋な装飾要素、付随的なテキスト（写真の一部など）。
ほぼすべての監査で見つかる間違いが 2 つあります。フォームの入力欄のプレースホルダーテキストはたいてい薄いグレーで 4.5:1 を満たさず、それが唯一のラベルであることも多いので、対象になります。また、白い文字を載せたブランドカラーのボタンはコントラスト比が 3〜4.5 になりがちで、大きなテキストとしてしか合格しないのに、ボタンのラベルは 14px や 16px です。
WCAG 2 と APCA の判定が食い違うところ
WCAG 2 の式は、コントラストを対称で、輝度に対して線形なものとして扱いますが、人の視覚はそうなっていません。その結果、実務では 2 つの問題がたびたび現れます。
ダークモード：黒に近い背景の上の薄いグレーの文字は、WCAG 2 では余裕で合格しても、ぎらついたり、ぼやけて見えたりすることがよくあります。一方で、合格するのに読みにくい中程度の暗さの組み合わせもあります。APCA は暗い背景に明るい文字を別扱いにし（負の Lc）、暗い側の判定がより厳しくなっています。
彩度の高い色：オレンジ（#ff7a00）の上の白い文字は WCAG 2 では約 2.6:1 で不合格、同じオレンジの上の黒い文字は合格しますが、白い文字も同じくらい読みやすいと感じる人は多くいます。APCA はこれらを知覚に近い形で評価します。
APCA のレベルの目安：本文には Lc 90 が望ましく、本文の最低ラインは Lc 75、その他のコンテンツのテキストは Lc 60、大きな見出しは Lc 45、プレースホルダーや無効化されたテキストは Lc 30、区切り線などのテキスト以外の要素は Lc 15 です。完全なガイドラインはフォントの太さとサイズにも左右されます。準拠チェックの代わりではなく、WCAG 2 と併用するデザインの補助として扱ってください。
関連する無料ツール
- カラーパレット生成 — スペースキーで新しいパレットを生成し、気に入った色をロックし、配色の調和を選び、写真からパレットを抽出できます。CSS、Tailwind、SCSS、JSON、PNG で書き出し。
- カラーピッカー＆変換 — 画面上のどこからでも色を取得したり、HEX、RGB、HSL を瞬時に相互変換したりできます。
- CSS グラデーション作成 — ドラッグできるカラーストップ、角度ダイヤル、プリセットで線形・放射・円錐グラデーションを作成。CSS や Tailwind のクラスをコピーできます。
- box-shadow ジェネレーター — 重ねた box-shadow や text-shadow の効果をライブプレビューでデザイン。エレベーション、ニューモーフィズム、グローのプリセット付きで、CSS をコピーできます。