色のコントラスト比の計算方法（WCAG AA/AAA）
コントラスト比は、文字色が背景色からどれだけ際立っているかを示す数値で、1:1（同じ色）から21:1（純粋な黒と白）までの範囲で表されます。WCAG 2.1はこの比率に最低基準を定めていて、AAレベルの通常テキストなら4.5:1。多くのアクセシビリティ監査や法的要件が基準にしているのがこのラインです。
計算式
コントラスト比は画面上の「見た目」ではなく、各色の相対輝度から導き出されます。16進数カラーコードから輝度を求める手順は4つです。
- 16進数をR・G・Bに分解し、255で割る。 各チャンネルが0から1の値になる。
- 各チャンネルを線形化する。 ディスプレイは色の値を明るさに直線的に変換しないため、ガンマ補正が必要になる。値が0.03928以下なら12.92で割り、それ以外は
((値 + 0.055) / 1.055) ^ 2.4を適用する。 - 重み付けして合計し、相対輝度を求める。
L = 0.2126 × R + 0.7152 × G + 0.0722 × B。人間の目は緑に最も敏感なので緑の重みが一番大きく、青が一番小さい。 - 明るい方の輝度を暗い方の輝度で割る。 それぞれに0.05を足してから計算する。
(明るい方のL + 0.05) / (暗い方のL + 0.05)。
この「+0.05」が効いている。片方の色がほぼ黒に近いときに比率が無限大に発散するのを防いでいて、純粋な黒と白の組み合わせがちょうど21:1で頭打ちになるのもこの定数のおかげだ。
計算例：#767676と白
このグレーと白の組み合わせはWCAGの資料でよく登場する。ちょうど基準値の境界線上にあるため、手計算で追いかける練習にちょうどいい。
ステップ1。 #767676 はRGBで 118, 118, 118。255で割ると各チャンネルとも 0.4627 になる。
ステップ2。 0.4627 は 0.03928 より大きいのでガンマ補正式を使う。((0.4627 + 0.055) / 1.055) ^ 2.4 = 0.1810。R・G・Bすべて同じ値なので、この数字がそのまま3チャンネルに当てはまる。
ステップ3。 輝度は L = 0.2126 × 0.1810 + 0.7152 × 0.1810 + 0.0722 × 0.1810 = 0.1810。白の輝度は 1.0（全チャンネルが線形化後ちょうど1になる）。
ステップ4。 比率は (1.0 + 0.05) / (0.1810 + 0.05) = 1.05 / 0.2310 = 4.545、四捨五入して4.54:1。
この値はAA通常テキストの基準4.5:1をわずかに上回り、AAA大きいテキストの基準4.5:1もぎりぎり上回る。一方でAAA通常テキストに必要な7:1には遠く及ばない。同じ一つの16進数カラーでも、テキストサイズとどのレベルを狙うかによって判定が3通りに分かれる。
よくある配色の判定結果
| 配色 | 比率 | AA通常（4.5:1） | AAA通常（7:1） | AA大（3:1） | AAA大（4.5:1） |
|---|---|---|---|---|---|
#AAAAAA と #FFFFFF | 2.32:1 | 不合格 | 不合格 | 不合格 | 不合格 |
#767676 と #FFFFFF | 4.54:1 | 合格 | 不合格 | 合格 | 合格 |
#2563EB と #FFFFFF | 5.17:1 | 合格 | 不合格 | 合格 | 合格 |
#333333 と #FFFFFF | 12.63:1 | 合格 | 合格 | 合格 | 合格 |
この表から読み取れることは二つある。一つ目、ボタンやリンクによく使われる #2563EB のような中彩度の青は本文テキストでAAをクリアするが、AAAは完全に不合格になる。AAAを狙うサイトではもっと濃い色が必要だ。二つ目、薄いグレーのプレースホルダーテキストでよく見る #AAAAAA 前後の色は、大きいテキスト向けの最低基準3:1さえ満たさない。「控えめな」グレー文字がアクセシビリティ監査で最も頻繁に指摘される原因の一つになっているのはこのためだ。
自分の配色をチェックする
下のツールに任意の2色を入力すれば、正確な比率とWCAGの各レベルの合否がその場でわかる。アップロードやサーバーへの送信は一切ない。
いろはにほへと ちりぬるを
いろはにほへと ちりぬるを
よくある間違い
大きいテキストの基準が低いことを忘れる。 WCAGは「大きいテキスト」を18pt（24px）の標準ウェイト以上、または14pt（18.66px）の太字以上と定義している。24pxの見出しに必要なのは3:1だけで4.5:1ではない。すべてのテキストサイズに同じ基準を一律で適用するデザインシステムは、本来すでに基準を満たしている見出しまで不合格にしてしまう。
テキストのコントラストだけ確認してUIコンポーネントを見落とす。 WCAG 1.4.11は、ボタンの枠線やフォーム入力欄の輪郭、それ自体で意味を伝えるアイコンといった非テキスト要素に対して、別に3:1の最低基準を定めている。テキストが完璧な7:1でも、枠線が背景に溶け込んでいれば監査では不合格になりうる。
間違った背景でコントラストを確認する。 写真やグラデーション、半透明のオーバーレイの上に乗ったテキストには、単一の背景色というものが存在しない。コントラスト比はサンプリングした特定の一点でしか成立しない。上が明るく下が暗いグラデーションなら、平均ではなく最悪のケースの地点で確認する必要がある。
ブランドカラーは例外だと思い込む。 ロゴのワードマーク自体はコントラスト要件の対象外だが、ブランドカラーで組んだ本文やUIテキストは対象外にならない。ロゴのアクセントとしては問題ないブランドブルーやブランドレッドの多くが、白地に16pxの本文テキストとして使うと4.5:1を満たさない。
よくある質問
AAとAAAの違いは何ですか？ AAは多くの法的なアクセシビリティ要件（米国のADA、EUのEN 301 549など）が参照する標準で、ほとんどの監査もAAを基準にチェックする。AAAはより厳しく、主に低視力のユーザー向けコンテンツを想定したものだ。WCAG自体、すべてのコンテンツ形式でAAAを達成するのは現実的でないと述べている。そのため多くの組織は全面的にAAAを狙うのではなく、AAを全体の目標にしている。
コントラスト比は色覚異常にも対応していますか？ いいえ。コントラスト比が測るのは明るさであって色相ではない。そのため特定の色を見分ける能力に依存しない分、結果的に多くの色覚異常にも配慮できる計算になっている。ただし色覚異常のチェックそのものの代わりにはならない。二色の明るさの差が大きくコントラストが良好でも、色相だけで区別している場合は赤緑色覚異常のユーザーには見分けづらいことがある。
純粋な黒と白がちょうど21:1になるのはなぜですか？
黒の輝度は0、白の輝度は1。これを比率の式に当てはめると (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21。偶然でも四捨五入でもなく、「+0.05」という定数の選び方そのものから、ちょうど21:1という数字が出てくる。
ダークモードは別にチェックが必要ですか？ 必要だ。明るい背景を暗い背景に入れ替えても比率はそのまま維持されない。ブランドブルーの地に白文字と、ほぼ黒の地にブランドブルーの文字では、輝度の組み合わせがまったく異なり比率も別物になる。ライトモードで確認した結果がそのままダークモードにも通用すると思い込まず、テーマごとにチェッカーを通すべきだ。