色覚異常に配慮したグラフの作り方

グラフは技術的に正しくても、読み手に伝わらないことがあります。よくある原因は、色にすべての役割を背負わせてしまうことです。赤い線がある意味を、緑の線が別の意味を表し、凡例だけが手がかりになっている、という状態です。色覚特性のある人にとって——そして、まぶしい場所や画質の悪い画面、白黒でグラフを見る多くの人にとって——これは不要な壁を生みます。

解決は、色を使うのをやめることではありません。色を複数ある手がかりのひとつとして使うことです。このガイドでは、その原則をグラフ、ダッシュボード、地図、インフォグラフィックの実際の判断に落とし込みます。

中心となる原則：色を唯一の手がかりにしない

WCAG達成基準1.4.1は、情報の伝達、動作の指示、応答の促し、視覚的な要素の区別において、色が唯一の視覚的手段であってはならないと定めています。データグラフィックでは、読み手が色相を識別しなくても、区分、系列、状態、意味を見分けられる必要がある、ということです。

よい代替手段には次のものがあります。

• 直接の文字ラベルと数値
• 線や点でのマーカー形状の違い
• 実線、破線、点線という線種
• 棒や領域でのパターン、質感、輪郭線
• 分かりやすいアイコンと説明的な凡例の文言
• 同じ要点を伝えるデータ表や文章での要約

最適な組み合わせは、グラフの種類と、読み手が概要を素早くつかみたいのか正確な値が必要なのかによって変わります。

問いを軸にグラフを組み立てる

色を選ぶ前に、そのグラフの主旨を一文で書いてみてください。たとえば「売上はすべての地域で伸び、西部の伸びがもっとも大きい」といった具合です。そのうえで、グラフをグレースケールで見たときに読み手がその問いに答えられるかを確かめます。

答えが「いいえ」なら、色以外の手がかりを加えてください。この一手間で、もっともよくあるアクセシビリティの失敗——見た目は美しいが情報を色相だけで符号化しているパレット——を防げます。

離れた凡例より、直接のラベルを

凡例は、小さな色見本とグラフ上の要素を読み手に照合させます。それも何度も、です。色が似ていたり線が交差していたりすると、いっそう難しくなります。余白があるなら、線の終点に系列名を書き、棒の横に数値を添え、重要な点には直接注記を入れてください。

たとえば、青・オレンジ・緑の3本の線と下部の凡例という構成の代わりに、各線の最後の点の隣に区分名を置きます。ラベルは、別の系列と取り違えられない程度に近づけてください。色は役立ち続けますが、識別を担うのは文字になります。

グラフの種類に応じた重ねがけ

折れ線グラフ

線種、マーカー形状、終点のラベルを組み合わせます。丸印の実線、四角印の破線、三角印の点線は、色が似て見えても区別できます。

1つのグラフに系列を詰め込みすぎないでください。系列が多いときは、密な凡例を読み解いてもらうより、スモールマルチプル（尺度をそろえた複数の小さなグラフ）を検討します。

棒グラフ

区分名と数値を直接示します。同じグループ内で区別すべき区分を棒で表すなら、色に加えてパターンや明確な輪郭線を足してください。W3CのG111は、棒に色とパターンを併用する手法を具体的に説明しています。

積み上げ棒では、可能な範囲で各区分に直接ラベルを付け、補助の表を添えてください。細い区分は、よいパレットを使っても誰にとっても読みにくいものです。

散布図・バブルチャート

マーカー形状と色を組み合わせ、マーカーが埋もれない十分な大きさとコントラストを確保します。塗りが淡い場合や背景が込み入っている場合は、点に輪郭線を付けてください。点が重なるときは、絞り込み、データ表、あるいはグループを分けた別の表示を用意します。

地図・ヒートマップ

塗りの色に加えて、ラベル、境界線、記号、パターンを使います。たとえば路線図では、各路線の色に特徴的な駅の記号を組み合わせられます。塗り分け地図では、微妙な明暗のグラデーションだけに主旨を委ねないでください。目に見える凡例、数値、そして表か文章のまとめを添えます。

色相の違いだけでなく、コントラストを設計する

