色覚多様性に配慮した図解の作り方 — 画像で実現する可読性
色だけで情報を伝えると、色覚タイプによって見分けづらい図解になります。線種・形状・注釈・明度差を 画像そのものに織り込むと、再配布や縮小でも可読性が保てます。本稿は実務の落とし所を短くまとめます。
要点（TL;DR）
- 色だけで区別しない：線種/形状/直接ラベルを併用。
- 明度差でコントラストを確保（WCAG 4.5:1目安）。
- 小さな文字/線は太めに、エッジは1px以上。
1. 実装の型
- 凡例だけに頼らず直接ラベルを多用。
- 似た色は線種/形状で差別化。
- 背景はうるさくしない。明度差で読みやすく。
2. ケーススタディ
折れ線グラフで系列が混同された例。色差を保ったまま、片方を点線、もう片方を三角マーカーに。 凡例に加え各線の近くへ直接ラベルを追加し、縮小表示でも判読できました。
3. 落とし穴とチェック
- 色相差だけに頼る。
- 凡例と線が遠く、対応が分かりづらい。
- 縮小時に線が消える（太さ不足）。
4. FAQ
推奨フォント/サイズは？
UIと統一しつつ、図中は本文より+1段。最小でも11–12pxを確保します。
印刷でも見える？
印刷はppi/DPIが関与します。A4の目安は A4印刷ガイド を参照。
5. まとめ：色＋もう1段で伝える
色だけに頼らず、線種/形状/直接ラベルで“読みやすさ”を保ちます。保存は /compressor と /compare で仕上げを確認しましょう。