その配色、本当に読めてる？

デザインカンプを仕上げて「いい感じだな」と思った瞬間、隣の席の同僚が画面を覗き込んで一言。「これ、文字ぜんぜん読めないんだけど」。こういう経験、デザインやコーディングをやっていれば一度はあるよね。

自分の目で見て「読める」は、あてにならない。若い健常者の目は優秀すぎて、低コントラストの文字も難なく拾ってしまう。しかし日本には視覚に何らかの困難を抱える人が約164万人いる（厚生労働省「生活のしづらさなどに関する調査」2022年）。加齢による視力低下まで含めれば、対象者はさらに膨大だ。色の組み合わせが適切かどうかを「感覚」ではなく「数値」で判断する。それがコントラストチェッカーの役割だ。

このツールは、前景色と背景色のHEX値を入力するだけで、WCAG 2.xのコントラスト比とAA/AAA判定、さらにWCAG 3.0ドラフトで採用予定のAPCA-W3によるLc値を同時に表示する。現行基準と次世代基準を一画面で比較できるので、「今すぐ対応すべきライン」と「将来求められるライン」が一目で分かる。

海外ツール頼みの不便さを解消したかった

コントラストチェックの定番といえば、WebAIM Contrast CheckerやAdobe Color。どちらも優れたツールだが、UIが英語で、WCAG 2.xのコントラスト比しか表示しない。APCA値を確認するには別のツール（Myndex APCA Calculatorなど）に切り替える必要があった。

実務で困ったのは、デザインレビューの場でWCAG AA判定とAPCA判定を同時に見せたいとき。2つのツールを行ったり来たりして、スクリーンショットを並べて比較する。たかが配色チェックに何ステップかけているんだ、と思った。

もう一つの不満は、日本語UIの不在。JIS X 8341-3（Webアクセシビリティの国内規格）はWCAG 2.xをベースにしているのに、判定結果を日本語で説明してくれるツールがほとんどない。「AA Large PASS」と表示されても、クライアントに「大テキストならAA適合」と口頭で翻訳する手間が発生する。

APCAは2024年以降、W3Cのドラフトで急速に注目度が上がっている。WCAG 2.xとAPCAでは判定結果が食い違うケースもあり、両方を並べないと正確な状況判断ができない。「現行基準と次世代基準を1画面で、日本語で」。それがこのツールを作った動機だ。

コントラスト比とは何か ── 色の「読みやすさ」を数値化する仕組み

相対輝度とは

コントラスト比を理解するには、まず「相対輝度（Relative Luminance）」を知る必要がある。

日常のたとえで考えてみて。部屋の照明を全部消した状態が輝度0、真昼の太陽光が輝度MAX。人間の目が「明るい」と感じる度合いを0から1の数値で表したものが相対輝度だ。

Webの色はsRGB（赤・緑・青の3チャネル）で表現される。各チャネルの値（0-255）をまずリニア化（ガンマ補正の逆変換）し、人間の目の感度に合わせた重み付けで合成する。

` sRGBtoLinear(c): c <= 0.04045 の場合: c / 12.92 それ以外: ((c + 0.055) / 1.055) ^ 2.4

相対輝度 Y = 0.2126 * R + 0.7152 * G + 0.0722 * B `

緑の係数が0.7152と圧倒的に大きいのは、人間の目が緑の光に最も敏感だから。黄緑色の蛍光ペンが異様に目立つのも同じ原理だ。

WCAG 2.x コントラスト比の計算

WCAG（Web Content Accessibility Guidelines）が定めるコントラスト比は、2色の相対輝度から算出する。

コントラスト比 = (Y_bright + 0.05) / (Y_dark + 0.05)

0.05を加算しているのは、完全な黒（Y=0）同士で割り算がゼロ除算になるのを防ぐため。結果は1:1（同一色）から21:1（黒と白）の範囲になる。

AA と AAA の違い

