あなたのサイトの視認性は大丈夫？配色のグレースケール化でWebサイトをチェックする方法
Webサイトが読みやすいかどうかは、文字サイズやレイアウトだけでなく配色によるところも大きいですよね。
配色というと、補色を使って色を際立たせる、なんていう技法を安易に使いがちですが、色の三要素（色相・彩度・明度）のうち、明度のコントラストが視認性に最も影響を与えます。
したがって、明度差をチェックするのがWebサイトの配色適正化には欠かせないわけですね。なので、配色をしていてなんか見にくいなあと感じたら、Webサイトをグレースケール化して視認性をチェックするのがおすすめです。
そこで本記事では、Webサイトをグレースケール化する方法を解説します。
補色で配色してもうまくいかない場合がある
色相主体で配色する場合で、よく知られている配色が補色を使うことです。
補色というのは、色相環で反対側の色をいいます。そういえば昔中学の美術で習ったような記憶が・・・。
例えば、色相環で黄色と青紫の関係や、赤橙と緑青の関係が補色です。
補色での配色例
実際にこの補色を使って配色してみると次のようになりました。
どうでしょうか？左のテキストが黄色のものは視認性がはっきりしていますが、右のテキストが赤橙のものは、なんだか目がチカチカして見にくく感じませんか？
どちらも背景色に補色を使用したにもかかわらず、このように視認性に差が出ています。このように色だけにこだわると、見にくいWebサイトが出来上がってしまうことがあるのですね。
補色配色例をグレースケール化
これをグレースケール化すると視認性に差が出た理由がよくわかります。
いかがでしょうか？明らかに右のテキストは明度差が不足しているのがわかりますよね。このように、明度差が不足すると、補色を使ったとしても視認性は悪くなってしまうのです。
トーンを変えて明度差を改善する
もし、テキスト：赤橙、背景色：緑青の色相を使うならば、色相はそのままでもトーンを変化させると明度差を改善することができます。
このように同じ色相でも明度差を意識してつければ、視認性がぐっとよくなるのがわかりますよね。
色相環をグレースケール化して見る
一応参考までに色相環もグレースケール化して見てみましょう。グレースケール化すると明度差があることがよくわかりますね。
このように色相によって、そもそも明度の高いものと低いものがあることを知っておけば、配色の参考になるでしょう。
Webサイトもグレースケール化して確認する
それではここからは、本記事の本来の目的であるWebサイトをグレースケール化する方法について紹介していきます。
なぜWebサイトをグレースケール化する必要があるのかについては、ここまでの解説で十分理解できたのではないでしょうか？
方法１：Google Chromeの拡張ツールを利用する
Google Chromeの拡張ツールに、Grayscale Toolというのがあります。
入手先は、こちらです。
使い方は簡単です。Google Chromeにインストールしたら、グレースケール化したいWebページを表示しながら、Shift+G を押すだけです。
しかし、今一つ動作が安定しません。例えばこのウェブチルサイトのトップページに適用すると、コンテンツ領域は確かにグレースケール化しますが、なぜか背景色はそのままです。
サイトの一部でもよいので手軽にグレースケール化したい場合には使えるかなという感じです。
方法２：CSSのfilterプロパティを適用する
少し手間ですが、こちらの方法が確実にグレースケール化できる方法となります。
カスタムCSSとGoogle Chromeの開発者ツールを使います。次の記事で詳しく解説していますの参照ください。
https://web-children.com/2020/12/14/custom-css/手順は以下の通りです。
１.Google Chromeで開発者ツールを開ける。
（Ctrl（MacはCommand）+ Shift + I。またはWindowsならF12をクリック）
２．bodyタグをセレクタにして、次のCSSを適用する。
body {filter: grayscale(100%);}この方法だときちんとグレースケール化できています。
開発者ツールの中だけでの変更ですので、サイトを再読み込みすれば元に戻ります。
filterプロパティは、比較的新しいプロパティなので、IEでは使用できませんので注意しましょう。
グレースケール化するgrayscale()関数のほか、ぼやかしを入れるblur()関数、コントラスト調整するcontrast()関数など、サイトの配色や雰囲気を少し変更したいときに応用できそうですね。
まとめ
配色において、十分な明度差をとることは視認性の確保に欠かせません。したがてWebサイトをグレースケール化してチェックしてみることがおすすめです。
Webサイトをグレースケール化する方法を２つ紹介しましたが、Grayscale Toolはお手軽ですが動作に少し難があるため、私はもっぱらfilterプロパティを使うようにしています。
もちろん配色において、どのような色相を選ぶのかは、Webサイトのイメージを作り込むうえで重要です。ただし、色だけにこだわると、視認性の悪いWebサイトができあがってしまう可能性が出てきます。
そうなっていないか、ときどきWebサイトのグレースケール化でチェックしてみましょう。
