カラー & デザイン

カラーコントラストチェッカー

任意のテキストと背景色の組み合わせをWCAG 2.2 AAおよびAAAのコントラスト要件に対してテストし、即座に合格/不合格のフィードバックとライブプレビューを提供します。

Text color

Hex

#1A73E8

RGB

26, 115, 232

HSL

214°, 82%, 51%

Background color

Hex

#FFFFFF

RGB

255, 255, 255

HSL

0°, 0%, 100%

Contrast ratio

4.51: 1

WCAG compliance

Higher ratios are more readable. 21:1 is pure black on white.

AA · Normal text (4.5:1)Pass
AA · Large text (3:1)Pass
AAA · Normal text (7:1)Fail
AAA · Large text (4.5:1)Pass
UI components & graphics (3:1)Pass

Live preview

See your color pair on both body and heading sizes.

The quick brown fox jumps over the lazy dog.

Normal body text at 16 pixels. WCAG 2.2 measures contrast between the foreground text and its immediate background — this preview shows the combination you entered above exactly as a user would see it.

コントラストチェッカーとは何ですか？

コントラストチェッカーは、2つの色の輝度差を測定し、それを1:1（同一）から21:1（純粋な黒と純粋な白）の比率として報告します。アクセシビリティガイドラインは、その比率を使用して、視覚障害、色盲、または明るい日光の下で見られる画面のユーザーにとってテキストが読みやすいかどうかを判断します。このツールはWCAG 2.2に準拠しており、米国のADA、欧州アクセシビリティ法、およびほとんどの企業デザインシステムで参照されている同じ基準です。任意の2色を入力すると、5つのWCAG閾値に対する即座の合格/不合格が得られ、ボディと見出しサイズの両方でライブプレビューが表示されます。すべてがブラウザ内で実行されます — アップロード不要、追跡不要、アカウント不要。

カラーコントラストを確認する方法

1
テキストカラーを入力
16進数コードを貼り付けるか、前景（テキスト）カラーのためにカラーピッカーを使用します。このツールは、#03Aのような3桁の省略形も受け付けます。
2
背景色を入力
背景についても同様に行います。テキストカラーしかわからない場合は、デフォルトテストのために背景を白（#FFFFFF）にしておきます。
3
比率を読む
大きな比率の数字は、入力するにつれて更新されます。3.0未満の比率は、通常のテキストに対する最も緩いWCAG閾値でも不合格となります。
4
WCAGバッジを確認
5つのバッジは、AA通常、AA大、AAA通常、AAA大、およびUIコンポーネントの閾値に対する合格/不合格を示します。AAは通常の法的最低限であり、AAAは主要なコンテンツのための強化された目標です。
5
プレビューとコピー
プレビューが見出しとボディサイズで正しく表示されることを確認し、次にCopy CSSを使用してスタイルシート用の`color:`と`background-color:`の宣言を取得します。

WCAGコントラスト公式

各チャネル（R、G、Bを0–1にスケーリング）について：
  c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4
 
相対輝度：
  L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear
 
コントラスト比：
  ratio = (L_light + 0.05) / (L_dark + 0.05)
  ここで、L_light = max(L1, L2) および L_dark = min(L1, L2)

この式はWCAG 2.xから来ており、輝度を計算する前に各sRGBチャネルにガンマ補正曲線を適用します。重み（0.2126、0.7152、0.0722）は赤、緑、青の光に対する人間のコーン感度を反映しています。どちらの項にも0.05を加えることで、1つの色が完全な黒の場合にゼロ除算を防ぎます。比率は1:1（同一の色）から21:1（純粋な黒と純粋な白）までの範囲です。

参照: WCAG 2.2 — コントラスト（最小）1.4.3

例

ペア	比率 & 判定
#000000 on #FFFFFF	21:1 — すべての閾値を通過標準的な最大コントラスト。長文リーディングUIに使用されます。
#1A73E8 on #FFFFFF	4.63:1 — AA通常を通過、AAA通常に失敗白に対するGoogleの青。本文には合法ですが、AAAには達していません。
#808080 on #FFFFFF	3.95:1 — AA通常に失敗、AA大に合格白に対する中間グレー — 見出しには適していますが、段落には明るすぎます。

一般的な使用例

WCAG AAに対してマーケティングページまたはランディングページを監査する
コンポーネントに展開する前に新しいデザインシステムのパレットを検証する
ダークモードのバリアントをテストして、暗い表面でテキストが読みやすいことを確認する
ブランドカラーが白または写真オーバーレイに対して十分なコントラストを持っているか確認する
失敗したLighthouseまたはaxe-coreのアクセシビリティ監査をデバッグする
PRレビューの前に提案されたテキストカラーを標準の背景と比較する
色付きの塗りつぶしの上でコントラストを通過するボタンラベルの色を選ぶ

よくある質問

私のカラーデータはサーバーに送信されますか？

いいえ。すべてのコントラスト計算はブラウザ内で行われます。入力した内容はアップロード、ログ記録、または保存されません。

AAとAAAの違いは何ですか？

AAはほとんどのアクセシビリティ法（米国のADA、EUのEAA）で要求される基本的なWCAG準拠レベルです。AAAは政府や重要なコンテンツサイトに推奨される強化されたターゲットです。AA通常テキストは4.5:1、AAA通常は7:1を必要とします。

WCAGにおける「大きなテキスト」とは何ですか？

WCAGは「大きなテキスト」を通常の18pt（通常は24 CSSピクセル）、または太字の14pt（19 CSSピクセル）以上と定義しています。それより小さいものは「通常のテキスト」とされ、AAのためのより厳しい4.5:1の閾値が適用されます。

