今やWebの役割は情報発信だけでなく、企業やユーザーとの相互コミュニケーションの主軸を担っています。できるだけ多くの人に、わかりやすく、正確に情報を伝えるためには、UI/UX設計の他に「配色」も重要です。
「カラーユニバーサルデザイン（CUD）」がどのようなものか、それをどうやって制作に取り入れるかを、ざっくり紹介したいと思います。
ヒトの持つ色覚の多様性とCUD
ヒトの目には3つの錐体があり、それぞれL（赤）、M（緑）、S（青）の3種類で光の波長を捉えています。この光の捉え方は人によって様々な型があり、以前は「色覚正常者」「色弱者」などと区別されていました。しかし、現在では各型対等に扱うようになってきています。
【色覚型5種類】
C型（Common-type）※日本人男性の約95%，女性の99%以上
P型（Protanope-type）
D型（Dutaernope-type）
T型（Tritanope-type）
A型（Acromatic-type）
「人間の色覚の多様性に対応し、より多くの人に利用しやすい配色を行った製品や施設・建築物、環境、サービス、情報を提供するという考え方を「カラーユニバーサルデザイン（略称CUD）」と呼びます。」
※特定非営利活動法人カラーユニバーサルデザイン機構（CUDO）より引用
つまり、どんな人でも的確に情報・サービスが受けられるように配慮した設計を行いましょう、というユニバーサルデザインが基本となっており、その中でも配色に関する改善策を講じていくのがCUD、ということです。
なぜCUDが必要なのか
各色覚型により色の見え方が異なるため、標識やハザードマップなど生活に密接した情報は、一歩間違うと重大な問題や事故になってしまう危険性をはらんでいます。
またWebサイトでも意図しない操作や、情報を探すことが困難だったりと正しく扱えない状態に陥ってしまいます。
色の感じ方は老化や病気、事故によっても変化するため、ユニバーサルデザインの一助として、様々な状態の人にも情報を正しく伝えようと配慮されたカラーデザインが必要になりました。
「自分はC型だから関係ない」とは言えないのです。
色覚確認方法とAdobe colorの活用
デザインされた配色をIllustratorやPhotoshopの「校正設定」で確認することもできますが、Adobe Colorを使うとカラーの調整がより便利になります。
（１）メニューの「アクセシビリティツール」をクリックすると、設定した配色がCUDに則っているかどうかが簡単に分かります。
（２）一部の人に見づらい配色になっている場合は、こちらに注意書きが表示されます。
（３）実際にどのような色として認識されるか、色覚シュミレーターが表示され、「どの色が並ぶと判別がつきにくいか」「コントラストが足りないか」がより詳細に理解できます。
後はカラーホイールで選択されているスウォッチを動かし、配色を調整します。感覚的にホイールを動かしながらバランスを見ることができるので、とてもありがたい機能です。
カラーパレットが完成したら、そのままテーマカラーとしてプロジェクトに反映し、メンバーと共有します。
今年開催されたAdobe MAXでのセッションが、プロジェクトに沿った具体的な内容でわかりやすかったです。
参考：Adobe Colorで始めるUIのカラーユニバーサルデザイン
グローバルサイトや老若男女様々なユーザーが使うサイトに対しては特に意識してCUDを取り入れ、よりユーザーファーストなサイトを目指したいですね。
