色、パターン、直接ラベル
色覚障害のあるユーザーにも読めるように系列を表現します。
「色、パターン、直接ラベル」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
色だけでは見分けられない人がいる
男性のおよそ12人に1人は、特定の色を確実に見分けられません。グラフで赤が損失を示していても、そのユーザーには違いがまったく分からない可能性があります。🎨
2つのチャンネルの原則
すべての系列を、色以外の第2の手がかりでも表します。パターン、形、直接ラベルなどを使い、色を唯一の手がかりではなく補助情報にします。
パターンで違いを補う
棒や面に、縞やドットなどの異なるパターンを付けます。塗りつぶしによって、完全なグレースケールでも系列を見分けられます。
<rect fill="url(#stripes)" />折れ線グラフには異なる形を使う
折れ線グラフでは、円、四角、三角など、異なる形で点を示します。色相に頼らなくても、それぞれの線を見分けられます。
凡例より直接ラベル
別の凡例があると、色を照合する作業が必要になります。ラベルを線やスライスの上に直接置き、名前をデータのすぐ隣に表示します。
色覚に配慮したパレットを選ぶ
赤と緑のように、見分けるのが特に難しい色相の組み合わせがあります。Okabe-Itoのようなcolor-blind-safeパレットを使えば、このような衝突を避けられます。
ここでもコントラストが重要
隣り合う系列とそのテキストラベルには、十分なコントラストが必要です。WCAGでは、意味のあるグラフィック要素同士に少なくとも3対1のコントラストを求めています。
グレースケールでテストする
簡単に確認するには、グラフをグレースケールで表示します。系列を見分けられないなら、色覚の特性があるユーザーにも見分けられません。公開前に修正しましょう。
filter: grayscale(100%);冗長な符号化を目指す
このように手がかりを重ねることを冗長な符号化と呼びます。色、パターン、ラベルを組み合わせれば、1つの手がかりが失われてもグラフを明確に読み取れます。
手がかりを増やしすぎない
バランスが重要です。すべてのパターンを一度に詰め込むと、見づらくなります。各系列がはっきり区別できる程度にとどめ、グラフを落ち着いた見た目にします。
暗い場所でも役立つ
直接ラベルとパターンは、日光の下や安価な画面で見たり、白黒で印刷したりする場合にもグラフを読みやすくします。誰にとってもメリットがあります。☀️
クイックチェック
グラフの系列を色だけで区別する方法が適切でないのはなぜでしょうか？
まとめ：複数の手がかり
色だけに頼らず、パターン、形、直接ラベルを加え、安全なパレットを選び、グレースケールでテストする方法を学びました。🖤
よくある質問
「色、パターン、直接ラベル」レッスンは無料ですか？
はい。「色、パターン、直接ラベル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「色、パターン、直接ラベル」で何を学びますか？
色覚障害のあるユーザーにも読めるように系列を表現します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「色、パターン、直接ラベル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。