Contrast Checker：WCAGカラーコントラスト比ツール

Contrast Checker とは？

Contrast Checker は、前景色と背景色の輝度ベースのコントラスト比を計算し、その組み合わせが WCAG 2.1 アクセシビリティ基準を満たすかどうかを判定します。4つすべての適合閾値に対してテストします: 通常テキストの AA と AAA、大テキストの AA と AAA。ライブテキストプレビューにより、読者が実際に体験することを正確に確認できます。アクセシビリティ監査者、UI デザイナー、フロントエンド開発者が本番環境でのコントラスト失敗を避けるために、新しい色の組み合わせを公開する前に使用します。すべてブラウザ内で動作します — サーバー呼び出しなし、ログインなし。

主な機能

• WCAG 2.1 コントラスト比計算 — 公式 WCAG ツールと一致する結果を得るために、標準相対輝度公式（0.03928 の線形化閾値と (L1 + 0.05) / (L2 + 0.05) の比率公式）を使用します。
• AA・AAA 適合確認 — 4つの適合バッジがリアルタイムで更新されます: 通常 AA（≥ 4.5:1）、通常 AAA（≥ 7:1）、大 AA（≥ 3:1）、大 AAA（≥ 4.5:1）。チェックマーク付きの緑バッジは合格、X 付きの赤バッジは不合格を意味します。
• 通常テキストと大テキストの閾値 — WCAG 2.1 成功基準 1.4.3 に従い、通常テキストと大テキスト（18pt または 14pt 太字として定義）に対して別々の閾値を適用します。
• サンプルテキスト付きリアルタイムプレビュー — プレビューカードは選択した色を使って見出し、本文段落、小テキスト、ボタンをレンダリングし、一目で読みやすさを評価できます。
• コントラスト比をクリップボードにコピー — 比率表示の横にあるコピーアイコンをクリックすると、比率文字列（例: 4.53:1）をクリップボードに書き込み、チェックを履歴に記録します。
• ロード後オフラインで動作 — すべての比率計算は外部 API 呼び出しなしで JavaScript に実装されています。

Contrast Checker の使い方

ステップ 1: 前景色を設定する

Contrast Checker に移動します。ツールは前景色として黒（#000000）、背景色として白（#FFFFFF）で開きます — 4つすべての WCAG レベルに合格する 21:1 の比率です。

前景色（テキスト色）を設定するには:

• カラースウォッチ（色付き正方形）をクリックしてネイティブブラウザのカラーピッカーを開く
• スウォッチの横のテキスト入力に 16 進数コードを直接入力する（例: #1E293B）

スウォッチとテキスト入力は同期したままです。入力の下にあるプレビュースウォッチは、自動コントラストラベルテキスト付きで色を表示します。

ステップ 2: 背景色を設定する

カラー入力カードの右側にある同じコントロールを使って背景色を設定します。ツールは 3 列レイアウトを使用します: 左に前景色、中央にスワップボタン、右に背景色。

ステップ 3: コントラスト比と適合バッジを確認する

コントラスト比カードが入力の下に表示され、以下を示します:

• 大きなピクセルアート体で計算された比率（例: 7.23:1）
• 比率文字列をコピーするためのコピーアイコン
• 4つの適合バッジ: 通常 AA（≥ 4.5:1）、通常 AAA（≥ 7:1）、大 AA（≥ 3:1）、大 AAA（≥ 4.5:1）

チェックマークアイコン付きの緑バッジは、その組み合わせがそのレベルに合格することを示します。X 付きの赤バッジは不合格を示します。すべての本文テキストで少なくとも通常 AA を目指してください。

ステップ 4: ライブプレビューを確認する

プレビューカードまでスクロールします。選択した色を使って 4 つの要素をレンダリングします:

• 大きな見出し（text-2xl）
• 本文テキスト（text-base）
• 小テキスト（text-sm）
• 色が入れ替わったボタン（前景色が背景色になり、その逆も同様）

このプレビューにより、コードを書く前に色が読みやすいかどうかを確認できます。

ステップ 5: 色を入れ替えるかアクセシブルなカラーペアの提案を試す

2 つのカラー入力の間にあるスワップボタン（二重矢印アイコン）をクリックすると、前景色と背景色を即座に入れ替えられます。明色地に暗色と暗色地に明色の両バリアントをテストするのに便利です。

ページ下部のアクセシブルカラーペアパネルまでスクロールします。コントラスト比と共に 20 の色の組み合わせを表示します。いずれかのペアをクリックすると、その 2 色がツールに読み込まれます。ほとんどのペアはチェックマークで示される AA（4.5:1）に合格します。一部のペアは大 AA（3:1）のみ合格し、X マークが付いています — これらは見出しや大きな UI 要素には使えますが、通常の本文テキストには使えません。

