Adobe Color新機能「色覚異常対応」が便利!問題となる色の組み合わせを簡単に修正できるアクセシビリティツール
Post on:2020年6月10日
毎年5月の第3木曜日アクセシビリティへの理解を促進する日(GAAD)に伴い、Adobe Colorに新機能「色覚異常対応」が備わりました。カラーの組み合わせに対するアクセシビリティを色彩学に基づき、簡単に確認、修正できます。

さっそく使用してみました。
まずは、Adobe Colorにアクセスします。
※無料で利用できますが、Adobe ID(登録無料)でログインするとカラーパレットを保存でき、Photoshopなどで利用できます。

既存のカラーパレットは色覚異常の問題はないと思うので、新しいカラーパレットを画像から抽出してみます。

画像は、こちらを使用しました。

素材: ぱくたそ おまたせやっほー(浴衣で待ち合わせ)のフリー画像
左の「カラームード」で画像からそのムードに合ったカラーが抽出されます。

上部タブから「アクセシビリティツール」を選択します。

一見問題がないカラー選びのように見えましたが、「BとCは競合しています。」と表示されてしまいました。

「BとCは競合しています。」
下部には「色覚異常シミュレーター」が表示されており、以下の色覚異常をシミュレートしてくれます。
- 色覚異常
- 赤色覚異常
- 第三色覚異常
こんな風に見えるんですね。

「BとCは競合しています。」を修正します。

カラーホイールから目的のカラーを選択し、競合されない場所に変更します。

「競合は見つかりませんでした。」と表示されれば、完了です。これで色覚異常に対応したカラーパレットができました。

「競合は見つかりませんでした。」
【追記】
当ブログのビジター様よりツイートをいただきました。
検証してみました。
個人的には今後の改良に期待したいです。 pic.twitter.com/Xocl7ecDqf— クチイマスミ〈デザインで動かす〉 (@clarion_ds) June 10, 2020
同じAdobeのIllustratorでのシミュレーションと異なっており、ツールの結果を鵜呑みにしてしまうことは避けた方がよさそうです。
ツール自体の使い勝手はよいので、今後の改善を期待します!
sponsors