色は色相が違っても明度が近いことがあり、その場合はグレースケールや色覚の違いのもとで混ざってしまいます。コントラストは、細い線、小さなマーカー、グラフの境界、文字でとくに重要です。

グラフを理解するのに必要な非テキストの図形要素については、WCAGの非テキストコントラストの考え方では、隣接する色に対して一般に3:1という基準が用いられます。文脈も重要で、ラベルや同等の表があれば、読み手が図形そのものを見分けなくても情報が伝わることがあります。コントラストの確認は、ラベルや重ねがけの代わりではなく、デザインレビューの一部として位置づけてください。

インターフェースの文字や単純な視覚要素については、コントラストチェッカーで前景と背景のコントラストを確かめられます。そのうえで、完成したグラフ全体を見てください。実際のレイアウトには、要素の隣接、細い線、ホバー時の状態、重なりなど、色のペアを1つ確認するだけでは捉えられない要素が現れます。

図の背後にあるデータを渡す

グラフは要約であって、データそのものへのアクセスの代わりではありません。重要な判断や主張を担うグラフには、次のいずれか（または複数）を添えてください。

• 区分と数値を載せた、近くに置いた表
• 主要な示唆を簡潔にまとめた文章
• CSVなど、アクセスしやすい形式のダウンロード
• 複雑な視覚的関係についての詳しい説明文
• インタラクティブなグラフでは、キーボードで操作できるツールチップやフォーカス可能なデータ表示

これはスクリーンリーダーの利用者にも、すべての視覚的な符号化を見分けられない人にも役立ちます。棒の高さや円の扇形を目分量で読まなくても、主旨を確かめられるようになります。

実践的なレビュー用チェックリスト

レポート、プレゼンテーション、製品ダッシュボード、記事を公開する前にお使いください。

• タイトルは、何についてのグラフで、どの期間かを示していますか
• 各系列・各区分を、色だけに頼らず識別できますか
• 重要な数値は、ラベル化、表への掲載、近くの文章での説明のいずれかがされていますか
• 線、マーカー、棒、凡例は、接する・重なる箇所で十分なコントラストがありますか
• ラベルは通常の拡大率と小さな画面で読めますか
• 「良好」「不良」のような、文字やアイコンのない赤／緑の状態表示を避けていますか
• キーボード利用者は、インタラクティブなグラフの情報にたどり着けますか
• グレースケールや色覚シミュレーションでの確認で、あいまいな要素は見つかりませんでしたか

実際の内容で、実際の人に試す

自動チェックとシミュレーションは早い段階の警告として有用ですが、そのグラフがすべての人に伝わる証明にはなりません。完成したグラフを実寸で、実際に掲載される製品や文書の中で試してください。参加者に、助言なしで、もっとも重要な系列、最大の値、そして要点を答えてもらいます。

当サイトの色覚シミュレーターは、いくつかの一般的な色覚の違いのもとで画像がどう見えうるかを確かめる助けになります。ユーザーリサーチやWCAG評価の代わりではなく、追加のレビュー手順として位置づけてください。

より広いインターフェースの指針については、色覚異常に配慮したデザインをご覧ください。

例：状態を示すグラフの改善

5つの部署が並ぶダッシュボードで、緑の棒は目標達成、赤の棒は未達、黄の棒は要注意を表しているとします。よりアクセシブルな版では、次のようにできます。

1. 各棒に状態の言葉を添える：「目標達成」「要注意」「未達」
2. ラベルにアイコン（チェック、警告の三角、矢印など）を使い、意味を説明する文字を添える
3. 2つ目の視覚的手がかりとして、パターンや輪郭線を使う
4. 実際の割合と目標値を表示する
5. グラフの下に、部署・現在値・目標・状態を並べた表を置く

多くの利用者にとって、色は依然としてパターンを素早く読み取る助けになります。ただ、それが理解への唯一の道ではなくなる、というだけです。

まとめ

アクセシブルなグラフは、伝えたいことを揺るぎないものにします。直接のラベル、パターン、線種、コントラスト、そして同等のデータがあれば、色覚特性のある人も他の人と同じ情報を理解できます。そしてそれは、あなたの成果物を読み手全体にとってより明快なものにしてくれます。