無料でデザイン上「アリ」な色の組み合わせをサクッと確認できる「Accessible Brand Colors」レビュー

ウェブデザインやフリーペーパーといった物理的なデザインをする際には、人に訴える力を持つ「見やすい」色の組み合わせを見つけ出すことはかなり重要です。背景色と文字色の組み合わせが「アリ」なのか「ナシ」なのかを一目でわかるようにする「Accessible Brand Colors」を使えば、悩みがちな色の組み合わせを直感的にさくっと決められそうだったので、実際に使ってみました。

Accessible Brand Colors by Use All Five
https://abc.useallfive.com/

上記URLにアクセス後、画面右上の「＋」をクリック。

カラーピッカーが現れるので……

色相や明暗を調整して「Add hex」をクリック。カラーコードを指定することも可能です。

するとこんな感じで1色目が決定。同様に下側の「＋」もクリック。

色を選択して「Add hex」をクリックします。

この状態で「Get started」を押すと……

以下のように、選んだ2色が背景／文字色だとどんな感じで映えるのか？ということが図示されました。画面左側には「AAA」「AA」「AA18」「DNP」というレベル表示があり、「AAA」「AA」は可、「AA18」は文字サイズが大きい時のみ可、「DNP」は不可を示します。以下の青と紫の2色の場合はいずれもが「AAA」で、かなりアリな組み合わせ。

さらに画面右下の「＋」をクリックし……

色を追加。

するとこんな感じで図にもイエローが追加されました。

ただし、水色の文字と組み合わせると文字が読みづらくなってしまうため「DNP(不可)」。紫との組み合わせは「AAA」でした。

さらにもう1色追加してみます。

ピンク系を追加してみたところ、組み合わせはおおむね「DNP」

「DNP」レベルの組み合わせを非表示にすることもできたのでやってみました。選択肢が限られていることが直感的にわかるので、何がアリで何がナシなのか迷わずにすみ、デザインの際の時短に役立ちそうです。