WCAG 2.xでは、コントラスト比に対して3段階の閾値を設けている。

判定	通常テキスト	大テキスト（18pt以上/14pt太字以上）	UI部品
AA	4.5:1以上	3.0:1以上	3.0:1以上
AAA	7.0:1以上	4.5:1以上	-

AAは「最低限クリアすべきライン」、AAAは「より高いアクセシビリティを目指すライン」。JIS X 8341-3の適合レベルAAでも、WCAG 2.xのAA基準が求められる。

APCA コントラスト（Lc値）とは

APCA（Accessible Perceptual Contrast Algorithm）は、WCAG 3.0のドラフトで採用が検討されている次世代のコントラスト測定方式だ。APCA公式リポジトリで仕様が公開されている。

WCAG 2.xのコントラスト比は「前景と背景を入れ替えても同じ値」になる。しかし人間の知覚はそうではない。白背景に暗いテキストと、暗い背景に白テキストでは、同じ色の組み合わせでも読みやすさが異なる。APCAはこの非対称性を反映し、前景と背景の役割によって異なるLc値を返す。

Lc値の目安は以下の通り。

Lc値（絶対値）	用途
75以上	本文テキスト推奨
60以上	本文テキスト最低限
45以上	見出し・大テキストのみ
45未満	テキスト用途には不十分

WCAG 2.xでAAをクリアしていてもAPCAで不十分と判定されるケース、またその逆のケースもある。だからこそ両方を同時に確認する意味がある。

コントラスト比が足りないと何が起きるか

法的リスク ── JIS X 8341-3 と障害者差別解消法

日本では2024年4月の改正障害者差別解消法の施行により、民間事業者にも合理的配慮の提供が義務化された。Webアクセシビリティの国内規格であるJIS X 8341-3:2016はWCAG 2.0をベースとしており、コントラスト比4.5:1（AA基準）を満たさないテキストは「アクセシビリティ上の不備」と判断される可能性がある。

海外に目を向けると、状況はさらに厳しい。米国ではADA（Americans with Disabilities Act）に基づくWeb訴訟が年間4,000件を超える（UsableNet調査, 2023年）。コントラスト不足は「最も指摘されやすい違反項目」の一つだ。

実害 ── 離脱率とコンバージョンへの直撃

コントラストが低い配色は、視覚障害者だけの問題ではない。屋外でスマホを使うとき、日光でディスプレイが見えにくくなった経験はないだろうか。コントラスト比3:1を下回る配色は、屋外環境や低品質ディスプレイでほぼ読めなくなる。

ECサイトで「カートに入れる」ボタンの文字色と背景色のコントラストが不足していたために、コンバージョン率が下がっていた事例は珍しくない。デザインの美しさを追求してパステルカラーを多用した結果、情報が伝わらない。見た目の洗練さとアクセシビリティのバランスは、数値で管理しないと崩壊する。

設計段階で確認する意味

コントラスト問題は、コーディング後やリリース後に発覚するとダメージが大きい。デザインシステムのカラーパレット策定時、つまり最上流の段階でチェックしておけば、下流工程での手戻りがゼロになる。4.5:1のラインを知っているだけで、「この配色は大丈夫？」という不毛なやり取りが消える。

配色チェックが威力を発揮する4つの場面

Webサイト・アプリのUIデザイン

デザインカンプのテキスト色と背景色を入力して即判定。デザインシステムのカラートークンを策定する段階で全ペアを検証しておけば、実装フェーズでの「この色、AA通らないので変えてください」問題が消える。

プレゼン資料・社内ドキュメント

会議室のプロジェクターは色が飛びやすい。薄いグレーの文字を白背景に載せた資料は、スクリーン投影するとほぼ見えない。プレゼン資料の配色チェックにも使える。

デジタルサイネージ・屋外広告

屋外環境では直射日光の影響でディスプレイの実効コントラストが大幅に低下する。室内で4.5:1ギリギリの配色は、屋外では完全に読めなくなる。サイネージ用のデザインは7:1以上を目安にすると安全だ。