実践例

ボタンラベルを背景色に対して確認する

デザインで #3B82F6 の青いボタンに #FFFFFF の白いテキストを使用しています。#FFFFFF を前景色、#3B82F6 を背景色として入力します。ツールはおよそ 3.7:1 を計算します。通常 AA バッジは不合格（4.5:1 が必要）ですが、大 AA は合格します。青色を暗くする必要があります — #1D4ED8 を試すと約 6.7:1 が得られ、通常 AA に合格します。

ダークモードのテキスト色を検証する

ダークモードデザインでは #0F172A（slate-900）の背景に #94A3B8（slate-400）のテキストを使用しています。これらの値を入力します。比率は約 6.96:1 で、通常 AA、大 AA、大 AAA に合格します。通常 AAA（7:1 が必要）をわずかに下回ります。この組み合わせを AA レベルで本文コピーに自信を持って使用できます。

ブランドカラーをテキストカラーとしてテスト

ブランドオレンジは #F97316 です。これを白の #FFFFFF 背景のリンク色として使用したいと考えています。比率はおよそ 2.8:1 — 通常 AA は不合格です。プレビューにより一部のユーザーには読めそうに見えますが、アクセシビリティ監査は不合格になることが確認されます。AA に合格するには #C2410C（≈ 5.2:1）のような暗い色合いに切り替えます。

ヒントとベストプラクティス

前景色地に背景色と背景色地に前景色の両方をテストします。 スワップボタンでワンクリックで役割を逆にできます。一部の UI パターン（ボタン、ハイライトされた選択）は前景色を小面積の背景として使用します。

アクセシブルカラーペアパネルでは比率を小数点 1 桁で表示します。 これらの実際に計算された比率が各プリセットスウォッチカードに表示されます。いずれかのスウォッチをクリックして両方の色を読み込みます — 素早く機能するパレットが必要なときの出発点として使用してください。

大テキストの閾値は 18pt（24px）または 14pt 太字（約 18.67px 太字）に適用されます。 ツールは見出しがより緩い閾値を持つことを思い出させるために大 AA と大 AAA の結果を表示します。通常 AA に不合格の組み合わせでも、大見出しのみでの使用には有効な場合があります。

URL で結果を共有します。 現在の前景色と背景色はページ URL にエンコードされています。色を入力した後にアドレスバーの URL をコピーして、特定のコントラストチェックを同僚に送ったりデザインレビュードキュメントに含めたりします。

よく使うカラーペアをプリセットとして保存します。 サポーターアカウントでは、前景色と背景色の両方の 16 進数値を名前付きプリセットとして保存できます。同じブランドカラーの組み合わせを繰り返しチェックするチームに便利です。

よくある問題とトラブルシューティング

入力に関わらず比率が 1:1 と表示される。 これは通常、両方のカラーフィールドに同じ値が入力されていることを意味します。前景色と背景色に異なる色を入力したことを確認します。同じ 16 進数を両方のフィールドに貼り付けた場合は、どちらかを変更する必要があります。

適合バッジが不合格と言っているが、色は問題ないと思っていた。 WCAG の公式は、見た目よりも厳格です。#555555 の背景に #333333 のテキストのような黒地に濃いグレーの組み合わせでは約 1.7:1 しか得られず、AA を大きく下回ります。視覚的な判断に頼らず、ツールの結果を使用してください。

履歴の復元で色が再読み込みされない。 履歴復元機能は FG: #XXXXXX / BG: #XXXXXX 形式のエントリを解析します。このツール以外で記録されたエントリ（または破損したデータ）は正しく解析されない場合があります。その場合は手動で色を再入力してください。

コントラスト比コピーボタンに反応がない。 Clipboard API には HTTPS または localhost が必要です。プレーン HTTP では、クリップボードへの書き込みが失敗します。ツールはその場合エラートーストを表示します。比率表示テキストを右クリックして、ブラウザのネイティブコピーオプションをフォールバックとして使用してください。

プレビューカードに予期しないテキスト色が表示される。 プレビューは、背景色の上に前景色で見出しと本文テキストをレンダリングします。プレビューのボタンは 2 つの色を意図的に入れ替えて逆の組み合わせを示します。

プライバシーとセキュリティ

Contrast Checker はすべての計算をブラウザ内でローカルに実行します。相対輝度公式とコントラスト比計算は、デバイス上の JavaScript で実行されます。色の値はいかなるサーバーにも送信されません。ツールはアカウントを必要とせず、トラッキングクッキーを設定せず、テストした色の組み合わせを記録しません。ページが読み込まれると完全にオフラインで動作するため、機密のデザインシステムや未公開のブランドガイドラインで色を評価するのに安全です。

