Adobe Color新機能「色覚異常対応」が便利!問題となる色の組み合わせを簡単に修正できるアクセシビリティツール

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

問題となる色の組み合わせを修正できるアクセシビリティツール

Adobe Color アクセシビリティツール

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

Adobe Colorのキャプチャ

Adobe Color

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

Adobe Colorのキャプチャ

Adobe Color テーマを抽出

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

サイトのキャプチャ

素材: ぱくたそ おまたせやっほー(浴衣で待ち合わせ)のフリー画像

左の「カラームード」で画像からそのムードに合ったカラーが抽出されます。

Adobe Colorのキャプチャ

Adobe Color テーマを抽出

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

Adobe Colorのキャプチャ

Adobe Color アクセシビリティツール

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

Adobe Colorのキャプチャ

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

下部には「色覚異常シミュレーター」が表示されており、以下の色覚異常をシミュレートしてくれます。

  • 色覚異常
  • 赤色覚異常
  • 第三色覚異常

こんな風に見えるんですね。

Adobe Colorのキャプチャ

Adobe Color アクセシビリティツール

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

Adobe Colorのキャプチャ

Adobe Color アクセシビリティツール

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

Adobe Colorのキャプチャ

Adobe Color アクセシビリティツール

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

Adobe Colorのキャプチャ

「競合は見つかりませんでした。」

【追記】
当ブログのビジター様よりツイートをいただきました。

同じAdobeのIllustratorでのシミュレーションと異なっており、ツールの結果を鵜呑みにしてしまうことは避けた方がよさそうです。
ツール自体の使い勝手はよいので、今後の改善を期待します!

sponsors

top of page

©2020 coliss