アクセシビリティ監査・レビュー

クライアントから「JIS X 8341-3適合を証明してほしい」と求められたとき、全ページの配色ペアを検証してレポートにまとめる作業が発生する。このツールなら結果をコピーしてそのままドキュメントに貼り付けられる。

3ステップで配色をチェック

ステップ1: 前景色を入力する

テキストに使う色のHEXコードを入力する（例: #333333）。プリセットから定番の配色を選ぶこともできる。

ステップ2: 背景色を入力する

背景に使う色のHEXコードを入力する（例: #FFFFFF）。入れ替えボタンで前景と背景を瞬時にスワップ可能。

ステップ3: 判定結果を確認する

WCAG 2.xのコントラスト比とAA/AAA適合判定、APCAのLc値が即座に表示される。プレビューエリアで実際の文字の見え方も確認できる。結果はワンタップでクリップボードにコピー。

代表的な6パターンの配色を判定してみる

実際に6つの配色パターンを入力して、WCAG 2.xとAPCAの判定結果を見てみよう。

ケース1: 黒 on 白 ── 最大コントラストの基準点

入力: 前景 #000000 / 背景 #FFFFFF
結果: WCAG比 21.00:1 / APCA Lc = 106.0
判定: 通常テキストAA PASS / AAA PASS / 大テキストAA PASS / AAA PASS / UI AA PASS
解釈: 理論上の最大コントラスト。すべての基準を余裕でクリア。ただし純黒×純白はコントラストが強すぎて、長文を読むと目が疲れるという指摘もある。本文には #333333 on #FFFFFF 程度が実用的だ。

ケース2: #767676 on 白 ── WCAG AA境界値のグレー

入力: 前景 #767676 / 背景 #FFFFFF
結果: WCAG比 4.54:1 / APCA Lc = 68.2
判定: 通常テキストAA PASS / AAA FAIL / 大テキストAA PASS / AAA PASS / UI AA PASS
解釈: #767676 はWCAG AAをギリギリ満たす「最も明るいグレー」として有名。デザイナーの間では「AAボーダーライングレー」と呼ばれることもある。AAAには届かないため、アクセシビリティの高い基準を目指すなら #595959 程度まで暗くする必要がある。APCA Lc=68.2は本文最低限（60）をクリアしているが、推奨（75）には届かない。

ケース3: 白 on 青 ── アクセントカラーの上に白文字を載せる

入力: 前景 #FFFFFF / 背景 #2E5FF5
結果: WCAG比 5.16:1 / APCA Lc = -77.6
判定: 通常テキストAA PASS / AAA FAIL / 大テキストAA PASS / AAA PASS / UI AA PASS
解釈: 青いボタンに白文字を載せるよくあるパターン。WCAG AAはクリア。APCAのLc値がマイナスなのは「明るいテキスト on 暗い背景」の極性を示している。絶対値77.6は本文推奨（75）を超えており、APCAの観点でも良好だ。

ケース4: 白 on 黒 ── ダークモードの基本

入力: 前景 #FFFFFF / 背景 #000000
結果: WCAG比 21.00:1 / APCA Lc = -107.9
判定: 通常テキストAA PASS / AAA PASS / すべてPASS
解釈: ケース1の前景と背景を入れ替えた形。WCAG比は21.00:1で同じだが、APCA Lcは106.0と-107.9で異なる。これがAPCAの特徴である非対称性だ。暗い背景に明るい文字の方がわずかにコントラストが高いと評価される。ダークモードのデザインでは、この非対称性を考慮に入れると精度の高い配色判断ができる。

ケース5: リンク青 on 白 ── テキストリンクの定番色

