DESIGN

色覚シミュレーター — 誰もが楽しめるデザインへ

男性の約8%が何らかの色覚多様性を持っています。シミュレーターは様々な色覚タイプの方に画像やUIがどう見えるかを表示します。

色覚多様性の種類

第2色盲(最も一般的):赤緑の区別が難しい。第1色盲:赤の知覚が弱い。第3色盲(まれ):青黄の問題。完全色盲:グレーしか見えない。公開前に必ずすべてのタイプをシミュレートしましょう。

色覚多様性に配慮したデザイン

色だけを唯一の区別要素として使わないこと。代わりにパターン・形状・ラベルを追加する。輝度コントラスト(色のコントラストだけでなく)を十分に確保する。赤緑の組み合わせが最も問題になりやすいです。

テストと検証

本番公開前にシミュレーターで必ずUIをテストします。Colorblindingなどのブラウザ拡張機能で任意のWebサイトでシミュレーションできます。インクルーシブなデザインはすべてのユーザーの体験を向上させます。