はじめに
最近、ウェブアクセシビリティの重要性がますます高まっています。
2024年4月1日に障害者差別解消法の改正が施行されたこともあり、ウェブアクセシビリティへの関心が一層高まっています。
今回の改正では、ウェブアクセシビリティが義務化されたり、罰則が科されるわけではありませんが、多くの企業が対応を進めています。弊社内でもウェブアクセシビリティに関する相談が増えていることを実感しています。
私は現在、BIPROGYのデザイン組織に所属し、10年以上にわたりUI/UXやサービスデザインに携わっています。BIPROGYにおけるUI/UXの取り組み全般については、以下の記事で詳しく紹介しています。
また、弊社でもウェブアクセシビリティ対応の取り組みを強化しており、私自身も知識を深めるために2024年11月に色彩検定UC級を取得しました。
資格取得を通じて、色彩設計が色覚多様性を持つ方々にどのような影響を与えるのかを改めて考える機会となりました。
本記事では、色彩検定UC級受験で学習した色覚多様性について紹介し、ウェブアクセシビリティの向上に役立つ色だけに頼らないデザインの工夫を紹介します。
色彩検定UC級とは？
色彩検定UC級の概要
色彩検定UC級（ユニバーサルカラー級）は、ユニバーサルデザインの観点から、誰もが見やすい色使いを学ぶことを目的とした資格です（詳細は AFT公式サイト を参照）。以下のような内容を扱います。
- 色覚多様性（色弱・色盲など）の基礎知識
- 視認性・判読性の確保
- 適切な色のコントラスト
- 色に頼らない情報伝達の工夫
色覚の種類と割合
色覚にはいくつかの種類があります。下記のP型、D型色覚を合わせると日本人男性の約5%（約20人に1人）、日本人女性の0.2%（約500人に1人）と言われており、日本では320万人以上いるとされています。決して少ない人数ではないことが分かります。
| 色覚の種類 | 特性 |
|---|---|
| 一般色覚 | すべての色を区別できる |
| P型（1型）色覚 | 赤系の色の識別が難しい |
| D型（2型）色覚 | 緑系の色の識別が難しい |
| T型（3型）色覚 | 青系の色の識別が難しい |
(参考：NPO法人 カラーユニバーサルデザイン機構 CUDO 色覚型と特徴）
また、色覚多様性だけでなく、加齢による視覚の変化も考慮する必要があります。年齢を重ねると、青色の識別が難しくなったり、暗い環境での視認性が低下したりすることがあります。
私自身も寝る前に子供に絵本を読む際、少し電気を暗くすると、以前は気にならなかったのに、最近では暗い環境に慣れるまでに時間がかかることを実感しています…
このように、視覚の変化は誰にでも起こるため、アクセシビリティは他人ごとではなく、すべての人にとって重要な課題です。
色だけに頼らないデザインの重要性
色はウェブデザインにおいて、視認性を向上させるだけでなく、情報の整理や感情の伝達、ブランドの識別にも重要な役割を果たします。
色のもつ主な役割
1. 視認性の向上：適切なコントラストを確保し、すべてのユーザーが情報を正しく認識できるようにする。
2. 情報の整理と優先順位の明確化：重要な情報やボタンの識別性を高め、ユーザーを誘導する。
3. 感情やブランドイメージの伝達：青は信頼感、赤は警告など、色が与える心理的効果を活用する。
4. インタラクションのサポート：ホバーやクリック時に色を変えることで、ユーザーの操作を直感的に補助する。
しかし、色に依存しすぎると、色覚多様性のあるユーザーや高齢者にとって情報が適切に伝わらない可能性があります。
色覚多様性を持つユーザーや、加齢により視覚が変化するユーザーにとって、色だけで情報を区別するデザインは理解しにくいことがあります。
例えば、色覚多様性のあるユーザーが識別しにくい色の組み合わせには以下のようなものがあります。
- 赤と緑（特にP型・D型色覚にとって識別が困難）
- 青と紫（色相が似ているため区別が難しい）
- 黄と白（明度が近いため視認性が低い）
- グレーとピンク（明度の違いがわかりにくい場合がある）
具体的な例や詳細な情報については、カラーユニバーサルデザイン機構 (CUDO)のガイドラインを参照してください。
このように、色だけで情報を区別することが難しい場合があるため、色以外の要素を組み合わせて情報を伝えることが重要です。
色だけに頼らないデザインの具体例
3つの例について、画面イメージと色覚の違いによる見え方のシミュレーションを合わせてご紹介します。ご参考までに、シミュレーションツールは、FigmaのプラグインColor Blind – Figmaを利用ています。
１．エラーメッセージを「赤文字」だけで表現しない
エラーメッセージを赤文字のみで表示すると、色覚多様性のあるユーザーが見落とす可能性があります。そのため、アイコンや装飾を併用 し、色以外の方法でもエラーであることが分かるようにすることが重要です。
-
一般色覚の見え方
- 左側（課題例）：赤文字のみでエラーを表示
- 右側（改善例）：赤文字＋アイコンや枠線でエラーを強調
-
P型色覚（赤系が識別しにくい）の見え方
同じ画像をColor Blindでシミュレーションします。
今回は、赤系色の識別が難しいP型色覚：P（強度／Protanopia＝１型２色覚）の例です。- 左側（課題例） ：赤文字がグレーっぽく見えてしまい、文字色だけでエラーを判別しにくい
- 右側（改善例） ：アイコンや枠線、背景色の変化でエラー箇所を認識しやすい
エラーメッセージの改善ポイント
- アイコンや枠線、背景色を利用して、色以外でもエラーを認識できるようにする
２．リンクを色だけで表現しない
リンクの識別を色だけに頼ると、色覚特性によっては判別しにくいことがあります。そのため、下線やアイコンを併用 し、色を見分けにくいユーザーでもリンクを認識しやすくする工夫が必要です。
-
一般色覚の見え方
- 左側（課題例）：青文字だけでリンクを表示
- 右側（改善例）：青文字＋下線でリンクを強調
-
T型色覚：（青系が識別しにくい）の見え方
同じ画像をColor Blindでシミュレーションします。
今回は、青系の色の識別が難しい：T型色覚：T（Tritanopia＝３型２色覚）の例です。- 左側（課題例） ：青文字が背景と同化してしまい、リンクであることが分かりにくい
- 右側（改善例） ：下線や矢印のアイコンでリンクを認識しやすい
リンクの改善ポイント
- リンクには下線をつける
- アイコン（矢印など）を配置することでリンクであることを明示する
３．グラフを色だけで識別しない
グラフの項目や凡例を色だけで区別すると、色覚多様性のあるユーザーにとって識別が難しくなります。そのため、複数の線の種類やパターンを活用し、色に頼らない工夫を施すことが重要です。
-
一般色覚の見え方
- 左側（課題例）：色のみでグラフの項目、凡例を区別
- 右側（改善例）：色＋パターンでグラフの項目、凡例を区別
-
D型色覚（緑系が識別しにくい）の見え方
同じ画像を色覚多様性のシミュレーションできるツールで見てみます。
今回は、緑系色の識別が難しいD型色覚：D（強度／Deuteranopia＝２型２色覚）の例です。- 左側（課題例） ：赤と緑の見分けが難しく、グラフの凡例と項目の組み合わせを読み取るのが難しい
- 右側（改善例） ：線の種類やパターンでグラフの項目と凡例を識別
グラフの改善ポイント
- 折れ線グラフは異なる線の種類（破線・実線など）を使う
- 棒グラフはパターン（斜線・ドット）を追加する
- 凡例をグラフの近くに配置し、色以外の情報で情報を伝える
まとめ
本記事では、色彩検定UC級の知識を活かし、ウェブアクセシビリティの向上に役立つデザインの工夫を紹介しました。ウェブアクセシビリティに一気にすべて対応するのは難しいかもしれませんが、今回の例のようにちょっとしたデザインの工夫で対応できることもあります。
また、今回の例では実際に色覚異常のある方がどのように見えるのか知るためにツールでシミュレーションを行いましたが、簡単なチェック方法として 「デザインを白黒で印刷して、情報が適切に伝わるかを確認する」 という手法もあります。できるところから取り組んで行くことが重要と考えます。
小さな改善を積み重ねることで、より多くの人にとって使いやすいウェブサイトを目指しましょう！まずは、「色だけに頼らないデザイン」から始めてみませんか？
We Are Hiring!