WEBデザイン時の色のコントラストの評価を調べることがWEBサービス！
Colorable(コロラブル)をご紹介します。
このツールを使って、見やすい色の組み合わせを調べることができます。
目次
Colorable
サイトにアクセスするとこの画面になります。
左の#004466が、文字字の色(Text)
右の#00ffa2が、背景の色です(Background)
例えば、文字色を黒、背景を白にすると・・・・
白と黒
こうなります。
#ffffffが白の色コードです。
#000000が黒の色コードです。
この色の組み合わせのコントラストの評価は、
21.00AAA となっています。
この数字が高いほど、見やすいということです。
AAAはトリプルA評価ということです。
では、色を変えてみましょう。
白とグレー
#ffffffが白の色コード #808080がグレーの色コードです。 背景がグレーで、白の文字は、見にくいことが想像できますよね。
評価は、3.95 AA Large となりました。 先程の黒と白の評価は、21.00AAA でしたので、あきらかに、変わりました。
21.00 → 3.95
AAA → AA
Largeの表示
まず、数字が下がったということで、見にくいことがわかります。
トリプルAからダブルAに評価が下がりました。
Largeの文字は、文字のサイズが大きければ見やすくなるということを意味します。
では、背景のグレーの色合いをさらに白に近い色にしてみます。
白と明るいグレー
背景のグレーをさらに明るくすると、白の文字の見やすさは、さらに低下します。
評価は、2.85 Failとなりました。
3以下になると、Failとなります。
見てわかるように、見にくい色の組み合わせであるということですね。
このように、視認性の高い色の組み合わせを探して、ユーザーが使いやすい色の配置をするのに役立てましょう。
カラーコード
カラーコードの一覧がこちらで見られます。
まとめ
今回は、Colorableを紹介しました。
このようなツールを活用して、よりユーザビリティの高いデザインに近づけましょう。
このようなツールを活用して、よりユーザビリティの高いデザインに近づけましょう。