ToolDeck

カラーコントラスト比チェッカー

テキストと背景色間のWCAG AA・AAAコントラスト比をチェック

サンプルを試す

前景色(テキスト)

背景色

大きいテキスト見本(18px太字)

通常テキスト見本 — 選択した背景色に対してボディテキストがどのように表示されるかを確認できます。

コントラスト比

14.63:1

WCAG準拠

適合

通常 AA

適合

通常 AAA

適合

大きい AA

適合

大きい AAA

WCAG AA通常テキスト: 4.5:1, 大きいテキスト(18px以上または14px太字): 3:1

WCAG AAA通常テキスト: 7:1, 大きいテキスト(18px以上または14px太字): 4.5:1

カラーコントラストチェックとは?

カラーコントラストチェックは、前景色(通常はテキスト)と背景色の輝度差を計測し、その結果を比率として表します。1:1は2色が同一であることを意味し、21:1は黒地に白(またはその逆)を表す最大値です。W3CによるWebコンテンツアクセシビリティガイドライン(WCAG)は、弱視や色覚異常を持つユーザーが読み取れるよう、テキストが満たすべき最小コントラスト比を定めています。

コントラスト比の計算式はWCAG 2.xに由来し、相対輝度(人間の目に色がどれほど明るく見えるかを表す指標)を使用します。相対輝度は、sRGBの各チャンネルを線形化(ガンマ除去)し、ITU-R BT.709の係数で重み付けして算出します。係数は赤が0.2126、緑が0.7152、青が0.0722です。人間の目は緑の光に最も敏感なため、緑の寄与が最も大きくなります。コントラスト比は (L1 + 0.05) / (L2 + 0.05)(L1は明るい色の輝度)で算出されます。

WCAGは2つの適合レベルを定義しています。レベルAAは、通常サイズのテキストに4.5:1以上、大きいテキスト(18px以上、または14px太字)に3:1以上のコントラスト比を要求します。レベルAAAはそれをさらに引き上げ、それぞれ7:1と4.5:1を要求します。また、WCAG 2.1では達成基準1.4.11が追加され、ボーダー・アイコン・フォーカスインジケーターなど、テキスト以外のUI要素にも3:1の比率が要求されています。

このコントラストチェッカーを使う理由

目視でコントラストを確認するのは信頼性が低い方法です。キャリブレーション済みのディスプレイでくっきり見える色も、低品質なノートパソコンの画面や直射日光下では区別しにくくなる場合があります。また、第二色覚異常(緑色盲)の方にとっても同様です。数値で表された比率は推測を排除し、WCAG基準に対する明確な適合・不適合の判定を与えます。

即時のコントラスト比計算
2色を選択または入力するだけで、コントラスト比がリアルタイムで更新されます。送信ボタンもページの再読み込みも不要です。
🔒
プライバシー優先の処理
輝度の計算処理はすべてブラウザ内で実行されます。色の値が外部に送信されることはなく、クッキーや分析によって選択が追跡されることもありません。
🎯
AA・AAAの適合判定
通常テキストと大きいテキストの両サイズについて、WCAG AAおよびAAAの適合・不適合ステータスを表示します。どのしきい値を満たしているかを正確に把握できます。
📋
アカウント登録不要
ページを開いてすぐにテストを開始できます。サインアップも利用制限もありません。読み込み後はオフラインでも動作します。

コントラストチェッカーのユースケース

フロントエンド開発
UIの変更をリリースする前に、CSSのテキストカラーと背景色をチェッカーに貼り付けて、その組み合わせがWCAG AAを満たすか確認します。コードレビューや自動監査に到達する前に、コントラスト不足の問題を検出できます。
デザインの引き渡し
デザイナーはFigmaファイル内のすべてのカラーペアが必要なWCAGレベルを満たしているかを確認してから、エンジニアに仕様を渡すことができます。実装後に修正するよりも、デザイン段階でコントラストの問題を修正する方がはるかにコストが低くなります。
アクセシビリティ監査
WCAG監査を行うQAエンジニアは、Lighthouseやaxeなどのツールが検出した特定のカラーの組み合わせをスポットチェックできます。チェッカーで正確な比率と、どのレベルが適合・不適合かを確認できます。
デザインシステムのトークン管理
デザインシステムのカラートークンを定義する際、各前景・背景ペアをテストして、トークンパレットが最低限AAを満たすことを確認します。トークンとともに比率も文書化しておくと、利用するチームが安心して使用できます。
メールテンプレートのテスト
メールクライアントはopacityやblend modeなどのCSS機能を除去することがあるため、実際にレンダリングされる色がソースと異なる場合があります。受信トレイに届く実際の前景色と背景色の値をテストして、可読性を確認します。
アクセシビリティ基準の学習
WCAGを学ぶ学生は、異なるカラーペアを試してコントラスト比がどのように変化するかをリアルタイムで確認できます。1チャンネルずつ調整することで、輝度と知覚コントラストの関係についての理解を深めることができます。