入力: 前景 #0066CC / 背景 #FFFFFF
結果: WCAG比 5.57:1 / APCA Lc = 74.3
判定: 通常テキストAA PASS / AAA FAIL / 大テキストAA PASS / AAA PASS / UI AA PASS
解釈: #0066CC はリンク色として広く使われるブルー。WCAG AAを余裕でクリア。APCA Lc=74.3は推奨の75にわずかに届かないが、最低限の60は大きく超えている。本文リンクとして実用上問題ない水準だ。

ケース6: 赤 on 白 ── エラーメッセージ・警告色

入力: 前景 #CC0000 / 背景 #FFFFFF
結果: WCAG比 5.89:1 / APCA Lc = 75.9
判定: 通常テキストAA PASS / AAA FAIL / 大テキストAA PASS / AAA PASS / UI AA PASS
解釈: エラーメッセージに使われる赤。WCAG AAをクリアし、APCA Lc=75.9は本文推奨の75を超えている。ただし赤は色覚多様性（P型・D型）の影響を受けやすい色だ。コントラスト比が十分でも、色だけで情報を伝えるのは避け、アイコンやテキストラベルを併用するのがベストプラクティスだ。

コントラスト算出の仕組み ── WCAG 2.x と APCA-W3 の2方式比較

なぜ2つの方式を同時表示するのか

コントラストの測定方式には、大きく分けて2つのアプローチがある。

方式1: WCAG 2.x 相対輝度比。現行のWeb標準で、計算がシンプルで広く普及している。ただし「前景と背景を入れ替えても同じ値」になるため、人間の知覚の非対称性を反映できない弱点がある。

方式2: APCA-W3。WCAG 3.0ドラフトで採用が検討されている次世代方式。前景と背景の極性（明るい文字on暗い背景 vs 暗い文字on明るい背景）を区別し、より知覚に近い判定ができる。ただしまだドラフト段階であり、法的な基準として確定していない。

本ツールでは両方を採用した。理由は明確で、「今すぐ法的に求められる基準」と「近い将来の基準」を1画面で比較できないと、デザイン判断が片手落ちになるからだ。

WCAG 2.x の計算フロー

HEX → sRGB（0-1）に変換例: #767676 → R=0.4627, G=0.4627, B=0.4627
各チャネルをリニア化 sRGBtoLinear(0.4627) = ((0.4627+0.055)/1.055)^2.4 = 0.1764
相対輝度を算出 Y = 0.21260.1764 + 0.71520.1764 + 0.0722*0.1764 Y = 0.1764
コントラスト比を算出（背景: #FFFFFF, Y_bg=1.0） ratio = (1.0 + 0.05) / (0.1764 + 0.05) ratio = 1.05 / 0.2264 ratio ≈ 4.54:1 `

APCA-W3 の計算フロー

APCAは同じリニア化ステップの後、異なる指数と係数を使う。Myndex SAPC-APCAのアルゴリズムに準拠している。

sRGB → リニア化 → Y算出（WCAG 2.xと同様だが係数が微妙に異なる） Y = 0.2126729R + 0.7151522G + 0.0721750*B
低輝度クランプ Y < 0.022 の場合: Y = Y + (0.022 - Y)^1.414
極性判定 & SAPC算出暗い文字 on 明るい背景（dark on light）: SAPC = (Ybg^0.56 - Yfg^0.57) * 1.14 Lc = (SAPC - 0.027) * 100

