カラーコントラストチェッカー
新着テキストと背景色のWCAG AA/AAAコントラスト比をチェック。
Large heading — 24px bold
Large text, 18.66px and up reads at 3:1.
Normal body text. The quick brown fox jumps over the lazy dog and reads comfortably at 4.5:1 or better.
Small print and captions — the hardest text to read.
Keeps your hue & saturation — only the lightness changes — so brand colors stay recognizable.
Pairwise palette grid
Paste several colors (hex, one per line or separated by spaces / commas) to see which foreground/background pairs pass AA (4.5:1). First 8 colors are used.
Runs entirely in your browser. Nothing is uploaded.
ブラウザでWCAGカラーコントラストを確認する
このカラーコントラストチェッカーは、テキストと背景色のWCAGコントラスト比を測定し、そのペアが通常テキスト・大きいテキスト・UIコンポーネントにおけるAAとAAAに適合するかを即時に表示します。16進数値の入力、RGBまたはHSLフィールドの編集、明度スライダーのドラッグ、またはスポイトツールで画面上の任意の色を取得できます。比率・合否マトリクス・ライブプレビューは入力と同時に更新されます。
WebAIMやAdobe Colorが採用するWCAGの計算式と同じ仕組みで動作しながら、ライブ読みやすさプレビュー・APCA（WCAG 3）スコア・不合格ペアをワンクリックで修正する機能を追加しています。すべてローカルのJavaScriptで実行されるため、色はデバイス外に送信されず、アカウントも不要です。
WCAG AAおよびAAAの基準値について
WCAGコントラスト比は1:1（同一色）から21:1（白地に黒）の範囲です。AAレベル——ADAやSection 508など多くの法律が求める基準——では通常テキストで4.5:1、大きいテキストで3:1が必要です。AAAレベルではそれぞれ7:1と4.5:1に引き上げられます。大きいテキストとは18pt（24px）以上、または14pt（約18.66px）以上の太字を指します。
合否マトリクスでは各基準値を個別に確認できます。たとえば白地の#767676は4.54:1でAA本文テキストを通過しますが、AAA に必要な7:1には届きません。法的準拠（ADA・EN 301 549・Section 508）が求められる場合はAAが最低基準です。低視力ユーザーが多い閲覧重視のインターフェイスではAAAを目指す価値があります。
アクセシブルなカラーペアのプレビュー・修正・実装
数値だけでは全体像は掴めません。ライブプレビューは実際の見出し・本文・小さなテキスト・サンプルボタンとチップを指定した色でレンダリングするので、比率を読むだけでなく実際の読みやすさを確認できます。ペアが基準を満たさない場合、「合格させる」提案機能が色相と彩度を維持したまま、選択したレベル（AA・AA大テキスト・AAA）を通過する最も近い色に明度を調整し、ワンクリックで適用します。テキストまたは背景のどちらを調整するかを選択できます。
ペアワイズグリッドはパレット全体を受け取り、どの色の組み合わせが基準を通過するかを一覧表示します。前景色と背景色のすべての組み合わせが安全である必要があるデザインシステム構築時に特に便利です。数十のペアを一つずつテストする代わりに、パレットを一度貼り付けるだけで完全なマトリクスがすぐに表示されます。
APCA：WCAG 3コントラストの先行プレビュー
従来の比率に加えて、このチェッカーはAPCA Lcスコアも表示します。これはWCAG 3向けに提案されている知覚的コントラスト指標です。APCAは目が実際に暗地の明テキストと明地の暗テキストをどのように読むかをモデル化し、フォントウェイトも考慮するため、WCAG 2の比率では見逃しがちな読みやすさの問題を検出します。目安：本文テキストLc 75以上、大きいテキストLc 60以上、大きい見出しLc 45以上。
WCAG 3はまだ草案段階でWCAG 2.2に取って代わっていないため、現時点での準拠は4.5:1と3:1を満たすことを意味します。APCAを現在の比率と並べて表示することで、仕様の確定を待たずにパレットを将来に備えることができます。
アイコンとUIコンポーネントの非テキストコントラスト
コントラストはテキストだけの話ではありません。WCAG 2.1 SC 1.4.11は、インタラクティブコンポーネントの境界——入力欄の枠線・フォーカスインジケーター・トグルの状態——および意味のあるアイコンやグラフィックに対して3:1のコントラストを要求します。マトリクスには3:1で専用のUIおよびグラフィックチェック行があり、ボタンのアウトラインやアイコンが視認できるかを個別に確認できます。
多くのチームが気づかないまま監査で不合格になる領域です。薄いグレーの入力欄枠線（白地の#D1D1D1は1.4:1）はページ上のすべてのテキストが通過していてもWCAG 2.1違反になる典型例です。ここでUIコンポーネントを確認するのに数秒しかかかりませんが、正式な監査での想定外のリスクを防げます。
WebAIM・Adobe Color・Chrome DevToolsとの比較
WebAIMのコントラストチェッカー（webaim.org）は最も広く参照される無料アクセシビリティツールで、このツールと同じWCAG 2の計算式を使用しています。ただし、APCAの表示なし・ライブテキストプレビューなし・不合格ペアの自動修正なし・複数色の組み合わせを同時確認できるペアワイズグリッドなしとなっています。
Adobe ColorのアクセシビリティツールsectionはAA/AAAの合否と色覚シミュレーターを提供していますが、作業の保存には無料のAdobeアカウントが必要で、合格色の自動提案機能はありません。
Chrome DevToolsの要素パネルカラーピッカーにはコントラスト比バッジがあり、ブラウザ内での確認に便利ですが、DevTools内でのみ使用可能で特定の色ペアへのリンク共有はできません。
このチェッカーはログイン不要で動作し、WCAG 2の比率とAPCA Lcスコアの両方を表示し、選択した色でライブプレビューをレンダリングし、1つのビューでカラーパレット全体をグリッドでテストできます。すべての計算はローカルのJavaScriptで実行されます。
Frequently asked questions
カラーコントラストチェッカーとは何ですか？
カラーコントラストチェッカーは、テキスト（前景）色と背景色のWCAGコントラスト比を測定し、そのペアがアクセシビリティガイドラインに基づいて読みやすいかどうかを判定するツールです。2色を入力すると、1:1（同一）から21:1（白地に黒）の比率と、通常テキスト・大きいテキスト・UIコンポーネントのAAおよびAAA合否結果が返されます。このツールはブラウザ上で完全に動作し、色はサーバーに送信されず、アカウントも不要です。
WCAGで定められた最低コントラスト比はどのくらいですか？
WCAGはテキストと背景の最低コントラスト比を定めています。AAレベルでは通常テキスト4.5:1・大きいテキスト3:1、AAAレベルでは7:1・4.5:1です。純黒（#000000）の白地（#FFFFFF）最大値は21:1です。この基準値はWCAG 2.0・2.1・2.2を通じて変わっていません。
WCAG AAとAAAの違いは何ですか？
AAは広く義務付けられているベースラインで、通常テキスト4.5:1・大きいテキスト3:1です。AAAは強化レベルで、通常テキスト7:1・大きいテキスト4.5:1です。ほとんどのアクセシビリティ法（ADA・Section 508・欧州EN 301 549）はAAを対象としています。AAAはデザインが許す範囲、特に低視力ユーザーが多いインターフェイスで追求する価値があります。
アイコンやUIコンポーネントにもコントラスト基準が適用されますか？
はい。WCAG 2.1 SC 1.4.11（非テキストコントラスト）では、インタラクティブコンポーネントの視覚的境界——入力欄の枠・フォーカスリング・トグル状態——および意味のあるアイコンやグラフィックに対して隣接色との間に最低3:1のコントラストが必要です。このツールの結果グリッドには3:1のUI・グラフィック専用行があるため、別途計算せずにボタンアウトラインやアイコンの適合を確認できます。
コントラスト比が基準を満たさない場合、どう修正すればよいですか？
最も手早い修正は、ブランドの色相を保ちながら明度だけを変えてテキスト色を暗く、または背景を明るくして基準値をクリアすることです。組み込みの「合格させる」提案機能が自動的に行います——テキストまたは背景を最も近い合格色に調整し、ワンクリックで適用するため、16進数値を手動で調整する必要はありません。
APCAとは何で、なぜ重要ですか？
APCA（Accessible Perceptual Contrast Algorithm）は次期WCAG 3向けに提案されているコントラスト手法です。単一の比率ではなく、約-108から106の知覚明度コントラスト（Lc）値を返します。絶対値が大きいほどコントラストが高くなります。目安：本文テキストでLc 90が推奨・Lc 75が最低、大きいテキストでLc 60、大きい見出しでLc 45。APCAはWCAG 2の比率よりも暗地・明地のテキスト極性とフォントウェイトを適切に反映します。
WCAG 2.1と2.2のどちらが現在の基準ですか？
コントラストのしきい値はWCAG 2.0・2.1・2.2で同一です。WCAG 2.2は現在のW3C勧告であり、ほとんどの新しい規制が参照するバージョンなので、2.2 AAレベルを目標にすることをお勧めします。既存の2.0または2.1 AA準拠のコントラスト作業はコアのコントラスト要件が変わっていないため引き続き有効です。
Related tools
すべてのツールを見る
新着 CSS box-shadowジェネレーター
多層のCSS box-shadowをプリセットとライブプレビューで作成。CSS・値・Reactスタイルを即コピー。
新着 カラーパレットジェネレーター
補色・類似色・トライアド・モノクロームのパレットを生成。
新着 三次ベジェ曲線ジェネレーター
制御点をドラッグしてCSSのイージング曲線を設計。ライブプレビュー付き。
新着 角丸ジェネレーター
CSSの角丸や有機的なブロブ形状を視覚的に作成。
新着 CSS Flexboxプレイグラウンド
flexプロパティをライブプレビューで調整し、CSSをコピー。
新着 CSS Gridプレイグラウンド
gridの列・間隔・配置をライブプレビューで調整し、CSSを取得。