WCAGコントラスト比の要件

下の表は、WCAG 2.1においてさまざまなコンテンツの種類と適合レベルで要求される最小コントラスト比をまとめたものです。大きいテキストとは、通常の太さで18px(24 CSSピクセル)以上、または太字で14px(18.66 CSSピクセル)以上と定義されています。

レベル最小比率適用対象備考
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

相対輝度・AA・AAAの解説

コントラスト比の計算には3段階あります。各色の輝度を計算し、比率を導き出し、WCAGのしきい値と比較します。

相対輝度
黒(0)から白(1)の範囲で色の明るさを表す単一の数値です。sRGBのガンマカーブの非線形性と、赤・緑・青に対する人間の目の感度の違いを考慮しています。純粋な緑(#00FF00)の輝度は0.7152、純粋な青(#0000FF)の輝度はわずか0.0722です。
WCAG AA
EUの欧州アクセシビリティ法(EAA)や米国のSection 508など、多くの法的基準が要求する基本的なアクセシビリティレベルです。AAは通常テキストに4.5:1、大きいテキストに3:1の比率を要求します。ほとんどのデザインシステムは、すべてのテキスト要素においてAAを最低基準としています。
WCAG AAA
重度の視覚障害を持つユーザーを含む、できる限り幅広いユーザーが読めるコンテンツを対象とした上位レベルです。AAAは通常テキストに7:1、大きいテキストに4.5:1を要求します。すべてのページでAAAを達成しているサイトは少数ですが、法的通知や医療情報など重要なコンテンツではしばしばAAAが目標とされます。

コード例

WCAGコントラスト比をプログラムで計算します。各例はWCAG 2.xの相対輝度計算式とコントラスト比の計算を実装しています。比較しやすいよう、黒地に白とインディゴ地に白の2つのカラーペアをテストしています。

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

よくある質問

テキストに適切なコントラスト比とは?
ウェブのボディテキストには、最低4.5:1(WCAG AA)を目指してください。7:1以上の比率はWCAG AAAを満たし、長時間の読書にも快適です。黒地に白は最大の21:1を生み出しますが、非常に濃いグレー(#1e293b)と白の組み合わせでも約12.6:1が得られ、AAAを大幅に超えています。
WCAGにおける「大きいテキスト」とは?
WCAGは大きいテキストを、通常の太さで18px(24 CSSピクセル)以上、または太字で14px(18.66 CSSピクセル)以上と定義しています。大きい文字は読みやすいため、コントラストのしきい値が低く設定されています。CSSでは1pxは0.75ptに相当するため、18ptは24pxに相当します。
WCAG AAは法的に義務付けられていますか?
多くの国・地域で義務付けられています。2025年6月に施行されるEUの欧州アクセシビリティ法(EAA)はWCAG 2.1 AAを参照しています。米国リハビリテーション法のSection 508は連邦機関にWCAG 2.0 AAへの適合を要求しています。米国障害者法(ADA)は、WCAG AAを基準としてアクセシブルなウェブサイトを要求するものとして米国裁判所に解釈されています。カナダ・オーストラリア・英国にも同様の規定があります。
相対輝度はどのように計算されますか?
各sRGBチャンネルの値(0〜255)を255で割り、その後線形化します。0.04045以下の値は12.92で割り、それを超える値は ((c + 0.055) / 1.055) ^ 2.4 で変換します。線形化した3チャンネルをITU-R BT.709の係数(赤0.2126、緑0.7152、青0.0722)で重み付けして合計します。結果は0〜1の数値になります。
コントラスト計算式にオフセット0.05が使われるのはなぜですか?
0.05のオフセットは、一方の色が純粋な黒(輝度=0)の場合にゼロ除算が発生するのを防ぐためです。また、最も暗いピクセルでも知覚輝度をわずかに高める環境光とスクリーンの反射を考慮しています。このオフセットがなければ、暗い色どうしのコントラスト比が無限大または誤って高い値になってしまいます。
2色がAAを満たしていても読みにくいことはありますか?
あります。WCAGのコントラスト比は輝度差を測定するもので、色相差を測定するものではありません。彩度の高い赤と彩度の高い緑は、比率のしきい値を技術的に満たしていても、特に赤緑色覚異常のある方には読みにくい組み合わせになる場合があります。輝度と色相の両方で異なる色を組み合わせると、より快適な結果が得られる傾向があります。
WCAG 2.xコントラストとAPCAの違いは?
WCAG 2.xは前景と背景を対称的に扱うシンプルな輝度比率を使用します。WCAG 3.0への採用が提案されているAPCA(Advanced Perceptual Contrast Algorithm)は、極性を考慮した知覚的明度モデルを使用します。同じ輝度差であっても、明るい背景に暗いテキストと暗い背景に明るいテキストでは知覚されるコントラストが異なります。APCAは現在もワーキングドラフトの段階にあり、いかなる規制においてもWCAG 2.xの方式を置き換えていません。