よくある質問

Contrast Checker は無料ですか？

はい。WCAG コントラスト確認機能の全体 — 4つの適合バッジ、リアルタイムプレビュー、スワップボタン、アクセシブルカラーパレットパネルを含む — はアカウント不要で完全無料です。プリセット、履歴トラッキング、ツールメモなどのサポーター機能は Ko-fi サポーターサブスクリプションで利用できます。

Contrast Checker はオフラインで動作しますか？

はい。ページが読み込まれると、すべてのコントラスト計算、プレビューレンダリング、適合バッジの更新がネットワークアクセスなしで動作します。相対輝度公式と WCAG 閾値比較は、ブラウザで実行される純粋な JavaScript です。

Contrast Checker でデータは安全ですか？

はい。色のデータはいかなるサーバーにも送信されません。ツールはコントラストチェック中にネットワークリクエストを行いません。前景色と背景色はブラウザのメモリにのみ存在し、共有機能を使用する場合はコピーを選択した URL にエンコードされます。

このツールはどの WCAG バージョンに従っていますか？

ツールは WCAG 2.1 成功基準 1.4.3（コントラスト — 最小）と 1.4.6（コントラスト — 向上）を実装しています。AA レベルでは通常テキストで少なくとも 4.5:1、大テキストで 3:1 の比率が必要です。AAA レベルでは通常テキストで 7:1、大テキストで 4.5:1 が必要です。これらの閾値は適合バッジに表示される値と一致します（通常 AA ≥ 4.5:1、通常 AAA ≥ 7:1、大 AA ≥ 3:1、大 AAA ≥ 4.5:1）。

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

WCAG は大テキストを、通常のウェイトで少なくとも 18 ポイント（約 24px）、または太字ウェイトで少なくとも 14 ポイント（約 18.67px）のテキストと定義しています。ツールは 3 番目と 4 番目の適合バッジを「大 AA」と「大 AAA」とラベル付けしています。プレビューは text-2xl で見出しをレンダリングしており、通常は大テキストの範囲に入ります。

コントラスト比はどのように計算されますか？

ツールは WCAG 公式を使って各 16 進数カラーを相対輝度に変換します: 各 RGB チャンネルを線形化（255 で割り、sRGB ガンマ補正を適用: s <= 0.03928 の場合は s / 12.92、そうでない場合は ((s + 0.055) / 1.055) ^ 2.4）します。輝度は 0.2126 R + 0.7152 G + 0.0722 * B です。コントラスト比は (L_明るい方 + 0.05) / (L_暗い方 + 0.05) です。

16 進数コード以外の色をテストできますか？

カラー入力はテキストとして入力された 16 進数コード（# あり・なし両方）を受け付けます。ネイティブカラーピッカースウォッチを使用することもできます。RGB または HSL の値がある場合は、Color Picker を使って先に 16 進数に変換してからここに貼り付けてください。

最も高いコントラスト比はいくつですか？

最大コントラスト比は 21:1 で、純粋な黒（#000000）と純粋な白（#FFFFFF）の比率です。ツールはデフォルトでこの 2 色で開き、達成可能な最大比率を示します。

テキスト以外の UI 要素にも使用できますか？

WCAG 2.1 は成功基準 1.4.11 で非テキストコントラストもカバーしており、UI コンポーネントとグラフィカルオブジェクトに 3:1 の比率を要求します。ツールの大 AA バッジ（≥ 3:1）はこの閾値に対応しており、プレビューがテキストをレンダリングしていても、アイコンカラー、フォーカスインジケーター、フォームコントロールのボーダーを評価するために使用できます。

チームとコントラストチェックを共有するにはどうすればいいですか？

前景色と背景色を入力すると、ページ URL に両方の値がエンコードされます。アドレスバーの URL をコピーして直接共有します。リンクを開いた受信者は、「共有から読み込み済み」通知と共に同じ色がプリロードされた状態を見ます。ページ下部のシェアボタンを使って Twitter、LinkedIn、Reddit にも投稿できます。

関連ツール

• Color Picker — ここでテストする前に、画面や既存のデザインから正確な 16 進数値をサンプリングします。
• Color Converter — コントラストチェッカーに入力する前に、RGB、HSL、CMYK から 16 進数に色を変換します。
• 近日公開: Palette Generator — 完全なパレットを生成し、Contrast Checker で各組み合わせをチェックしてアクセシビリティ適合性を確認します。

今すぐ Contrast Checker を試す: Glyph Widgets Contrast Checker