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

Contrast Checker

文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。

文字色と背景色の組み合わせをWCAG 2.2とAPCAの両方で検査し、3種類の2色型色覚を模擬し、パレット全体を表として採点します。2つの基準を並べるのは、実際の組み合わせで答えが食い違うからで、その食い違いこそが役に立つ部分です。

🔒 ブラウザの中だけで動きますcontrastaccessibilitywcaga11y

文字色

背景色

文字サイズ 16pxウェイト

いろはにほへとちりぬるを。The quick brown fox jumps over the lazy dog.

WCAG 2.2

4.54:1

合格AA — 1.4.3 コントラスト (最低限)、通常の文字必要 4.5:1
不合格AAA — 1.4.6 コントラスト (高度)、通常の文字必要 7:1
合格1.4.11 非テキスト — アイコン・枠線・フォーカスリング必要 3:1

通常の文字として数えます。大きい文字は 24px から、ウェイト 700 なら 18.66px からです。いまアクセシビリティ関連の法令が参照している基準です。EN 301 549 も Section 508 も要件は WCAG を指しているので、監査で使われる数字もこれです。

APCA

Lc 71.6

明るい背景の上の暗い文字です。符号が極性です。WCAG と違って、2 色を入れ替えると答えが変わります。

到達水準: Lc 60 — 読めはする. 大きくすれば読めますが、16px で読み続ける用途には向きません。

この Lc では 16px・ウェイト 400 は足りません。

APCA 水準ごとの最小文字サイズ
水準	ウェイト 400	ウェイト 700
Lc 90	14px	12px
Lc 75	18px	14px
Lc 60	24px	18px
Lc 45	36px	24px
Lc 30	48px	36px

二つの基準は、もともと違う答えを出します

WCAG 2 の比は 2008 年の公式です。相対輝度の比に固定のフレア項を足したもので、二つの引数について対称です。APCA は知覚の応答をモデル化しています。極性に依存するのは、同じ輝度差でも明るい背景の暗い文字のほうが実際によく読めるからで、さらに文字サイズとウェイトを、後から別規則として付け足すのではなく問いの一部として扱います。

だから実際の組み合わせで判定が割れますが、その食い違いはどちらのバグでもありません。WCAG 2 は本当に読みにくい白地の中間グレーを通すことがあり、問題のない暗い地の暗い文字を落とすことがあります。いまアクセシビリティ関連の法令が参照しているのは WCAG 2.2 です。なので監査で回されるのもそちらです。読む人が実際に経験することをよく説明するのは APCA のほうです。通すかどうかは WCAG で決め、通ったものの中からどれを選ぶかは APCA で決めてください。

この組み合わせがその一例です。WCAG AA は合格と言い、APCA は 16px/400 で不十分と言います。

色覚

Viénot–Brettel–Mollon の射影を線形光で適用してシミュレートしています。よくある近道のようにガンマ符号化されたバイトへそのまま適用すると、2 色を実際より見分けやすく見せてしまいます。アクセシビリティの検査が間違えてよい方向ではありません。

サンプル

プロタノピア（L錐体なし、男性の約1%） · 4.54:1

サンプル

デューテラノピア（M錐体なし、男性の約1%） · 4.54:1

サンプル

トリタノピア（S錐体なし、約0.01%） · 4.54:1

サンプル

アクロマトプシア（色なし、約0.003%） · 4.54:1

使い方

2つの色を入れます
文字色と背景色を、どの表記法でも構わないので入れます。判定の上にある見本の段落が、指定した大きさと太さでその色で描かれます。
実際の大きさと太さに合わせます
WCAGは24px、太さ700なら18.66pxで基準が変わります。APCAは大きさと太さを、別の規則ではなく質問の一部として受け取ります。大きさが実際と違えば、どちらの答えもあまり意味を持ちません。
2つの判定を並べて読みます
監査を通すならWCAG、通ったものの中からどれを選ぶかはAPCAです。2つの判定が割れたときは、ページがはっきりそう言います。
パレット全体を一度に見ます
色を1行に1つずつ貼り付けると、N×Nの表が出ます。三角形ではなく正方形なのは、APCAが対称ではないからです。同じ2色でも、どちらが文字かによって点数が変わります。

よくある質問

どちらの基準に従うべきですか。

WCAG 2.2です。法令が参照しているのがそちらだからです。EN 301 549もSection 508もWCAGを指していて、監査で実際に回る数字もそれです。読む人の体験をよく説明するのはAPCAなので、すでに通っている組み合わせの中から選ぶときに使ってください。

WCAGとAPCAで判定が食い違うのはなぜですか。

WCAG 2の比は2008年の計算式です。相対輝度に固定のフレア項を足したもので、2つの引数について対称です。APCAは知覚をモデル化していて、極性によって値が変わり、明るい地の暗い文字は実際に読みやすくなりますし、大きさと太さも一緒に見ます。だからWCAGは読みにくい白地の中間グレーを通すことがあり、問題のない暗い地の暗い文字を落とすことがあります。