![見出し画像](https://assets.st-note.com/production/uploads/images/71308102/rectangle_large_type_2_959c769d1b22f685e1cdce6f8255a3dc.jpeg?width=800)
【 Colorable 】 色のコントラストの評価を調べられる便利ツール 投資家のFIREへの旅路 第305回
WEBデザイン時の色のコントラストの評価を調べることがWEBサービス!
Colorable(コロラブル)をご紹介します。
このツールを使って、見やすい色の組み合わせを調べることができます。
【 Colorable 】
![](https://assets.st-note.com/img/1643796655934-nRxjzqDIY1.png?width=800)
サイトにアクセスするとこの画面になります。
左の#004466が、文字字の色(Text)
右の#00ffa2が、背景の色です(Background)
例えば、
文字色を黒
背景を白
にすると・・・・
〈 白と黒の組み合わせ 〉
![](https://assets.st-note.com/img/1643797838579-CyU4vz4MCX.png?width=800)
こうなります。
#ffffffが白の色コードです。
#000000が黒の色コードです。
この色の組み合わせのコントラストの評価は、
21.00AAA となっています。
この数字が高いほど、見やすいということです。
AAAはトリプルA評価ということです。
では、色を変えてみましょう!
〈 白とグレーの組み合わせ 〉
![](https://assets.st-note.com/img/1643798192026-x4uj09I1xl.png?width=800)
#ffffffが白の色コード
#808080がグレーの色コード
です。
背景がグレーで、白の文字は、見にくいことが想像できますよね。
評価は、
3.95 AA Large となりました。
先程の黒と白の評価は、
21.00AAA でしたので、
あきらかに、変わりました!
21.00 → 3.95
AAA → AA
Largeの表示
まず、数字が下がったということで、見にくいことがわかります。
トリプルAからダブルAに評価が下がりました。
Largeの文字は、文字のサイズが大きければ見やすくなるということを意味します。
では、
背景のグレーの色合いをさらに白に近い色にしてみます。
〈 白と明るいグレー 〉
![](https://assets.st-note.com/img/1643798641074-FdKX8Vi8ak.png?width=800)
背景のグレーをさらに明るくすると、
白の文字の見やすさは、さらに低下します。
評価は、
2.85 Fail
となりました。
3以下になると、Failとなります。
見てわかるように、見にくい色の組み合わせであるということですね。
このように、視認性の高い色の組み合わせを探して、
ユーザーが使いやすい色の配置をするのに役立てましょう!!
【カラーコード】
カラーコードの一覧がこちらで見られます。
【 まとめ 】
今回は、Colorableを紹介しました!!
デザインには、センスが必要だって思ちゃうのですが、
それよりも、こういったツールを知っていて使っているかどうかで、差が出ると思います!
どんどん活用していきましょう!
この記事が気に入ったらサポートをしてみませんか?