【Claude Code】目視の確認を自動チェックに Part3：配色の確認 — グレースケール・色の差・色覚

1. はじめに — 色が違っても、見分けられるとは限らない

生存曲線、推移の折れ線、群ごとの棒グラフ。TLF の図は、群を色で塗り分けることがよくあります。画面で見る分には、どの色もはっきり違って見えます。それでも、次の場面では見分けにくくなります。

• 白黒で印刷したとき：審査官が紙で読む、論文が白黒で刷られる
• 色覚の違いのある人が見るとき：日本人男性の約5%、女性の約0.2%
• 白い地の上に淡い色を置いたとき：プロジェクターや薄い印刷で消えてしまう

参照ページで見たとおり、米国 FDA も PDF の仕様で、明るい色はグレースケールのプリンターでうまく印刷されないので、提出前に試し刷りで確かめるよう求めています。

この回では、TLF Visual QC の「図の色」タブが、群に使う色の組を何で測り、どこで印を付けているかを見ていきます。

1. 4つの物差し — 明るさの差・色の差・色覚・白とのコントラスト
2. 例の配色7組で測った結果
3. 色覚のシミュレーションに使った方法と、選んだ理由
4. 代わりの色の提案（試行中）
5. Claude Code に任せたことと、人が決めたこと

• 7組ツールに入っている例の配色（群名は架空）
• 0.002ggplot2 の既定の色の組で、灰色にしたときの明るさの差（色の差は 34 もあるのに）
• 4.9赤と緑の組を、D型の色覚で見たときの色の差（ふつうに見ると 71.8）
• 2つ印が1つも付かなかった配色（Okabe-Ito と viridis）

2. 4つの物差し

色の組ごとに、次の4つを計算します。どれか1つでも目安を下回れば、その組に印を付けます。

物差し	測るもの	印を付ける目安（既定）
明るさの差（ΔL）	2色を灰色にしたときの明るさの違い	0.05 未満
色の差（ΔE2000）	人の目に感じる色の違い	10 未満
色覚での色の差	P型・D型・T型の見え方に変えてからの色の差	8 未満
白とのコントラスト	白い地の上で、その色がどれだけ目立つか	2 未満（色ごと）

目安の値は、ツールの既定です。絶対の基準ではなく、各社の図の作り方の決まりに合わせて見直してよい値です。

2-1. 明るさの差（ΔL）— 白黒で印刷したとき

色を灰色にしたときの明るさは、ウェブの読みやすさの基準（WCAG）で使われる 相対輝度 で測ります。0（黒）から1（白）の値で、赤・緑・青の重みを人の目の感じ方に合わせて足したものです。人の目は緑を明るく、青を暗く感じるので、同じ「強さ」の赤と青でも明るさは違います。

2色の相対輝度の差が 0.05 未満 なら、白黒で印刷すると同じような灰色になり、見分けにくくなります。

↻

2-2. 色の差（ΔE2000）— 人の目に感じる違い

色の違いを数字にする方法はいくつかありますが、ここでは国際照明委員会（CIE）が定めた CIEDE2000（ΔE2000） を使います。色を、人の目の感じ方に近い色空間（CIELAB）に移してから、明るさ・あざやかさ・色合いの違いを、それぞれの感じ方の癖を補正して合わせます。単純に RGB の値の差を取るより、人が「違う」と感じる度合いに近くなります。

ΔE2000 が 10 未満 の組は、色のままでも似て見えるとして印を付けます。式は長く、色相の角度の扱いなどで間違えやすいので、Sharma らの論文が実装の注意点と34組のテストデータを公開しています。ツールの実装は、このテストデータの34組すべてで、答えと小数第4位まで一致することを確かめています。2色の順番を入れ替えても同じ値になることも、あわせて確かめています。

2-3. 色覚での色の差 — P型・D型・T型

色を、色覚の違いのある人の見え方に変えてから（シミュレーション）、もう一度 ΔE2000 を測ります。

