コントラスト比、気にしていますか？

デザイナーのemiです。
実はちょっと社に入るまで、コントラスト比をチェックするということをほとんどしていませんでした。

赤背景に黒文字など、明らかに目がチカチカしてしまうようなデザインはさすがにしていませんでしたが、コントラスト比をチェックするツールで確認するということをしていませんでした。

その当時していた確認方法としては、モノクロにしてきちんと字が読めるか。という程度でした。

なぜコントラスト比をチェックするのか

コントラスト比をチェックすると何がいいのか。ということですが、視認性が良くなるのはもちろんですが、Webアクセシビリティのガイドラインにも沿ったものになります。

作業中にプラグインでもチェックすることができますが、個人的に好きなのがAdobe Colorでチェックする方法です。

理由その1

デザインの作業に入る前に使用する色を決めてCCライブラリに登録するから。

Adobeのツールを使ってデザインすることがほとんどだったので、CCライブラリに登録してそこから色を使っていく方法で作業していたことも理由としてあります。

Figmaで作業するときも、慣れているAdobe Colorを使うことがよくあるので、CCライブラリが使えないのにこの方法で決めてしまいます。

理由その2

多様な色覚にも対応しているから。

アクセシビリティに気をつけるのであれば、色覚多様性にも対応した方がいいとおもうので、D型（1型）、P型（2型）、T型（3型）での見え方を確認できるAdobe Colorで確認しています。

他にも色覚多様性に対応しているコントラスト比をチェックできるものがあるのかもしれないですが、CCライブラリに登録することができるというのがAdobe Colorを使う理由です。

Adobe Colorはログインしなくても使うことができます。
※CCライブラリに登録する場合はログインが必要です。

最後に

下記の記事でコントラスト比についてはまた別の機会に。と書いていたのを思い出して書きました。

カラーコードをGoogleで検索したことはありますか？
https://chot-inc.com/blog/u41jcpyrwn/

Figmaを使うことが多くなってきているので、コントラスト比を確認できる、自分の使いやすいと思うプラグインを探す旅に出ようと思います。