🎨 カラーコントラスト比チェッカー
前景色と背景色のコントラスト比を計算し、WCAGの基準で読みやすさを判定します。
色の入力
大きい文字 Aa 18pt
通常テキストのサンプル。読みやすさを確認できます。
コントラスト比
—
※ WCAG 2.1 の相対輝度に基づく計算です。「大きい文字」は18pt（太字なら14pt）以上が目安です。
解説
コントラスト比は、文字色と背景色の明るさの差を 1:1（同じ色）〜21:1（黒と白）の範囲で表す指標です。値が大きいほど文字が読みやすく、Webアクセシビリティのガイドライン WCAG では達成すべき下限が定められています。本ツールは2色を入力するだけで、この比率と各基準の合否をリアルタイムに判定します。
計算は WCAG の定義どおりに行います。まず各色の相対輝度 L を L = 0.2126×R + 0.7152×G + 0.0722×B で求めます（各チャンネルは sRGB をガンマ展開した線形値で、cs≦0.03928 のとき cs/12.92、それ以外は ((cs+0.055)/1.055)^2.4）。そのうえでコントラスト比 = (明るい方の L + 0.05) ÷ (暗い方の L + 0.05) を計算します。例えば白(#FFFFFF)と黒(#000000)は最大の 21:1、白と #767676 ではちょうど約 4.54:1 になります。
「コントラスト比 4.5:1」とは、WCAG の AA レベルで通常サイズのテキストに求められる最低基準です。本ツールはこの値以上で「合格」と判定します。通常テキストの AAA は 7:1 以上が必要で、より厳しい基準です。
大きい文字には基準がゆるく適用されます。WCAG では通常およそ18pt（約24px）以上、または太字で14pt（約18.66px）以上を「大きい文字」とし、AA は 3:1 以上、AAA は 4.5:1 以上で合格とします。本ツールは「通常×AA(4.5)」「通常×AAA(7.0)」「大×AA(3.0)」「大×AAA(4.5)」の4区分をそれぞれ判定します。
使いどころは、文字色と背景色の組み合わせがアクセシビリティ基準を満たすかの確認です。例えば薄いグレー(#999999)の文字を白(#FFFFFF)背景に置くと約 2.85:1 で通常テキストの AA(4.5:1) には届かず、もう少し濃い色にする必要がある、といった判断ができます。色は前景・背景を入れ替えても比率は同じです。
注意点として、コントラスト比はあくまで読みやすさの目安です。基準を満たしていても、色覚特性・フォントの細さ・画像の上に重ねた文字などでは見づらくなる場合があり、別途の配慮が必要です。本ツールの計算はすべてブラウザ内で完結し、入力した色は外部に送信されません。
よくある質問
コントラスト比 4.5:1 とは何ですか？
WCAG の AA レベルで、通常サイズのテキストに求められる最低のコントラスト比です。本ツールではこの値以上で「合格」と判定します。例えば白背景に置く文字色なら #767676 あたりがちょうど 4.5:1 付近の境目です。
コントラスト比はどう計算しますか？
各色の相対輝度 L（0.2126R+0.7152G+0.0722B、各チャンネルはガンマ展開済み）を求め、(明るい方+0.05) ÷ (暗い方+0.05) で算出します。白と黒なら最大の 21:1 になります。
「大きい文字」とは何pxからですか？
WCAGでは通常およそ18pt（約24px）以上、または太字で14pt（約18.66px）以上を「大きい文字」とし、AA 3:1・AAA 4.5:1 とゆるい基準が適用されます。
AAとAAAの違いは何ですか？
AAは一般的に求められる適合レベル、AAAはより高い水準です。通常テキストでAAは4.5:1、AAAは7:1が必要です。まずAAを満たすことを目標にするとよいでしょう。
前景色と背景色を入れ替えると比率は変わりますか？
変わりません。コントラスト比は明るい方と暗い方の輝度から計算するため、どちらを前景・背景にしても同じ値になります。「入れ替え」ボタンはプレビューの見え方を確認するためのものです。
入力した色は外部に送信されますか？
いいえ。色の計算はすべてブラウザ内で行われ、外部に送信されません。