Webアクセシビリティ達成基準「1.4.1 色の使用の達成基準」の話

前回はWebアクセシビリティ達成基準「1.3.3 感覚的な特徴の達成基準」について解説しました。
続けて今回は「1.4.1 色の使用の達成基準」への対応について解説します。

「1.4.1 色の使用の達成基準」とは？

色に頼らない情報伝達を求めるルール

「1.4.1 色の使用（Use of Color）」は、WCAG（Web Content Accessibility Guidelines）のレベルAに分類される基本的な達成基準のひとつです。
その内容を簡単に言うと、「色の違いだけで情報を伝えてはいけない」というルールです。

たとえば、次のようなケースはNGです。

• 必須項目を「赤文字」で示しているだけ
• グラフの凡例を「色の違い」だけで区別している
• エラーを「赤枠」だけで知らせている

これらは視覚的に色を識別できない人にとって、情報が欠落してしまうおそれがあります。
つまり「色以外の手段（テキストやアイコン、形状など）」も使って、誰にでも同じ情報が伝わるようにする必要があるのです。

なぜ「色だけに頼らないこと」が重要なのか

視覚障害・色覚多様性への配慮

人間の色の感じ方は人それぞれで、色覚異常（色覚多様性）を持つ人は日本でも男性の約5％、女性の約0.2％いるといわれています。
たとえば赤と緑の区別がつきにくい方にとって、「エラーは赤」「完了は緑」という表示だけでは、どちらがどちらか判断できません。

また、モニターの設定や周囲の明るさによっても、色の識別が難しくなることがあります。
そのため、色以外の情報提示を行うことは、特定の障害を持つ人だけでなく、すべての利用者にとっても有益なのです。

よくあるNG例とその改善方法

フォームのエラーメッセージ

NG例：
「赤枠」だけでエラー箇所を示しているフォーム。

改善例：
赤枠に加えて「この項目を入力してください」とテキストで明示したり、「！」アイコンを追加することで、色に頼らずエラー箇所が分かるようにします。

<label for="email">メールアドレス（必須）</label>
<input type="email" id="email" class="error">
<span class="error-message">メールアドレスを入力してください。</span>

CSSで赤色を付けるのは構いませんが、必ずテキストで補足することがポイントです。

グラフ・チャートの凡例

NG例：
棒グラフの各項目を「赤」「青」「緑」で区別しているだけ。

改善例：
各棒の上にラベルを付けたり、凡例に「模様」「形」などの区別を加えることで、色以外でも識別できるようにします。

例：

• 売上高（■）
• 経費（▲）
• 利益（●）

また、ツールチップなどで数値を表示するのも有効です。

リンクやボタンの識別

NG例：
本文中のリンクを「青文字」だけで表現している。

改善例：
下線を付けることで、リンクであることを明確にします。

a {
  color: #005bac;
  text-decoration: underline;
}

ユーザーがマウスオーバーしたときの変化（色の濃淡だけでなく、太字や下線の変化など）も、操作しやすさに直結します。

デザイン面での工夫ポイント

色のコントラストを十分に取る

色を使うこと自体が悪いわけではありません。
重要なのは「コントラスト比」と「代替手段」の両立です。
背景色と文字色のコントラスト比は、少なくとも 4.5:1以上（レベルAA基準） を確保することが推奨されています。

FigmaやAdobe XD、またはChrome拡張機能の「Accessibility Insights」「Color Contrast Analyzer」などを使えば、簡単に確認できます。

色と形の組み合わせで伝える

たとえば通知アイコンを「赤丸」だけでなく、「赤丸＋感嘆符（！）」とすることで、色が見えなくても注意喚起が伝わります。
同様に、選択状態を「青く光る」だけでなく、「枠線が太くなる」「チェックマークが付く」など、形やアイコンの変化を組み合わせると効果的です。

実装時にチェックしたいポイント

1. 色のみに依存していないか（テキスト・形状・アイコンで補足しているか）
2. エラーや警告の箇所は、テキストやアイコンで明示しているか
3. グラフ・チャートは色以外でも識別可能か
4. リンクやボタンは形状や下線などで認識できるか
5. コントラスト比が十分か（4.5:1以上）

これらを社内レビューのチェックリストに組み込むことで、制作時の抜け漏れを防げます。

まとめ：「色」は補助的な要素として使う

「1.4.1 色の使用の達成基準」は、一見すると当たり前のように思えるルールですが、実際の現場では意外と見落とされがちです。

色はあくまで補助的な手段であり、情報伝達の主軸にはできない。
この考え方を持つだけで、Webサイト全体のユーザビリティは大きく向上します。

アクセシビリティ対応は、単に「義務」ではなく、「より多くの人に情報を届けるための工夫」です。
「色を使わない」のではなく、「色だけに頼らない」。
これが、すべてのユーザーにやさしいデザインの第一歩です。