色だけに頼らないデザインとは?WCAG 1.4.1「色の使用」の基準を解説

記事内に広告が含まれています。

必須項目を赤字だけで示す。フォームのエラー箇所を赤い枠だけで示す。

こうしたデザイン、実は一部のユーザーには伝わっていないかもしれません。

この記事では、WCAGの達成基準1.4.1「色の使用」とは何か、そして色だけに頼らない情報の伝え方を、初心者向けに解説します。

基本の理解

まずは達成基準1.4.1「色の使用」とは何か、そしてなぜ色だけに頼ってはいけないのかを押さえましょう。

達成基準1.4.1「色の使用」とは、WCAG(Webサイトが誰にとっても見やすく使いやすくなっているかを示す、国際的なアクセシビリティ基準)が定める基準の一つで、「色が、情報を伝える・動作を示す・反応を促す・視覚的な要素を判別するための、唯一の手段になっていないこと」を求めるものです。

WCAGの達成基準には「レベルA・AA・AAA」の3段階があり、1.4.1はその中でも最も基本的な「レベルA」に分類されています。

つまり、最低限クリアしておきたい基準の一つということです。

理由は、色の見え方に個人差があるからです。

日本眼科医会によると、日本人男性の約20人に1人(約5%)は、生まれつき特定の色の区別がつきにくい色覚特性を持っています。

また、色が判別しづらくなる場面は、生まれ持った色覚特性だけが原因ではありません。

モノクロ印刷した資料を見るとき、加齢で水晶体が黄色く濁ってきたとき、屋外の明るい場所でスマホ画面を見るときなど、誰にでも色が見分けにくくなる状況は起こり得ます。

だからこそ、色は「情報を伝える手段の一つ」として使い、それだけに頼らないデザインが求められます。

具体的にどう改善すればよいか、よくある場面ごとに見ていきましょう。

「赤色=エラー」「緑色=成功」のように色に意味を持たせること自体は問題ではありません。その色だけで情報の全てを伝えようとすると、判別できない人に伝わらなくなってしまいます。色と文字・アイコンは必ずセットで使いましょう。
コントラスト比(文字色と背景色の明暗差)を確保することと、1.4.1(色だけに頼らない)は、似ているようで別の基準です。コントラスト比を満たしていても、色だけで情報を伝えていれば1.4.1は満たせません。両方を意識する必要があります。

Q. ホバーやエラーの状態色を使う場合はどうすればいい?
A. 色の変化に加えて、テキストやアイコン、下線などの視覚的な手がかりを一緒に使うことで、この基準を満たせます。状態色の具体的な使い方は状態色とはという記事で解説しています。
Q. 自分のデザインが色覚特性を持つ人にどう見えるか、確認する方法はある?
A. Chrome DevTools(ブラウザの開発者ツール)の「Rendering」パネルにある「Emulate vision deficiencies」という機能で、P型・D型などいくつかの色覚タイプでの見え方をシミュレーションできます。