色のコントラスト比(WCAG)計算｜AA/AAA アクセシビリティ判定

2色を入力

前景色（文字色）

背景色

よく使う組み合わせ

サンプル文字 Aa 123

この色の組み合わせの見え方プレビュー

コントラスト比

— : 1

AA・通常文字（4.5以上）

—

AA・大きい文字（3.0以上）

—

AAA・通常文字（7.0以上）

—

AAA・大きい文字（4.5以上）

—

📘 計算式・WCAG基準の説明

相対輝度 L を各色について求めます。RGB各チャンネル(0〜1に正規化)にsRGBガンマ補正をかけてから重み付けします。

各チャンネル c について：c≦0.03928 なら c/12.92、そうでなければ ((c+0.055)/1.055)^2.4
L = 0.2126×R + 0.7152×G + 0.0722×B
コントラスト比 = (L明 + 0.05) ÷ (L暗 + 0.05)（L明＝明るい方、L暗＝暗い方）

WCAG 2.1 の判定基準

AA・通常文字：4.5 以上
AA・大きい文字(約18pt/太字14pt以上)：3.0 以上
AAA・通常文字：7.0 以上
AAA・大きい文字：4.5 以上

※判定はWCAGの目安です。実際のアクセシビリティ対応は各環境・専門家の確認のうえ、自己責任でご判断ください。

📖 コントラスト比(WCAG)の使い方と解説

2つの色(文字色と背景色)を入れると、WCAGのコントラスト比と、Web表示の読みやすさ基準であるAA/AAA判定が分かります。文字が背景に埋もれて見えにくくないか、デザインを公開する前に数値で確認できます。

使い方

文字色と背景色をカラーコード(例: #1d4f86)またはカラーピッカーで指定します。
コントラスト比は「1:1(同色)」〜「21:1(黒と白)」の範囲で表示されます。数値が大きいほど読みやすくなります。
AA/AAAは合格基準です。通常テキストはAAで4.5:1以上、AAAで7:1以上が目安です。
大きな文字(およそ18pt以上、または14pt以上の太字)はAAで3:1、AAAで4.5:1と基準がゆるくなります。

計算のしくみ・計算式

コントラスト比は、各色の「相対輝度(L)」から次の式で求めます。明るい方をL1、暗い方をL2として、比 = (L1 + 0.05) ÷ (L2 + 0.05) です。0.05は周囲光の反射を考慮した補正値です。

相対輝度は、RGB各値を0〜1に正規化してガンマ補正し、L = 0.2126×R + 0.7152×G + 0.0722×B で計算します。人間の目が緑を最も明るく感じるため、Gの係数が大きく設定されています。例えば白(#fff, L=1.0)と黒(#000, L=0.0)なら (1.0+0.05)÷(0.0+0.05) = 21、つまり最大の21:1になります。

よくある質問

Q. 文字色と背景色を入れ替えると比は変わりますか?

A. 変わりません。式は明るい色を分子に置くため、2色の組み合わせが同じなら順序に関わらず同じ値になります。

Q. AAとAAAはどちらを目指すべきですか?

A. 一般的なWebサイトはAA(4.5:1)が実用的な必須ライン、官公庁サイトや高い配慮が必要な場面ではAAA(7:1)が推奨されます。まずAAを満たすことを優先しましょう。

Q. アイコンやボタンの枠線にも基準はありますか?

A. はい。文字以外のUI部品(アイコン・入力欄の境界など)はWCAG 2.1で3:1以上が求められます。テキストより基準はゆるめです。

知っておくと役立つこと

半透明色(opacity指定)は背景と混ざった実際の見え色で判定されるため、重なった後の色で確認すると正確です。
薄いグレーの注釈文字は基準割れしやすい代表例です。本文より小さい補足ほどコントラストに注意しましょう。
色覚特性のある人にも配慮するなら、色だけで情報を区別せず、太字や下線、アイコンを併用すると安全です。