WCAGのカラーコントラスト比とは？
コントラスト比とは、2つの色がどれだけ見分けやすいか——多くの場合は文字色と背景色の差——を数値で表したものです。ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG 2.x）では、この比率を用いて最低基準を定め、視力の弱い方や色覚に特性のある方でもコンテンツを読みやすく保てるようにしています。比率は1:1（2色がまったく同じ）から、純黒に純白を重ねた最大の21:1までの範囲をとります。
このツールの使い方
前景色（文字色）と背景色を、#1a73e8 のようなHEX値、または #fff のような3桁の省略形で入力してください。ツールが各色を線形化して相対輝度を求め、コントラスト比を算出するとともに、WCAGの各基準値に対して「合格／不合格」を判定します。
計算式の解説
コントラスト比は次の式で求められます。
$$\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$L1は明るいほうの色の相対輝度、L2は暗いほうの色の相対輝度です。
$$\begin{aligned} L_1 &= \max(L_{\text{Foreground}},\, L_{\text{Background}}) \\ L_2 &= \min(L_{\text{Foreground}},\, L_{\text{Background}}) \end{aligned}$$相対輝度は、各sRGBチャンネルを0〜1の値に変換し、それを線形化した上で（値が0.03928以下のチャンネルは12.92で割り、それより明るいチャンネルは \(\left(\dfrac{c+0.055}{1.055}\right)^{2.4}\) を適用）、\(0.2126\cdot R + 0.7152\cdot G + 0.0722\cdot B\) として合算して求めます。
$$L = 0.2126\,R_{lin} + 0.7152\,G_{lin} + 0.0722\,B_{lin}$$$$c_{lin} = \begin{cases} \dfrac{c}{12.92} & c \le 0.03928 \\[0.4em] \left(\dfrac{c+0.055}{1.055}\right)^{2.4} & c > 0.03928 \end{cases}$$式の中の0.05はゼロ除算を防ぐとともに、画面まわりの環境光の映り込みを考慮した補正値です。
計算例
白（#FFFFFF）の上に黒（#000000）の文字を置いた場合、黒の輝度は0、白の輝度は1です。比率は
$$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = 21:1$$となり、これは理論上の最大値で、すべての基準を余裕でクリアします。
よくある質問
どのくらいのコントラストが必要ですか？ WCAGのAAレベルでは、通常テキストに4.5:1、大きい文字（18pt以上、または太字で14pt以上）に3:1が求められます。AAAレベルでは、それぞれ7:1と4.5:1が必要です。
色の順番は関係ありますか？ いいえ。計算式では常に明るいほうの輝度を暗いほうの輝度で割るため、前景色と背景色を入れ替えても比率は変わりません。
単純な明るさ（ブライトネス）ではなぜダメなのですか？ 人間の色の知覚は非線形で、しかも緑に強く偏っています。だからこそ輝度の計算では、単純な平均ではなく、ガンマ補正とチャンネルごとに異なる係数を用いるのです。
