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

カラーコントラストチェッカーとは？

カラーコントラストチェッカーは、デザイナー・開発者・アクセシビリティ担当者向けの無料オンライン WCAG コントラスト比チェックツールです。前景（テキスト）色と背景色を受け取り、それぞれの相対輝度を計算して、コントラスト比を 1:1 から 21:1 の値で示します。さらにその比率が WCAG 2.1 のレベル AA（通常 4.5:1、大 3:1）とレベル AAA（通常 7:1、大 4.5:1）に適合するかを判定し、2 色でサンプルテキストのプレビューを描画するので、可読性をひと目で確認できます。本文・ボタン・リンク・ラベルが読みやすいかを、デザインを公開する前に検証できます。

カラーコントラストチェッカーの使い方

1. 前景（テキスト）色を HEX 値で入力または貼り付けるか、ネイティブのカラーピッカーをクリックして視覚的に選びます。
2. テキストが乗る背景色についても同じ操作を行います。
3. コントラスト比の出力を確認します。4.5:1 のような値で表示されます（1:1 は同一色、21:1 は純黒と純白）。
4. 通常テキストと大きいテキスト（18pt / 14pt 太字以上）の AA・AAA バッジを確認し、どのレベルに適合するかを見ます。
5. 2 色で描画されたサンプルテキストのプレビューを見て、テキストが十分に読みやすいかを確認します。
6. デザインに必要なコントラストのレベルに達するまで、いずれかの色を調整します。

使用例

前景 #595959、背景 #ffffff

コントラスト比 7.00:1 — 通常・大きいテキストともに AA と AAA に適合

前景 #999999、背景 #ffffff

コントラスト比 2.85:1 — 通常 AA と AAA に不適合、本文に必要なレベルはいずれも満たさない

前景 #767676、背景 #ffffff

コントラスト比 4.54:1 — AA 通常と AA 大に適合するが、AAA 通常には不適合

よくある質問

WCAG が求めるコントラスト比はどのくらいですか？

WCAG 2.1 レベル AA は通常テキストで 4.5:1 以上、大きいテキストで 3:1 以上が必要です。レベル AAA はより厳しく、通常テキストで 7:1、大きいテキストで 4.5:1 です。本チェッカーはこれら 4 つのしきい値それぞれに適合/不適合バッジを表示します。

大きいテキストとは何ですか？

WCAG は大きいテキストを 18pt（約 24px）以上、または太字の場合は 14pt（約 18.66px）以上と定義しています。文字が大きいほど読みやすいため大きいテキストの要件は緩く、通常テキストが不適合でも大きいテキストのバッジは適合する場合があります。

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

公式の WCAG の式を使います。各色の相対輝度を線形化した sRGB チャンネルから計算し、比率は (明るい方 + 0.05) / (暗い方 + 0.05) で求めます。結果は 1:1（同一色）から 21:1（黒地に白）の範囲です。

アルファ、RGB、色名には対応していますか？

入力は HEX のみ（#rgb の短縮形または #rrggbb）で、各フィールドにネイティブのカラーピッカーが付いています。アルファ/不透明度や半透明は考慮しません——半透明レイヤーは先に不透明色へ合成してから確認してください。

私の色はサーバーに送信されますか？

いいえ。輝度と比率の計算はすべて JavaScript でブラウザ内のローカルで実行されます——色はアップロードされず、サーバーには何も送信されないため、プライバシーが保たれ、ページの読み込み後はオフラインでも動作します。