比率式に0.05が含まれるのはなぜですか？

これは、画面表面から反射される環境光をモデル化するフレア定数です。これがないと、純粋な黒に対する任意の色は無限の比率を生じ、数学と現実の両方を破壊します — 実際のディスプレイは常にいくらかの基準光を放出します。

このツールはフォントレンダリングやアンチエイリアスを考慮していますか？

いいえ — これは名目上の色値に基づいて動作する公式のWCAG式に従います。実際にはアンチエイリアスが知覚コントラストをわずかに変えることがありますが、WCAG比率は支援技術の監査人や法的レビュー担当者が使用するものです。

コントラストのためにWCAGの代わりにAPCAを使用すべきですか？

APCA（WCAG 3.0のために提案されたアルゴリズム）は、特に暗い背景に対する明るいテキストに対してより知覚的に正確ですが、WCAG 2.2は現在の法的基準であり、ほとんどの監査が報告する指標です。準拠のためにはWCAG 2.2を使用し、デザインシステムの研究にはAPCAを試してみてください。

アイコンやUIコンポーネントはどのくらいのコントラスト比を達成すべきですか？

WCAG 1.4.11は、UIコンポーネントの視覚的境界とその隣接色との間、またはコンテンツを理解するために必要なグラフィックの部分間で3:1の比率を要求します。このツールの5番目のバッジは、その閾値を特に報告します。

私の色が「見た目は良い」のに失敗したのはなぜですか？

WCAGは最も見えにくいケースにキャリブレーションされています — 低視力のユーザー、明るい環境光、安価なディスプレイ。薄暗いオフィスで見た目が良いペアは、屋外で20/40の視力を持つユーザーには読めないかもしれません。目ではなく比率を信頼してください。

最終更新日 2026-04-21

コントラストチェッカーとは何ですか？

カラーコントラストを確認する方法

テキストカラーを入力

16進数コードを貼り付けるか、前景（テキスト）カラーのためにカラーピッカーを使用します。このツールは、#03Aのような3桁の省略形も受け付けます。

背景色を入力

背景についても同様に行います。テキストカラーしかわからない場合は、デフォルトテストのために背景を白（#FFFFFF）にしておきます。

比率を読む

大きな比率の数字は、入力するにつれて更新されます。3.0未満の比率は、通常のテキストに対する最も緩いWCAG閾値でも不合格となります。

WCAGバッジを確認

5つのバッジは、AA通常、AA大、AAA通常、AAA大、およびUIコンポーネントの閾値に対する合格/不合格を示します。AAは通常の法的最低限であり、AAAは主要なコンテンツのための強化された目標です。

プレビューとコピー

プレビューが見出しとボディサイズで正しく表示されることを確認し、次にCopy CSSを使用してスタイルシート用の`color:`と`background-color:`の宣言を取得します。

WCAGコントラスト公式

各チャネル（R、G、Bを0–1にスケーリング）について：
  c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4
 
相対輝度：
  L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear
 
コントラスト比：
  ratio = (L_light + 0.05) / (L_dark + 0.05)
  ここで、L_light = max(L1, L2) および L_dark = min(L1, L2)

例

ペア	比率 & 判定
#000000 on #FFFFFF	21:1 — すべての閾値を通過標準的な最大コントラスト。長文リーディングUIに使用されます。
#1A73E8 on #FFFFFF	4.63:1 — AA通常を通過、AAA通常に失敗白に対するGoogleの青。本文には合法ですが、AAAには達していません。
#808080 on #FFFFFF	3.95:1 — AA通常に失敗、AA大に合格白に対する中間グレー — 見出しには適していますが、段落には明るすぎます。

一般的な使用例

WCAG AAに対してマーケティングページまたはランディングページを監査する

コンポーネントに展開する前に新しいデザインシステムのパレットを検証する

ダークモードのバリアントをテストして、暗い表面でテキストが読みやすいことを確認する

ブランドカラーが白または写真オーバーレイに対して十分なコントラストを持っているか確認する

失敗したLighthouseまたはaxe-coreのアクセシビリティ監査をデバッグする

PRレビューの前に提案されたテキストカラーを標準の背景と比較する

色付きの塗りつぶしの上でコントラストを通過するボタンラベルの色を選ぶ

よくある質問

私のカラーデータはサーバーに送信されますか？

いいえ。すべてのコントラスト計算はブラウザ内で行われます。入力した内容はアップロード、ログ記録、または保存されません。

AAとAAAの違いは何ですか？

WCAGにおける「大きなテキスト」とは何ですか？

比率式に0.05が含まれるのはなぜですか？

このツールはフォントレンダリングやアンチエイリアスを考慮していますか？

コントラストのためにWCAGの代わりにAPCAを使用すべきですか？

アイコンやUIコンポーネントはどのくらいのコントラスト比を達成すべきですか？

私の色が「見た目は良い」のに失敗したのはなぜですか？

カラーコントラストチェッカー

WCAG compliance

Live preview

The quick brown fox jumps over the lazy dog.

コントラストチェッカーとは何ですか？

カラーコントラストを確認する方法

WCAGコントラスト公式

例

一般的な使用例

関連ツール

よくある質問

カラーコントラストチェッカー

WCAG compliance

Live preview

The quick brown fox jumps over the lazy dog.

コントラストチェッカーとは何ですか？

カラーコントラストを確認する方法

WCAGコントラスト公式

例

一般的な使用例

関連ツール

よくある質問