グラフを色覚の違いに配慮して見分けやすくする方法

TIPS

グラフを青・緑・赤などで色分けしても、人によっては系列の違いが分かりにくい場合があります。色覚にはさまざまな特性があり、画面の明るさや印刷条件によっても色の見え方は変わります。グラフを見分けやすくするには、色を選ぶだけでなく、無地と斜線などの模様、系列名、数値を組み合わせることが重要です。今回は2系列の横棒グラフを例に、色を区別しなくても値を読み取れる作り方を説明します。

色覚の違いに備えるなら色だけで系列を区別しない

WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）の「Use of Color」は、情報を色だけで区別しないことを求めるレベルAの基準です。例えばグラフの凡例が「青＝会場、茶色＝オンライン」という色見本だけなら、色を見分けづらい人にはどちらの棒か判断しにくくなります。

棒グラフなら、一方を無地、もう一方を斜線模様にし、各棒のすぐ横へ「会場 30件」のような系列名と数値を表示できます。折れ線グラフなら実線と破線、丸や四角の点記号を組み合わせる方法もあります。離れた凡例まで目を戻さずに済む直接ラベルは、色覚の違いがない人にも数値を比較しやすくする場合があります。

さらに、グラフの元データをHTMLの表として載せれば、色や模様を読み取りにくい人も数値を確認できます。W3Cのアクセシビリティ資料では、複雑なグラフの情報を言葉や表で補うことが勧められています。今回は架空のデータを使い、グラフと表に同じ値を記載します。

会場とオンラインの申込み件数を横棒で比較する例

架空の講座で4〜6月の申込み経路を比較します。会場は4月30件・5月40件・6月50件、オンラインは45件・55件・60件です。どの月もオンラインの件数が会場より多いことを、棒の長さと数値の両方から確認できるようにします。

グラフの面には白#FFFFFF、棒の残り部分にはごく薄い青灰色#F8FAFCを使います。系列名・数字は濃い青灰色#1F2937、説明にはグレー#475569を選びます。会場の棒は青#1D4ED8の無地、オンラインの棒は茶色#92400Eと淡い黄色#FEF3C7による斜線模様です。棒の外枠と目盛りの範囲を示す線は、必要な輪郭が消えないように濃い色で残します。

<figure class="channel-report">
  <figcaption>申込み経路別の月間件数（架空のデータ）</figcaption>
  <p>すべての棒は0〜60件の共通目盛りで表示しています。</p>
  <div class="channel-bars" aria-hidden="true">
    <div class="channel-month">
      <h4>4月</h4>
      <div class="channel-row">
        <span>会場 30件</span>
        <div class="channel-track">
          <span class="channel-fill channel-fill--venue"
                style="width:50%"></span>
        </div>
      </div>
      <div class="channel-row">
        <span>オンライン 45件</span>
        <div class="channel-track">
          <span class="channel-fill channel-fill--online"
                style="width:75%"></span>
        </div>
      </div>
    </div>
    <div class="channel-month">
      <h4>5月</h4>
      <div class="channel-row">
        <span>会場 40件</span>
        <div class="channel-track">
          <span class="channel-fill channel-fill--venue"
                style="width:66.67%"></span>
        </div>
      </div>
      <div class="channel-row">
        <span>オンライン 55件</span>
        <div class="channel-track">
          <span class="channel-fill channel-fill--online"
                style="width:91.67%"></span>
        </div>
      </div>
    </div>
    <div class="channel-month">
      <h4>6月</h4>
      <div class="channel-row">
        <span>会場 50件</span>
        <div class="channel-track">
          <span class="channel-fill channel-fill--venue"
                style="width:83.33%"></span>
        </div>
      </div>
      <div class="channel-row">
        <span>オンライン 60件</span>
        <div class="channel-track">
          <span class="channel-fill channel-fill--online"
                style="width:100%"></span>
        </div>
      </div>
    </div>
  </div>
  <table class="channel-table">
    <caption>月別申込み件数のデータ表（架空）</caption>
    <thead>
      <tr><th scope="col">月</th><th scope="col">会場</th><th scope="col">オンライン</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">4月</th><td>30件</td><td>45件</td></tr>
      <tr><th scope="row">5月</th><td>40件</td><td>55件</td></tr>
      <tr><th scope="row">6月</th><td>50件</td><td>60件</td></tr>
    </tbody>
  </table>
</figure>

.channel-report {
  max-width: 48rem;
  padding: 24px;
  background-color: ■#FFFFFF;
  color: ■#1F2937;
}
.channel-report figcaption { font-weight: 700; }
.channel-report p { color: ■#475569; }
.channel-month { margin-top: 20px; }
.channel-month h4 { margin: 0 0 8px; }
.channel-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.channel-track {
  height: 24px;
  border: 2px solid ■#64748B;
  background-color: ■#F8FAFC;
}
.channel-fill {
  display: block;
  box-sizing: border-box;
  height: 100%;
  border: 2px solid;
}
.channel-fill--venue {
  background-color: ■#1D4ED8;
  border-color: ■#1D4ED8;
}
.channel-fill--online {
  background-color: ■#FEF3C7;
  border-color: ■#92400E;
  background-image: repeating-linear-gradient(
    135deg,
    ■#92400E 0 6px,
    ■#FEF3C7 6px 12px
  );
}
.channel-table {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
}
.channel-table th, .channel-table td {
  border: 1px solid ■#64748B;
  padding: 8px;
  text-align: left;
}
@media (max-width: 500px) {
  .channel-row { grid-template-columns: 1fr; gap: 4px; }
}

HTML（WEBページの内容と構造を表す記述）では、各棒の横に系列名と件数を直接表示し、その下にtableで元データを置いています。表のthとscopeは、月・会場・オンラインの見出しと値の関係を示します。グラフ部分はaria-hidden="true"で支援技術から除き、同じ情報を読めるデータ表を残しています。

棒の長さは最大60件を100%とする共通尺度で、30件なら50%、45件なら75%、60件なら100%です。幅の数値を変更するときは、表示ラベルと表の件数も必ず合わせます。CSS（WEBページの見た目を指定するルール）のrepeating-linear-gradient()で斜線模様を作り、模様が使えない場合も茶色の枠線が残るようにしています。

コントラストとグレースケール表示で仕上がりを確認する

文字色#1F2937と白い背景#FFFFFFのコントラスト比は約14.68:1、補足文のグレー#475569と白は約7.58:1で、WCAG 2.2が通常サイズの文字に原則求める4.5:1を上回ります。グラフの棒が情報を理解するために必要な場合、図形と隣接色との非テキストコントラスト3:1も確認します。

今回の青い棒#1D4ED8と薄い青灰色の棒の背景#F8FAFCは約6.41:1、オンラインの茶色の線#92400Eと同じ背景は約6.78:1です。斜線模様の茶色#92400Eと淡い黄色#FEF3C7の間にも約6.37:1の差があります。棒の領域を囲むグレーの枠線#64748Bと薄い背景#F8FAFCの差は約4.55:1です。

ただし、棒の色が3:1を超えるだけで、すべての色覚特性にとって判別できると保証されるわけではありません。グラフをグレースケールで表示して無地・斜線・系列名が区別できるか、スマートフォンでも模様がつぶれないかを確認しましょう。グラフが画像や複雑な描画方式の場合は、同等のデータ表や説明文も用意します。色だけに頼ることと、数値や形を併用することは別の確認事項です。

HueRollでは色候補やHEXコード、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色同士の比率や、完成グラフのWCAG適合を自動判定する機能ではありません。候補の配色を考えた後に、実際のグラフと表を見比べて検証してください。