コントラスト比の計算方法は？公式と求め方を解説（輝度比：L1÷L2：測定値：数値化：計算式など）
「コントラスト比はどうやって計算するのか」「WCAGのコントラスト比の計算式はなぜ複雑なのか」「ディスプレイのコントラスト比とWebアクセシビリティのコントラスト比は同じ計算式なのか」といった疑問は、Webデザイナー・エンジニア・ディスプレイ選定担当者などからよく聞かれます。
コントラスト比の計算方法は用途によって異なる方式が存在し、それぞれの意味と使い方を正確に理解することが正しい数値の解釈と活用につながります。
本記事では、コントラスト比の基本的な計算式（輝度比：L1÷L2）から、WCAGの相対輝度を用いた計算方法、ANSIコントラスト比の算出手順、計算ツールの活用まで、計算例を豊富に示しながらわかりやすく解説します。
コントラスト比の計算をマスターすることで、機器選定・デザイン制作・アクセシビリティ対応のすべての場面でより的確な判断が下せるようになります。
コントラスト比の基本計算式（L1÷L2）
それではまず、コントラスト比の最も基本的な計算式について解説していきます。
コントラスト比の基本計算は非常にシンプルで、明るい方の輝度（L1）を暗い方の輝度（L2）で割るだけです。
基本コントラスト比の計算式と計算例
【コントラスト比の基本計算式】
コントラスト比 ＝ L1 ÷ L2
L1：明るい方の輝度（cd/m²：カンデラ毎平方メートル）
L2：暗い方の輝度（cd/m²）
計算例①：白の輝度300 cd/m²、黒の輝度0.3 cd/m²の場合
コントラスト比 ＝ 300 ÷ 0.3 ＝ 1000：1
計算例②：白の輝度500 cd/m²、黒の輝度0.1 cd/m²の場合
コントラスト比 ＝ 500 ÷ 0.1 ＝ 5000：1
計算例③：ピーク輝度1000 cd/m²（有機EL）、黒の輝度0.0005 cd/m²の場合
コントラスト比 ＝ 1000 ÷ 0.0005 ＝ 2,000,000：1（200万：1）
この基本計算式はディスプレイ・テレビ・プロジェクターのカタログに記載されているコントラスト比の算出に使われています。
輝度の単位はcd/m²（カンデラ毎平方メートル）であり、輝度計（Luminance Meter）で実測するか、仕様書から参照します。
コントラスト比を数値化する際の注意点
カタログ記載のコントラスト比は測定条件（全白・全黒の全画面表示・暗室での測定）に基づいた理想的な条件下での値です。
実際の映像表示や使用環境（環境光・スクリーン反射・映像コンテンツの明暗比率）によって体感コントラスト比は大きく異なります。
より実用的な比較指標として「ANSIコントラスト比」が用いられる場合があります。
ANSIコントラスト比の計算方法
【ANSIコントラスト比の計算方法】
① 画面を4×4の16マスのチェッカーボードパターン（白黒交互）で表示する
② 各白マス（8か所）の輝度平均値を算出 → 白の輝度平均（Lw）
③ 各黒マス（8か所）の輝度平均値を算出 → 黒の輝度平均（Lb）
④ ANSIコントラスト比 ＝ Lw ÷ Lb
ANSIコントラスト比は全画面測定より低い値になることが多く（1/10以下になることも）、実際の映像品質をより正確に反映します
プロジェクターの評価ではANSIコントラスト比が最も実用的な指標として重視されています。
WCAGのコントラスト比の計算方法
続いては、Webアクセシビリティ（WCAG）で使われるコントラスト比の計算方法について確認していきます。
WCAGのコントラスト比はディスプレイの輝度比とは異なる「相対輝度（Relative Luminance）」を使った計算方式です。
相対輝度（Relative Luminance）の計算
【WCAGの相対輝度計算式】
ステップ①：RGBの各チャンネル値（0〜255）を0〜1の範囲に正規化する
R_sRGB ＝ R ÷ 255（G・Bも同様）
ステップ②：ガンマ補正を除去して線形値に変換する
if（C_sRGB ≦ 0.04045）: C_linear ＝ C_sRGB ÷ 12.92
else: C_linear ＝（（C_sRGB ＋ 0.055）÷ 1.055）^ 2.4
ステップ③：相対輝度を計算する
L ＝ 0.2126 × R_linear ＋ 0.7152 × G_linear ＋ 0.0722 × B_linear
計算例：純白（#FFFFFF） → L ＝ 1.0 / 純黒（#000000） → L ＝ 0.0
計算例：グレー（#808080） → 各チャンネル値128/255 ≒ 0.502 → L ≒ 0.2158
この計算は人間の視覚特性（緑チャンネルへの感度が最も高い）を考慮した重み付け（R：G：B ＝ 0.2126：0.7152：0.0722）を使用しています。
WCAGのコントラスト比の計算式
【WCAGコントラスト比の計算式】
コントラスト比 ＝（L1 ＋ 0.05）÷（L2 ＋ 0.05）
L1：2色のうち明るい方の相対輝度（0〜1）
L2：2色のうち暗い方の相対輝度（0〜1）
計算例①：白（L＝1.0）と黒（L＝0.0）のコントラスト比
（1.0 ＋ 0.05）÷（0.0 ＋ 0.05）＝ 1.05 ÷ 0.05 ＝ 21：1（最大値）
計算例②：黒テキスト（L＝0）と薄いグレー背景（#CCCCCC：L≒0.6）のコントラスト比
（0.6 ＋ 0.05）÷（0.0 ＋ 0.05）＝ 0.65 ÷ 0.05 ＝ 13：1（WCAG AA合格）
計算例③：薄い青テキスト（#6699CC：L≒0.164）と白背景（L＝1.0）
（1.0 ＋ 0.05）÷（0.164 ＋ 0.05）＝ 1.05 ÷ 0.214 ≒ 4.9：1（WCAG AA合格・AAA不合格）
WCAGの計算式で「0.05を足す」のは、ゼロ除算（黒の相対輝度が0.0の場合の計算エラー）を防ぐための処理です。
代表的な色の組み合わせのコントラスト比一覧
| テキスト色 | 背景色 | コントラスト比 | WCAG AA判定 |
|---|---|---|---|
| 黒（#000000） | 白（#FFFFFF） | 21：1 | 合格（最高値） |
| 濃いグレー（#595959） | 白（#FFFFFF） | 約7.0：1 | 合格（AAA） |
| 中間グレー（#767676） | 白（#FFFFFF） | 約4.5：1 | 合格（AA）ぎりぎり |
| 明るいグレー（#949494） | 白（#FFFFFF） | 約2.9：1 | 不合格 |
| 白（#FFFFFF） | 濃い青（#003366） | 約14.9：1 | 合格（AAA） |
| 白（#FFFFFF） | 赤（#FF0000） | 約4.0：1 | 不合格（AA） |
コントラスト比の計算ツールと自動化の活用
続いては、コントラスト比の計算を効率化するためのツールと自動化の活用方法について確認していきます。
WCAGの相対輝度計算は手動では手間がかかるため、計算ツールの活用が実務では欠かせません。
オンライン計算ツールの活用
前述のWebAIM Contrast Checker・Colour Contrast Analyserに加え、以下のツールも便利です。
「Contrast Ratio」（contrast-ratio.com）は非常にシンプルなUIで2色のコントラスト比をリアルタイムに確認できます。
「Accessible Colors」（accessible-colors.com）はHEXコードを入力すると自動的にWCAG AA/AAAを満たす近似色を提案してくれる便利なツールです。
デザイン工程でコントラスト比チェックを習慣化するためには、デザインツール（Figma・Adobe XD）のプラグイン統合が最も効率的です。
JavaScriptでのコントラスト比の自動計算
【JavaScriptでのコントラスト比計算の実装例（概要）】
① HEXカラーコード（例：#336699）をRGB値に変換する
② 各チャンネルを0〜1に正規化し、ガンマ補正を除去して線形値に変換する
③ 相対輝度 L ＝ 0.2126×R ＋ 0.7152×G ＋ 0.0722×B を計算する
④ 2色の相対輝度L1・L2を比較し、大きい方をL1とする
⑤ コントラスト比 ＝（L1 ＋ 0.05）÷（L2 ＋ 0.05）を計算して返す
この計算関数をデザインシステムやCI/CDパイプラインに組み込むことで、自動コントラスト検証が実現できます
コントラスト比計算の実務での活用ポイント
実務でコントラスト比の計算を活用するための主なポイントをまとめます。
カラーパレット設計段階で各色の組み合わせのコントラスト比を一覧化した「コントラスト比マトリクス」を作成しておくと、デザイン制作時の色選択が格段に効率化されます。
新しいカラーを採用する際は必ずコントラスト比ツールで確認し、WCAG AA基準（4.5：1以上）を満たすことを確認する運用ルールを設けることが重要です。
アクセシビリティ対応を「デザイン完成後のチェック」ではなく「デザイン設計の最初から組み込む（シフトレフト）」アプローチが、修正コストの最小化と品質向上の両立につながります。
まとめ
本記事では、コントラスト比の基本計算式（L1÷L2）から、ANSIコントラスト比の計算方法、WCAGの相対輝度を用いたコントラスト比の計算式（（L1＋0.05）÷（L2＋0.05））、代表的な色の組み合わせのコントラスト比一覧、計算ツールと自動化の活用まで幅広く解説しました。
ディスプレイのコントラスト比は「白の輝度÷黒の輝度」のシンプルな計算であり、WCAGのコントラスト比は人間の視覚特性を考慮した相対輝度に基づく精密な計算です。
白と黒の組み合わせが最大21：1となり、WCAG AA基準の4.5：1以上を満たすカラー設計が、すべてのユーザーに対する視認性確保の基本となります。
コントラスト比の計算をツールで効率化しながら、デザイン設計の早い段階からアクセシビリティを意識したカラー選定を実践してください。
コントラスト比の正確な理解と計算スキルは、映像品質の評価・Webアクセシビリティ対応・デザインの品質向上のすべてに共通して役立つ重要な知識です。
