前回の記事では、画像のalt属性についてご紹介しました。
今回は、文字と背景の色による読みやすさや、「色だけで情報を提供する」とはどういうことかなど、ウェブサイトの色遣いについてお伝えします。

目次

• 読みやすい配色、読みにくい配色
• 色だけで情報を提供してはいけない
• らくゆくの対応状況
• おまけ：コントラスト比の確認方法

読みやすい配色、読みにくい配色

まずはこれを見てください。表の各マスには１～５の数字が入っていますが、読めない文字はありますか？

上段左の５や、上段中央の３、上段右の１は背景と文字の色が同じなので読めなくて当然ですが、その隣の文字はどうでしょうか。
下段左の４や、下段右の５もかなり読みづらいですね。
このように、背景と文字の色が近いと、視力に問題がない人でも読みにくいものです。
スマホの小さい画面で見るときや、屋外で直射日光があるときはなおさらです。
さらに、弱視や色覚異常、老眼などの理由で、より多くの文字が読めない方もいます。
ウェブサイトに掲載する文字は、どのような方にも読みやすい配色にすることが大切です。

文字の読みやすさを客観的に表すにあたり、背景と文字の色を比で表したものをコントラスト比と言います。
国際的な規格では、小さい文字の場合はこの数値を4.5以上にすることが推奨されています。（この記事のおまけに確認方法を記載しています）
先ほどの表で、コントラスト比が基準値以上のものを丸で囲んでみると、このようになります。

思ったより少ないと感じた方も多いのではないでしょうか。
下段の１、２、４については、三色の背景全てで基準値未満という結果です。
デザインにおいて色遣いはイメージを左右する重要な要素ですが、だれにでも使いやすいサイトにするためには、デザイナーの方には常に読みやすい色遣いを意識してもらいたいですね。

色だけで情報を提供してはいけない

例えばこんなグラフを見てください。

今回は意図的に見分けにくい色にしましたが、グラフの色が似通っていて、どれが第１四半期でどれが第２四半期なのかが非常に分かりにくいですよね。
仮にもっと区別しやすい色だったとしても、色覚異常の方などが区別できない可能性もあります。

こういった場合は、「色+何か」で表すようにします。例えばこのようなイメージです。

文字の位置や、線を引くことにより、グラフのどの部分と対応しているかが一目で分かるようになりました。

それ以外にも、重要な部分を赤文字にしているところでは、赤文字だけでなく太字にしたり、リンク部分は文字の色を変えるだけでなく下線を引いたりといった工夫も有効です。
こうすれば、色の区別がつかない方に対しても、別の方法で情報を伝えることができます。

らくゆくの対応状況

さて、これまでウェブサイトの色遣いについてお話ししてきましたが、らくゆくにおいては今までこういったことが意識されていませんでした。
今後の記事ではだれでも読みやすい色遣いを意識していくとともに、過去の記事についても少しずつですが改善しています。
改善の進捗はまた記事でお伝えしようと思いますので、これからもお付き合いいただければ幸いです。

おまけ：コントラスト比の確認方法

パソコンでGoogle ChromeやMicrosoft Edgeを使っている場合、F12キーを押すと、右側に「開発者ツール」のウィンドウが開きます。

このウィンドウの左上のボタンを押してから、コントラスト比を調べたい文字にカーソルを重ねると、カーソルの近くに吹き出しが表示されます。

この中にある「Contrast」の数値がコントラスト比です。
これが4.5より大きければWCAGという国際基準を満たしていることになります。

関連リンク

アクセシビリティ改善活動レポート① 視覚障がいのある方にも画像を見てもらいたい！～alt属性書いてます～

文：ノア