1. コントラスト比の基準（WCAG）
WCAG（Web Content Accessibility Guidelines、Web のアクセシビリティの国際的な指針）は、文字色と背景色の明るさの差を「コントラスト比」という数で表し、必要な値を決めています。比は 1:1（同じ色）から 21:1（黒と白）までの値をとります。
| 基準 | 必要な比 |
|---|---|
| 通常の文字 AA | 4.5:1 以上 |
| 通常の文字 AAA | 7:1 以上 |
| 大きな文字 AA | 3:1 以上 |
| 大きな文字 AAA | 4.5:1 以上 |
| UI の部品・図形（達成基準 1.4.11） | 3:1 以上 |
AA は多くの Web サイトや公共のガイドラインが目標にする水準で、AAA はさらに厳しい水準です。まずは「通常の文字 AA」の 4.5:1 を満たすかを確かめるのが一般的です。
大きな文字とは、18pt（24px）以上の文字、または 14pt（約 18.66px）以上の太字です。大きな文字は読みやすいので、必要な比が低くなっています。見出しは大きな文字の基準で判断できることがありますが、本文の大きさ（16px など）の文字は通常の文字の基準で判断します。
UI の部品・図形の基準は、ボタンや入力欄の枠線、アイコン、グラフの線など、文字以外で意味を伝えるものに適用されます。
2. コントラスト比の計算方法
コントラスト比は、2つの色の相対輝度（色の明るさを 0〜1 で表した値）から計算します。
まず、赤・緑・青の各成分を 0〜1 の値 c にし（#76 = 118 なら 118 ÷ 255）、次の式で光の強さに直します。
c ≤ 0.04045 なら c / 12.92
そうでなければ ((c + 0.055) / 1.055) ^ 2.4直した3つの値 R・G・B から、相対輝度 L を求めます。人の目は緑を明るく感じるので、緑の係数が大きくなっています。
L = 0.2126 × R + 0.7152 × G + 0.0722 × B2つの色の L のうち、明るい方を L1、暗い方を L2 として、比は次の式です。
コントラスト比 = (L1 + 0.05) / (L2 + 0.05)例として、#767676 の相対輝度は 0.18116… 、白 #ffffff は 1 です。比は (1 + 0.05) / (0.18116… + 0.05) = 4.5422… で、4.5 を超えるので通常の文字 AA に合格します。文字色と背景色を入れ替えても比は同じです。
3. 4.48 に見えても不合格になる理由
#767676 より1段明るい #777777 と白の比は、4.4780… です。小数2桁に四捨五入すると 4.48 になり、さらに小数1桁に丸めると 4.5 に見えてしまいます。しかし、4.5 には届いていないので、通常の文字 AA には不合格です。
W3C の解説文書 Understanding WCAG 2.1 は、比を基準と比べるときは丸めないように定めています。
When comparing the computed contrast ratio to the Success Criterion ratio, the computed values should not be rounded (e.g., 4.499:1 would not meet the 4.5:1 threshold).
（出典：W3C「Understanding Success Criterion 1.4.3: Contrast (Minimum)」。訳：計算したコントラスト比を達成基準の比と比べるときは、計算した値を丸めない。たとえば 4.499:1 は 4.5:1 の基準を満たさない。）
このツールは、比を小数2桁で切り捨てて表示します。#777777 と白は 4.47:1 と出るので、表示の数字だけを見ても 4.5 に届いていないことがわかります。判定は切り捨てる前の値で行っています。
この例は、色を1段暗くするだけで直ります。#777777 を #767676 にすると 4.54:1 になり、合格します。
4. 色合いを保ったまま直す方法
基準に届かないとき、このツールは文字色の明るさだけを変えた候補を出します。色の表し方の1つである OKLCH（明るさ L・鮮やかさ C・色相 h で色を表す方式）に直し、C と h はそのままにして、L を 0.001 ずつ下げた色（暗くする）と上げた色（明るくする）を順に調べます。目標の比に最初に届いた色が候補です。
OKLCH の L は、人の見た目の明るさに近くなるように作られています。L だけを動かすと、青は青のまま、オレンジはオレンジのまま、暗く（または明るく）なります。
| 文字色 | 背景色 | 目標 | 候補（暗くする） |
|---|---|---|---|
#3b82f6（3.67:1） | #ffffff | 4.5 | #2b72e5（4.52:1） |
#3b82f6（3.67:1） | #ffffff | 7 | #0352c2（7.02:1） |
#777777（4.47:1） | #ffffff | 7 | #595959（7.00:1） |
暗くしたときに画面で出せる範囲（sRGB）から外れる色は、明るさと色相を保ったまま鮮やかさを下げて、範囲に収めます。
白い文字は鮮やかさを持たないので、暗くすると灰色になります。オレンジの背景 #ff8800 に白い文字 #ffffff を置くと、候補は #3d3d3d（4.53:1）です。白い文字のまま使いたいときは、背景色の方を暗くすることを検討してください。
背景が中間の明るさのときは、特に目標を 7 にすると、暗くしても明るくしても届かないことがあります。その場合は「背景色を変えてください」と表示します。
5. このツールが使っていない基準
WCAG 3 の草案では、APCA という別の計算方法が検討されています。このツールは APCA を使っていません。比と判定は、すべて WCAG 2 の式と基準によるものです。