DESIGN
色覚シミュレーター — 誰もが楽しめるデザインへ
男性の約8%が何らかの色覚多様性を持っています。シミュレーターは様々な色覚タイプの方に画像やUIがどう見えるかを表示します。
色覚多様性の種類
第2色盲(最も一般的):赤緑の区別が難しい。第1色盲:赤の知覚が弱い。第3色盲(まれ):青黄の問題。完全色盲:グレーしか見えない。公開前に必ずすべてのタイプをシミュレートしましょう。
色覚多様性に配慮したデザイン
色だけを唯一の区別要素として使わないこと。代わりにパターン・形状・ラベルを追加する。輝度コントラスト(色のコントラストだけでなく)を十分に確保する。赤緑の組み合わせが最も問題になりやすいです。
テストと検証
本番公開前にシミュレーターで必ずUIをテストします。Colorblindingなどのブラウザ拡張機能で任意のWebサイトでシミュレーションできます。インクルーシブなデザインはすべてのユーザーの体験を向上させます。