色覚の種類

人の目には錐体と呼ばれる光を認識する3種類の視細胞があり、それぞれの錐体が赤・青・緑の光を感知し色を識別しています。（※まれに4種類目の錐体（四色型色覚）を持つ人もいると言われています。）

人の色覚タイプは大きく5種類分けることができます。一般的なのが3種類の錐体が揃っているC型で、その他に 「P型（1型色覚）」「D型（2型色覚）」「T型（3型色覚）」 などに分類されます。P型やD型の人は、特定の色の区別が難しい場合があり、T型の人はさらに色の認識が限られます。

色覚多様性を持つ人の割合

色覚多様性を持つ人は、男性の約8%、女性の約0.5%と言われています。色覚に多様性のある人の多くは遺伝的要因によるもので、特にX染色体に関連した遺伝子の変異に起因するものです。男性はX染色体が1本しかないため色覚の異常が発現しやすい一方、女性はX染色体が2本あるため、色覚の異常が表れにくい傾向にあります。

一般的な見え方の違い

色覚に多様性のある人たちは、『赤と緑の区別が難しい』『青と紫が似て見える』など、日常的な色の認識に影響を受けることがあります。例えば、信号機の赤と緑を区別できなかったり、生鮮食品の状態が見分けにくかったりします。また、色だけに頼った地図やグラフでは、提供されている情報が理解しにくいこともあります。こうした違いを理解して、色だけでなくアイコンやテキストを併用することで、情報を公平かつ正確に伝え、より多くの人たちにとって使いやすいデザインとなります。

色に頼らないデザイン

形状やアイコン

テキストとラベル

色覚に配慮したデザインでは、色だけに頼らず、テキストやラベルで補足情報を提供することが重要です。これにより、色を識別しづらい人にも情報が正確に伝わります。特に、視覚的に色を使って情報を伝える場合は、テキストやラベルを併用することで、全てのユーザーにとって理解しやすくなります。

適切なコントラスト比（WCAGの基準）

視覚的なコンテンツを全てのユーザーにとって見やすくするためには、テキストと背景色の間に十分なコントラスト比を確保することが重要です。特に、色覚に多様性があるユーザーや視力に問題のあるユーザーは、コントラストが不十分だと情報を正確に得ることが難しくなります。

• 標準：4.5:1
• 大きな字：3:1

この基準を守ることで、視覚的に弱い人々にも情報が伝わりやすくなり、アクセシブルなWEBサイトを作ることができます。コントラスト比をチェックするツールも数多くありますので、デザイン時にはこうしたツールを活用して、必要なコントラストが確保されているか確認しましょう。

色の組み合わせに注意

色覚に配慮したデザインをする際には、注意が必要な色の組み合わせがあります。次にあげる色の組み合わせは、色覚に多様性がある人にとって識別が難しい場合があります。

赤と緑

青と紫

黄色と白

赤と青

オレンジ

カラーツールの活用

カラーツールを活用することで、色覚多様性に配慮したデザインを作ることができます。カラーシミュレーションツールを使って異なる色覚の見え方を確認し、適切なコントラストや配色を選びましょう。

Color Tester

CSSでできる工夫

十分なコントラストの確保

background-colorやcolorプロパティを使い、テキストと背景のコントラスト比を意識的に調整したり、color-contrastやmix-blend-modeなどを活用して視認性を高める工夫を行います。

アイコンやテキストの利用

border, box-shadow, background-imageなどを使って形状で情報を補足します。例えば、エラーメッセージを色だけでなく、アイコンやテキストのラベルを追加します。

色の組み合わせの考慮

色覚多様性に配慮し、色をうまく組み合わせるためにrgbaやhslaの透明度を調整した配色や、配色ルールをカスタマイズします。

フォントやテキストの設定

テキストのフォントサイズや行間、文字の間隔を調整して読みやすさを向上させるため、font-size, line-height, letter-spacingなどを駆使して、視覚的な快適さを確保します。

色分けだけに頼らないデザイン

色だけに頼らず、テキストやアイコン、線の太さ、パターンで情報を伝えるデザインにします。例えば、ステータスを色とともにパターンや形、文字を組み合わせたりします。

フォーカスインジケーターの強調

フォームやインタラクティブな要素において、フォーカス時にoutlineやbox-shadowを使い目立つスタイルを設定します。これにより、色覚異常があるユーザーにもわかりやすくなります。