明るい文字 on 暗い背景（light on dark）: SAPC = (Ybg^0.65 - Yfg^0.62) * 1.14 Lc = (SAPC + 0.027) * 100
出力クランプ |SAPC| < 0.1 の場合: Lc = 0（知覚閾値以下） `

計算例: #767676 on #FFFFFF

WCAG 2.x では ratio = 4.54:1。APCA では Lc = 68.2。WCAG AAは通過するが、APCA本文推奨（75以上）には届かない。この「WCAG的にはOKだがAPCA的には微妙」というゾーンが、2つの方式を同時表示する価値を端的に示している。

将来WCAG 3.0が正式勧告されたとき、現在AA適合の配色が新基準で不適合になる可能性がある。今のうちに両方の値を確認しておくことで、将来の基準変更にも慌てず対応できる。

WebAIM・Adobe Colorとどう違うのか

コントラスト比チェッカーといえば、WebAIM Contrast Checker が定番中の定番。海外製で英語UIだが、WCAG 2.x の AA/AAA判定をサクッと出してくれるので愛用者は多い。Adobe の Color Contrast Analyzer もデザイナーに人気がある。

ただ、これらのツールには共通の弱点がある。APCA（Accessible Perceptual Contrast Algorithm）に対応していない点だ。APCAはWCAG 3.0ドラフトで採用が検討されている次世代のコントラスト評価方式で、人間の知覚モデルに基づいた精度の高い判定ができる。現行のWCAG 2.xだけ見ていると、将来の基準変更に対応できない。

本ツールはWCAG 2.xとAPCAの両方の判定結果を並べて表示する。これが最大の差別化ポイント。「今の基準でOKか」と「次世代基準でどう評価されるか」を一画面で比較できるので、先を見据えた配色設計が可能になる。

もうひとつの違いは日本語UIであること。英語の "Passes AA" "Fails AAA" を読み解く必要がなく、通常テキスト・大テキスト・UI部品ごとの適合状況が日本語ラベルで一目瞭然。プリセット配色から選んですぐ試せるのも、初めてコントラストチェックをする人にはありがたいはずだ。

比較項目	WebAIM	Adobe Color	本ツール
WCAG 2.x 判定	○	○	○
APCA (Lc) 判定	×	×	○
日本語UI	×	×	○
プリセット配色	×	△（テーマ）	○
前景背景入替	○	○	○
結果コピー	×	×	○

コントラストと色覚の豆知識

加齢とコントラスト感度の低下

人間のコントラスト感度は20代をピークに徐々に低下する。60代になると、若年層の約半分程度まで落ちるという研究もある。水晶体の黄変で青色系の識別力が特に弱まるため、薄い青文字に白背景といった組み合わせは高齢ユーザーにとってかなり厳しい。日本の65歳以上人口は約3,600万人（総務省統計局、2024年推計）。コントラスト確保は「誰かのため」ではなく「多くの人のため」の話だ。

参考: 加齢と視覚機能 - 日本眼科学会

ダークモードの落とし穴

ダークモードが普及して「目に優しい」と思われがちだが、実はコントラスト設計を間違えると逆効果になる。純白(#FFFFFF)テキストを純黒(#000000)背景に載せると、コントラスト比は最大の21:1になるが、ハレーション（光の滲み）が起きて長文が読みにくくなる。実務では背景を #121212 程度、テキストを #E0E0E0 程度に抑えてコントラスト比15:1前後に落とすのが定石。Googleの Material Design Dark Theme ガイドラインでも同様の推奨がされている。

WCAG 2.x の「大テキスト」基準はどこから？

WCAG 2.xでは18pt（24px）以上、または14pt太字（18.67px bold）以上を「大テキスト」と定義し、コントラスト基準を緩和している。これは大きい文字ほどストローク幅が太くなり、背景との境界がはっきりするため。逆に言えば、12pxや14pxの本文テキストには4.5:1以上のコントラスト比が必須だということ。見出しだけAAを通してボディテキストが不適合、という見落としは意外と多い。

配色チェックを効率化する5つのTips

デザインシステムの配色トークンを一括チェックする -- プロジェクトの色定義（primary, secondary, surface, on-surface等）をリストアップし、想定される組み合わせをすべて本ツールに通す。リリース直前に気づくよりずっと手戻りが少ない
ボーダーラインの配色はAPCA値も見る -- WCAG 2.xで4.5:1ギリギリの配色は、APCAだとLc 60未満で「本文には不十分」と判定されることがある。将来のWCAG 3.0移行を見据えるなら、APCA Lc 75以上を目安にしておくと安全
前景と背景を入れ替えて両方チェック -- ボタンのhover状態やフォーカス状態では、前景と背景の関係が反転することがある。入れ替えボタンをワンタップして逆パターンもすぐ確認しておこう
プリセット配色で直感をキャリブレーション -- 「#767676 on 白」はWCAG AA境界（4.54:1）の有名な値。まずプリセットで基準感覚を掴んでから、自分の配色を評価すると判断がブレにくい
結果コピーでレビューに添付 -- デザインレビューやPRのコメントに、コントラスト比とAA/AAA判定をテキストで貼り付けられる。「根拠付きの配色提案」ができるので、チーム内の合意形成が早くなる

よくある質問

APCAの「Lc値」とWCAG 2.xの「コントラスト比」は何が違う？

WCAG 2.xのコントラスト比は2色の相対輝度の比率で、前景と背景を入れ替えても同じ値になる。一方、APCAのLc値は人間の知覚モデルに基づいており、極性（polarity）を考慮する。暗い背景に明るい文字を置く場合と、明るい背景に暗い文字を置く場合で異なるLc値が出る。これは実際の視認性をより正確に反映している。なお、APCAはWCAG 3.0のドラフト段階であり、現時点で法的拘束力があるのはWCAG 2.xのコントラスト比のほうだ。

「大テキスト」の具体的なサイズ基準は？

WCAG 2.xの定義では、18pt（24px）以上、または14pt太字（約18.67px bold）以上が大テキストに該当する。大テキスト判定されると、AA基準が4.5:1から3:1に、AAA基準が7:1から4.5:1に緩和される。CSSで font-size: 1.5rem（24px）以上にしている見出しは大テキスト基準で評価してOK。ただし、ブラウザのデフォルトフォントサイズが16pxでない環境もあるので、px指定との乖離には注意が必要だ。

色覚多様性（色弱・色覚異常）への対応もこのツールでできる？

現時点では色覚多様性のシミュレーション機能は搭載していない。コントラスト比の確保は色覚多様性ユーザーにとっても重要だが、「赤と緑の区別がつきにくい」といった色相の問題は別のアプローチが必要になる。色覚シミュレーションには Coblis などの専用ツールを併用してほしい。コントラスト比 + 色相差の両面からチェックするのがベストプラクティスだ。

入力した色データはサーバーに送信される？

一切送信されない。HEXの解析もコントラスト比の計算も、すべてブラウザ上のJavaScriptで完結している。入力した色データがサーバーやクラウドに保存・送信されることはないので、社内プロジェクトの配色を安心してチェックできる。

JIS X 8341-3とWCAGの関係は？

JIS X 8341-3:2016は、WCAG 2.0を日本語に翻訳・JIS化した規格だ。コントラスト比の基準値（AA 4.5:1、AAA 7:1等）はWCAG 2.0と同一。日本の公的機関のWebサイトはこのJIS規格への準拠が求められるため、本ツールでWCAG 2.x AA以上を確認すれば、JIS X 8341-3のコントラスト要件も同時に満たせることになる。

まとめ -- 配色の「なんとなく」を数値で裏づける

コントラスト比の確認は、アクセシビリティ対応の第一歩であり、もっともコストの低い改善手段でもある。HEX値を2つ入力するだけでWCAG 2.xの適合レベルとAPCAのLc値が即座にわかるこのツールを、デザインワークフローに組み込んでみてほしい。

色の変換や検索が必要なら、マンセル値HEX変換ブリッジ、PCCS値HEX変換ブリッジ、RALカラーHEX変換ブリッジ、JIS慣用色名検索と組み合わせると、色体系の変換からコントラスト判定まで一気通貫で作業が完結する。

不具合や要望があれば、X (@MahiroMemo)から気軽に教えて。

色の入力

プリセット

プレビュー

WCAG 2.x 判定

APCA 判定WCAG 3.0 ドラフト