コントラスト比計算ツールとは？
このツールは、前景色（文字色）と背景色のカラーコントラスト比を、公式の WCAG 2.x 計算式に基づいて算出します。コントラスト比はアクセシビリティを測る重要な指標で、ロービジョン（弱視）や色覚特性のある方にとって文字が読みやすいかどうかを示します。値は 1:1（まったく同じ色で文字が見えない状態）から 21:1（純黒の文字を純白の背景に置いた最大コントラスト）までの範囲をとります。なお WCAG は世界共通のウェブアクセシビリティ指針であり、日本の JIS X 8341-3 もこの WCAG を踏まえて策定されているため、国内サイトの判定基準としてもそのまま活用できます。
使い方
前景色（文字色）と背景色について、赤・緑・青の各成分（0〜255）を入力します。計算ツールは各チャンネルを線形化し、両方の色の相対輝度を求めたうえで、環境光を表す定数 0.05 を加えてから明るい方を暗い方で割ります。その結果から、通常サイズの文字と大きい文字それぞれについて WCAG の AA・AAA に適合するかどうかを表示します。
計算式の解説
コントラスト比は \((L_1 + 0.05) / (L_2 + 0.05)\) で求めます。ここで \(L_1\) は明るい方の色の相対輝度、\(L_2\) は暗い方の色の相対輝度です。相対輝度はまず各チャンネルを 0〜1 にスケーリングし、次にガンマ変換を適用して計算します。スケーリング後の値が 0.03928 以下なら 12.92 で割り、それ以外は \(((c+0.055)/1.055)^{2.4}\) を計算します。こうして線形化したチャンネルを \(0.2126 \cdot R + 0.7152 \cdot G + 0.0722 \cdot B\) の比率で合成します。緑の係数が大きいのは、人間の目が緑により敏感であることを反映しているためです。
$$\text{Contrast} = \frac{L_1 + 0.05}{L_2 + 0.05}$$
$$\text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{fg},\, L_{bg}) \\ L_2 &= \min(L_{fg},\, L_{bg}) \\ L_{fg} &= 0.2126\,\ell(\text{Fg R}) + 0.7152\,\ell(\text{Fg G}) + 0.0722\,\ell(\text{Fg B}) \\ L_{bg} &= 0.2126\,\ell(\text{Bg R}) + 0.7152\,\ell(\text{Bg G}) + 0.0722\,\ell(\text{Bg B}) \\ \ell(C) &= \begin{cases} \dfrac{C/255}{12.92} & C/255 \le 0.03928 \\[0.6em] \left(\dfrac{C/255 + 0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases} \end{aligned} \right.$$
計算例
白（255,255,255）の背景に黒（0,0,0）の文字を置いた場合：黒の輝度＝0、白の輝度＝1 となります。比は $$(1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21$$ 21:1 です。これは理論上の最大コントラストで、WCAG のすべてのレベルを余裕で満たします。
よくある質問
どのくらいの比率が必要ですか？ WCAG AA では、通常サイズの文字で 4.5:1、大きい文字（18pt 以上、または太字で 14pt 以上）で 3:1 が必要です。AAA ではそれぞれ 7:1、4.5:1 が求められます。
色の指定順は結果に影響しますか？ いいえ。計算式は常に明るい方の輝度を暗い方で割るため、前景色と背景色を入れ替えても比は同じです。
なぜ 0.05 を足すのですか？ この定数は画面に映り込む環境光（フレア）を表現するためのものです。これにより、純黒と純黒を比べた場合でも値が無限大にならず、定まった値が得られます。
