皆さま、こんにちは。
昨今、建物のバリアフリーや商品のユニバーサルデザインなど、さまざまな方がどんな状況でも利用しやすい環境をつくっていこうという流れが強くなってきました。WEBサイト制作の中ではモバイルフレンドリーにしたり、表示の高速化が求められたりといったことがGoogleによって提唱されてきていますが、それも目的は誰でもWEBサイトが見やすい環境づくりをしようという配慮のうちの一つだと思います。
そして、色の分野にも「やさしさ」が必要とされるようになりました。
WEBページも色が見づらい人、視力がよくない人にとっても見やすくわかりやすいものにしていこうという動きです。このような「やさしい」デザインについてはGoogleから出ているデザインのガイドラインもあるのですが日本語化されていないので、現状でデザイン時に参考にするには大学や行政が出しているガイドラインが便利です。
https://jfly.uni-koeln.de/colorset/CUD_color_set_GuideBook_2018_for_print_cs4.pdf
■カラーユニバーサルデザインとは
色が見えづらい人も国内に数百万人規模でいらっしゃるので、そんな方々にもきちんと情報が届くようなデザインに仕上げるのがカラーユニバーサルデザインです。
デザインはイメージをつくるだけでなく、情報を伝える役割もあるので、どんな人にとっても見やすいデザインができていればWEBサイトの訪問者に親切です。デザインの垣根がなくなることで滞在時間が伸びたりリピート訪問してくれたりする人が増えれば、WEBサイトの価値も上がってきます。
デザイナーさんが仕上げてくださったWEBデザインを、誰にでも見やすい色になっているかどうかチェックしたいときに便利なツールもたくさん公開されています。そこで今回は、カラーチェック用のツールを4つ、ご紹介します。
1.Illustrator／Photoshopの校正設定機能
IllustratorやPhotoshopが使える環境にいらっしゃる方であれば、デフォルトでソフトにある機能を使えばOKです。
◆Illustrator ［校正機能＞P型（1型）色覚、D型（2型）色覚］
◆Photoshop ［校正機能＞P型（1型）色覚、D型（2型）色覚］
赤と緑を認識しづらいなど色の見え方もかなり多様なのですが、IllustratorやPhotoshopにある機能でチェックできるのはその多様な見え方の中のP型とO型の色覚の方々の見え方です。
このP型、D型色覚を持つ人は合計で日本人男性の20人に1人、女性の500人に1人の割合でいらっしゃいます。かなり多い存在です。そのため、基本としてまずはこのP型、D型の方々の見え方が大丈夫かチェックします。
Illustrator、Photoshopがあればすぐチェックできるのでお持ちの方は新たなツールを導入することなく手軽にできます。
クリスマスカードの色をこの校正機能で見てみると、↑このようになりました。
赤と緑が同じように見える方々には同じような色に見えています。けれど文字はしっかり見えていますし、”Xmas”と書いているので意味は伝わりそうです。
2.スマホアプリ「色のシミュレータ」
色チェックのための便利な機能が付いている「色のシミュレータ」というアプリがあります。iPhone、Android、どちらにも対応しています。
LINEなどチャットツールで送られてきた画像のスクリーンショットやPDFをチェックするには、この「色のシミュレータ」がいちばん便利だと思います。
◆アプリ「色のシミュレータ」
https://asada.website/cvsimulator/j/
■無料
■日本語OK
■iOS、Android対応
■会員登録不要
アプリをインストールしたらすぐ使えます。
カメラで画像を読み込むと、それぞれの見え方が一覧表示されます。直感的でわかりやすいです。
写真を変換するのではなくカメラを向ければリアルタイムで表示されるので早いです。開発者によってアプリのバージョンアップも小まめにされているので安心して使うことができます。
3.GoogleChrome拡張機能「WCAG Color contrast checker」
色のコントラストも低いと見えづらさに繋がります。年齢を重ねるごとにどんどん色が見えづらくなってくると言われます。例えば背景色と文字色のコントラスト比が低いと混じってしまって読みづらいようです。
色と色の組み合わせのチェックには、GoogleChromeの拡張機能「WCAG Color contrast checker」を使うとブラウザ上で1ページごとに一斉チェックができるので手軽に確認できます。
https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf
拡張機能をインストールし、アイコンをツールバーに固定します。
チェックしたいページで、アイコンをクリックするとDeveloperツールのような画面が開き、各カラーのコントラストチェック結果が表示されます。
↑この画面では、背景色と文字色のコントラスト比が足りないので警告が出て、その該当部分が赤い■で囲われています。
コントラスト比については「少なくとも4.5:1 のコントラスト比がある」こととWebアクセシビリティ基準が設けられているので、4.5:1以下になるコントラスト比のところにチェックが付きます。
コントラスト比の修正はデザインの美しさや仕上がりと大きく関わってくるため、どこまでコントラストを付けるかというのはデザイナーさんやクライアントと検討するのがベストかもしれません。例えばメニューバーや、商品販売ページ、サービス紹介ページなどテキストの読みやすさが重要なページはコントラストをしっかり付けるなどと基準を決めてもよいかもしれません。
4.画像の代替テキスト（alt属性）チェックツール
代替テキストは画像の代わりとなるもので、何らかの原因でWEB上の画像が表示されない場合に代わりに表示されたり、音声で読み上げるブラウザなどで画像部分に差し掛かったときその画像を説明するために読み上げたりします。
色が見えづらい方はWEBページの読み上げ機能を使われることもあるため、画像に設定された代替テキストがとても重要な役割を果たします。代替テキストが付与されているかどうかはいろいろなツールでチェックできます。
◆ブラウザツール「画像ALTチェッカー」
https://trickster.tools/image-alt-checker/
◆GoogleChrome拡張機能「SEO META in 1 CLICK」
https://kumaweb-d.com/web/tool-seo-meta-in-1-click/
◆GoogleChrome拡張機能「見え〜るAlt」
https://chrome.google.com/webstore/detail/見え〜るalt/gkpbonkmpkgkjdaffjecchbephmjmekj/related?hl=ja
その他にもたくさんのツールがありますので、使いやすいものでチェックしてみてください。
■関連する過去記事
画像の代替テキスト（alt属性）のスピーディーで最適な書き方と抜け漏れチェック方法
SEO対策チェックツール「SEO META in 1 CLICK」で調べられる項目を解説！
まとめ
ここまで色が見えづらい方々にとっても「やさしい」WEBサイトにするためのチェックツールをご紹介させていただきました。
ガイドラインが複数出ているとはいえ、最終的にデザインはターゲット層にどんな印象を持ってもらうか、という目的があると思います。どの程度まで調整するかどうか、個別に、案件ごとに検討していただければと思います。