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

WCAG 2.1 AA/AAAレベルの適合判定

前景色（テキスト色）と背景色を指定すると、WCAG 2.1に基づくコントラスト比をリアルタイムで計算し、AA・AAAレベルの適合状況を判定します。カラーピッカーまたはHEXコードで色を入力でき、プレビューで実際の見え方も確認できます。すべての処理はブラウザ内で完結します。

大きいテキスト (18pt+)

通常テキスト (16px) - Webアクセシビリティの基準となる標準的なサイズです。

コントラスト比 21:1
AA 通常テキスト 4.5:1 以上
AA 大きいテキスト 3:1 以上
AAA 通常テキスト 7:1 以上
AAA 大きいテキスト 4.5:1 以上

使い方

1

前景色と背景色を入力

テキスト色（前景色）と背景色を、カラーピッカーまたはHEXコード（例: #FF5733）で入力します。入力欄の左のカラーパレットをクリックするとカラーピッカーが開きます。

2

コントラスト比と判定結果を確認

入力と同時にコントラスト比が自動計算され、WCAG 2.1のAA・AAAレベルの適合状況がアイコンで表示されます。プレビューエリアで実際の文字の見え方も確認できます。

3

結果をコピー・共有

コントラスト比の「コピー」ボタンをクリックすると、比率の値をクリップボードにコピーできます。色の入れ替えボタンで前景色と背景色を素早く切り替えることも可能です。

コントラスト比とWCAG基準

コントラスト比とは、2つの色の明るさの差を数値化したものです。WCAG（Web Content Accessibility Guidelines）2.1では、テキストと背景のコントラスト比に関する達成基準を定めており、Webサイトのアクセシビリティを確保するために重要な指標です。

コントラスト比は最小1:1（同一色）から最大21:1（黒と白）の範囲で表されます。計算には相対輝度（Relative Luminance）を使用し、人間の目が緑に最も敏感で青に最も鈍感であるという特性を反映した重み付け（R: 0.2126、G: 0.7152、B: 0.0722）を行います。

WCAGの適合レベル

WCAG 2.1では、コントラスト比に関して以下の2つのレベルを定めています。

AA レベル（達成基準 1.4.3）: 通常テキスト（18pt未満）は4.5:1以上、大きいテキスト（18pt以上、または14pt以上の太字）は3:1以上のコントラスト比が必要です。多くのWebサイトが目標とする基本的なアクセシビリティ基準です。

AAA レベル（達成基準 1.4.6）: 通常テキストは7:1以上、大きいテキストは4.5:1以上のコントラスト比が必要です。より厳しい基準で、高齢者やロービジョンの方にも読みやすい配色を実現します。

公共機関のWebサイトやECサイトなど、幅広いユーザーに利用されるサイトではAAレベル以上の確保が推奨されます。デザインの美しさとアクセシビリティの両立を目指す際に、このツールをご活用ください。

相対輝度の計算方法

各色のRGB値（0-255）を0-1の範囲に正規化した後、ガンマ補正を行います。値が0.04045以下の場合は12.92で割り、それ以上の場合は ((値 + 0.055) / 1.055) の2.4乗で計算します。この補正済みの値に重み付け係数を掛けて合計したものが相対輝度です。コントラスト比は (明るい方の輝度 + 0.05) / (暗い方の輝度 + 0.05) で算出されます。

よくある質問

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

WCAG 2.1で定義された相対輝度の計算式を使用しています。各色のRGB値にガンマ補正を適用した後、人間の視覚特性に基づく重み付け（赤: 0.2126、緑: 0.7152、青: 0.0722）で輝度を算出し、2色の輝度の比率としてコントラスト比を求めます。

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

AAはWCAGの基本的な適合レベルで、通常テキストに4.5:1以上、大きいテキストに3:1以上のコントラスト比を要求します。AAAはより厳しいレベルで、通常テキストに7:1以上、大きいテキストに4.5:1以上が必要です。一般的なWebサイトではAAレベルの達成が推奨されています。

「大きいテキスト」の基準は何ですか?

WCAGでは、18ポイント（約24px）以上のテキスト、または14ポイント（約18.66px）以上の太字テキストを「大きいテキスト」と定義しています。大きいテキストは視認性が高いため、通常テキストより緩いコントラスト比の基準が適用されます。

どのレベルを目指すべきですか?

一般的なWebサイトではAAレベルの達成が推奨されます。公共機関や医療関連のサイトなど、より高いアクセシビリティが求められる場合はAAAレベルを目標にすると良いでしょう。日本のJIS X 8341-3もWCAG 2.1に準拠しており、AAレベルを基本としています。

入力した色データはどこかに送信されますか?

いいえ、すべての計算はブラウザ内で完結しており、入力した色データがサーバーに送信されることはありません。安心してご利用ください。

コントラスト比21:1とはどういう意味ですか?

21:1は理論上の最大コントラスト比で、純粋な黒（#000000）と純粋な白（#FFFFFF）の組み合わせで得られます。逆に1:1は同じ色同士の組み合わせで、テキストが全く読めない状態を意味します。一般的に、コントラスト比が高いほどテキストが読みやすくなります。

データについて

このツールは時効性のないデータのみを使用しています。計算式や変換係数は普遍的な値に基づいており、定期的な更新は不要です。

入力データはブラウザ内のみで処理されます。サーバーへの送信は一切ありません。