Google Material Color Toolはパレットから色を選ぶだけ
配色の参考サイトやツールはいろいろありますが、それを実際にデザインにどう反映させたら良いのか分からないときばかりなあなた。
文字や背景、図など、たくさんの要素にそれぞれどの色を配すればいいのか悩んでしまう…
そんなときはGoogleのMaterial Color Toolが便利です。
選んだ色をどのようにデザインに反映させるのか、Webサイトやスマホアプリの配色例として提示してくれますし、さらにテキストとのコントラストを検証して可読性（アクセシビリティ）をチェックしてくれます。
使い方はとても簡単です。
Google material Color Tool
使い方
一次色を決める
まず、右側の[MATERIAL PALETTE]というところからメインの色を決めます。パレットから色を選ぶことができますし、隣の[CUSTOM]でも16進数でお好みの色をダイレクトに指定することもできます。
二次色を決める
次に、画面右下の[Secondary]をクリックして二次色を決めます。そうすると、Floating Action Buttonの色が二次色にしていされているということで左側の画面モックに色が反映されました。
基本的にはこの二つの色を自分で決めれば他の要素は勝手に自動で選んでくれます。
また、画面上部の[1/6 >]をクリックすると、指定した色が他の画面ではどのように見えるのかを色々なパターンの要素の組み合わせで確認することができます。
アクセシビリティのチェック
選んだ配色により、文字の色が読みやすいかどうかもチェックしてくれます。
確認するにはACCESSIBILITYタブをクリックします。[NOT LEGIBLE]と表示されている場合は可読性が悪いので色の組み合わせを見直しましょう。
基本的には文字の色を個別にいじったりしなければ大丈夫だと思います。
