対象: Web制作・デザイン全般
難易度: ★★☆
所要時間: 約10分
「詳細はこちら」というリンクを、下線なしの緑色の文字だけで表現しているサイト、実はこれ、一部のユーザーにとっては「リンクだと気づけない」デザインかもしれません。色の見え方には個人差があり、日本人男性の約5%(20人に1人)が、色の識別が難しい「色覚異常(色覚多様性)」を持つとされています。
どれくらいの人が対象になるのか
色覚異常は、先天的または後天的に起こり、特定の色の識別がしづらい・見分けにくい症状です。日本人男性の約5%(P型2色覚・D型色覚など)、女性の約0.2%が該当するとされ、先天性だけで国内に約320万人、後天的な要因(病気・事故・加齢など)によるものを合わせると約500万人が対象になると言われています。
老若男女問わず一定数存在するため、多くの人が訪れるWebサイトであれば、配慮が欠かせません。
色覚異常があると、例えば路線図のような「色だけで意味を区別している情報」が読み取りにくかったり、背景色と文字色の組み合わせによっては文字自体が判別しづらくなったりします。
対策1: 色だけに頼った情報表現を避ける
リンクのテキストを緑色などにするだけだと、その色を識別しにくい人には「リンクである」という情報が伝わりません。下線を残す、あるいはホバー時にアイコンを表示するなど、色以外の視覚的な手がかりを必ず併用しましょう。グラフの凡例も同様で、色分けだけでなく、線種(実線・点線)やハッチング(模様)を組み合わせると、色に依存しない表現になります。
対策2: 明度差・色相差をしっかりつける
特に避けたいのが、緑色の背景に赤文字のような組み合わせです。色覚異常のタイプによっては、この2色が非常に近い色として見えてしまい、ほとんど判別できなくなることがあります。文字の太さを上げる、背景との間に白フチを入れるといった工夫も、判別のしやすさを底上げする効果があります。
デザイン解説の中には「W3Cは明度差125以上、色差500以上を推奨している」という記述をたまに見かけますが、これは2000年に示された試験的な旧基準です。2008年に勧告されたWCAG 2.0以降は、この計算方法は使われておらず、「コントラスト比」という指標が現在の世界標準になっています。
通常サイズの文字はコントラスト比4.5:1以上、より厳しい基準では7:1以上が目安です。参考にする資料が古いと、今では非推奨の基準のまま覚えてしまうことになるので注意してください。
確認方法: シミュレーションツールで見え方を疑似体験する
自分の目で「色覚異常の人にはどう見えるか」を確認するのは難しいですが、確認用のツールがいくつかあります。
- Photoshopの「色の校正」機能: デザインファイルをそのまま色覚シミュレーション表示できる
- スマホの色シミュレーションアプリ: 実際のブラウザ表示をカメラ越しに確認できる
- デザインをグレースケールに変換して確認: 色に頼らず明度差だけで情報が判別できるかの簡易チェックになる
グレースケール変換によるチェックは、色覚異常の方に限らず、全てのユーザーにとっての可読性向上にもつながる、手軽で応用範囲の広い確認方法です。デザインを一段落させたタイミングで、一度試してみる習慣をつけておくと安心です。
まとめ
- 色覚異常は男性の約5%・女性の約0.2%、国内で数百万人規模が対象になる、珍しくない特性
- リンクやグラフなど、色だけで意味を伝える表現は避け、下線・模様など色以外の手がかりも併用する
- コントラストの基準は「明度差125・色差500」ではなく、現在はWCAG 2.0のコントラスト比(4.5:1以上)が世界標準
- 色覚シミュレーションツールやグレースケール変換で、公開前に一度チェックする習慣をつける