型	見え方の特徴	割合
P型（1型）	赤が暗く見え、赤と緑が見分けにくい	多い
D型（2型）	赤と緑が見分けにくい	最も多い
T型（3型）	青と黄が見分けにくい	まれ

色覚で変えたあとの ΔE2000 が 8 未満 の組に印を付けます。ツールの画面では、P・D・T の3つの見え方が1つの表に行として並ぶので、どの型で見分けにくいかが一度に分かります。

2-4. 白とのコントラスト — 淡い色

最後は組ではなく、色1つずつの物差しです。白い地の上で、その色がどれだけ目立つかを、WCAG のコントラスト比で測ります。ツールでは 2:1 未満 の色に印を付けます。参考までに、WCAG はグラフの線や図形など文字でない要素に 3:1 以上を求めています。ツールの目安はそれより緩いので、ウェブに載せる図などでは、WCAG の値と合わせて見るのがよいでしょう。

3. 例の配色7組で測った結果

ツールには、群名を架空にした例の配色が7組入っています。合格するものと引っかかるものの両方を入れてあります。

配色	群	印の付いた組	主な理由
Okabe-Ito	4	0 / 6	—
viridis	3	0 / 3	—
灰色の段階	4	0 / 6	組はすべて合格。いちばん淡い灰色（#BFBFBF）だけ白とのコントラストが 1.84
Tableau 10 の先頭4色	4	1 / 6	明るさの差（オレンジと青緑 0.025）
ggplot2 の既定	4	3 / 6	明るさの差（3組とも 0.008 未満）
赤・緑を含む配色	4	3 / 6	色覚（赤と緑：D型 4.9、緑とオレンジ：P型 1.9）、明るさの差（赤と青 0.009）
パステル	4	4 / 6	色覚・明るさの差。4色とも白とのコントラストが 2 未満（1.29〜1.72）

3-1. 色の差は大きいのに、灰色では同じ

いちばん分かりやすいのは ggplot2 の既定の4色です。色相を等間隔に回して選んだ色なので、画面で見ると、どの2色もはっきり違います。#F8766D（赤系）と #C77CFF（紫）の ΔE2000 は 34 あります。

ところが、相対輝度はどちらも約 0.34 で、差は 0.002 しかありません。色相だけを変えて明るさをそろえた配色は、白黒で印刷すると、ほぼ同じ灰色になります。

3-2. 赤と緑は、色覚で崩れる

赤（#D62728）と緑（#2CA02C）は、ふつうに見れば ΔE2000 が 71.8 で、まったく違う色です。D型の見え方に変えると 4.9 まで縮み、見分けにくくなります。同じ配色の緑とオレンジは、P型で 1.9 です。

一方、この赤と緑は灰色にしたときの明るさの差が 0.10 あり、白黒の印刷では見分けられます。白黒で大丈夫でも色覚で崩れる組、その逆の組がある ので、物差しを1つに絞れません。

3-3. 印が付かなかった配色

Okabe-Ito は、色覚の違いのある人にも見分けやすいように選ばれた配色で、6組とも印が付きませんでした。viridis も、明るさが端から端へ一方向に変わるように作られているので、灰色にしても順番が保たれ、3組とも合格です。

灰色の段階の配色は、組としてはすべて合格しますが、いちばん淡い灰色は白い地の上で薄くなります。色の組と、色1つずつの物差しを分けているのは、このためです。

4. 色覚のシミュレーションの方法と、選んだ理由

色覚の見え方を計算する方法は、いくつか公開されています。TLF Visual QC では、P型・D型と T型で別の論文の方法を使っています。

型	方法	理由
P型・D型	Viénot・Brettel・Mollon（1999）	二色覚の見え方の計算として広く使われてきた方法。赤と緑の見分けにくさを、図の配色の確認に使う形で示している
T型	Machado・Oliveira・Fernandes（2009）	Viénot の方法は P型・D型だけを扱うため。Machado の方法は3つの型を同じ考え方で扱え、色を1つの行列で変換できる

