色覚多様性に配慮したデザインガイド — アクセシビリティのコツ6選

コツをタップすると詳しい内容を確認できます。

色だけで情報を区別しない

「赤いボタンは削除、緑のボタンは保存」のように色だけに頼ると、色覚多様性のある人には区別できません。アイコン、テキスト、パターンを併用しましょう。

赤緑の組み合わせは慎重に使う

最も多いのが赤緑色覚異常のため、赤と緑を並べて対比させ情報を区別するデザインは特に注意が必要です。

十分な明度コントラストを確保する

色そのものではなく明るさ(明度)の差がはっきりしていれば、色を区別できなくても要素を認識しやすくなります。

パターンやテクスチャを併用する

グラフや図表で色だけで項目を区別する代わりに、ハッチングや点模様などのパターンを併用すると、格段にアクセシビリティが高まります。

色覚シミュレーターで事前に確認する

デザインツールの色覚シミュレーション機能を活用し、実際に色覚多様性のあるユーザーにどう見えるかを事前に確認する習慣が重要です。

凡例ではなく直接ラベルを付ける

離れた場所にある凡例を見て色を照合させる代わりに、グラフの要素の横に直接名前を付けると、色の識別能力に関係なく理解できます。

世界の男性の約8%が色覚異常を持っています

色覚多様性は思ったより身近な特性です。デザイナーや開発者がこうしたユーザーに配慮したデザインを取り入れれば、多くのユーザーによりよい体験を提供できます。

自分の色覚を確認してみたい方へ

簡単な色覚の自己診断が気になる方は、色覚簡易セルフチェックツールもぜひご確認ください。

よくある質問

色覚多様性に配慮したデザインは、そうでない人にも役立ちますか?

はい。明度コントラストを高めパターンを併用するデザインは、弱視の方や高齢者、明るい屋外で画面を見るすべてのユーザーにとっても視認性を高めてくれます。

色覚多様性に配慮したパレットはどこで見つけられますか?

Okabe-Itoパレットのように色覚配慮が検証された公開パレットがあり、カラーパレット生成ツールで実際にコントラストを確認しながら作ることもできます。