どちらも、論文に載っている式と値から実装しました。既存のソフトウェアから数値を取り出して使うことはしていません。式は論文で公開されていて誰でも使えますが、特定のソフトウェアの実装から取り出した値には、そのソフトウェアのライセンスがついて回るからです。

5. 代わりの色の提案（試行中）

印の付いた色について、ツールは 代わりの色の候補 を出せます。画面では「試行中（ベータ）」と表示しています。

選び方は次のとおりです。

1. 印の付いた色を1つ選んで「探す」を押す
2. 元の色のまわりで、明るさ・鮮やかさ・色合いを少しずつ変えた色をたくさん作る（明るさは 20〜85、色合いは全周48方向）
3. その色そのものが白い地で薄すぎず、配色のほかのすべての色との組で、4つの物差しをすべて満たす ものだけを残す
4. 元の色に近い順に、最大3つを選ぶ（互いに似すぎた候補は並べない）

元の色に近いものから選ぶのは、図の雰囲気や色の意味（赤系は赤系のまま、など）をできるだけ変えないためです。候補ごとに、元の色との差と、置き換えたあとにほかの色どうしの組で残る印の数を出します。

試行中としているのは、色の選び方には、物差しでは測れない決まりが多いからです。

• 会社や製品で決まった色がある（自社の薬は必ずこの色、など）
• 用量の順番や、実薬とプラセボの関係を色の濃さで表したい
• ほかの図や過去の報告書と、色をそろえたい

ツールが出すのは、あくまで候補です。どの色を使うかは、図を作る人が決めます。

6. Claude Code に任せたことと、人が決めたこと

任せたこと	人が決めたこと
相対輝度・ΔE2000・コントラスト比・色覚のシミュレーションの式の実装	どの物差しを使うか、印を付ける目安の値
公開のテストデータ（Sharma らの34組）での答え合わせ	色覚の方法をどの論文から取るか（ライセンスの考え方を含む）
例の配色7組の用意と、印の付き方の確認	例の配色に、合格するものと引っかかるものの両方を入れること
3つの色覚を1つの表に並べる画面	代わりの色の提案を「試行中」とし、候補にとどめること

式の実装は、答えのはっきりした仕事なので任せやすい部分です。ΔE2000 のように式の長いものでも、式の作者側が公開している答えと突き合わせれば、正しく書けたかを確かめられます。どの答えと突き合わせるかを決めるのは人の仕事です。

一方、どこに線を引くか と どの方法を正とするか は、人が決めました。とくに色覚の方法は、計算の正しさだけでなく、どこから式を持ってくるかというライセンスの問題もからむので、任せきりにはできません。

7. まとめ

• 色が違って見えても、白黒の印刷や色覚の違いで見分けにくくなることがある
• 色の組ごとに、明るさの差（相対輝度、0.05 未満）、色の差（ΔE2000、10 未満）、3つの色覚での色の差（8 未満）を測り、色1つずつに白とのコントラスト（2 未満）を測る
• ggplot2 の既定の色は、色の差が 34 あっても明るさの差は 0.002。赤と緑は D型で 4.9 まで縮む。白黒と色覚は別の物差しで見る必要がある
• 色覚のシミュレーションは、P型・D型に Viénot らの方法、T型に Machado らの方法を、論文の式から実装した
• 代わりの色は候補にとどめ、どの色を使うかは図を作る人が決める

見分けやすい色を選ぶ方法は、すでに論文や規格にあります。手間がかかっていたのは、それを毎回の図に当てはめて確かめることでした。

次のステップ

Part4 では、ここまでの計算をすべてブラウザの中で行い、帳票をどこにも送らない形で公開した設計を扱います。外への通信を止める仕組み、本番の環境でだけ起きた書体の不具合、通信を切っても動くようにしたこと、そして検証済みでないツールとしての位置づけを紹介します。