みなさん、ウェブサイトで使用する「色」はどのように決めていますか？
- 会社や事業のイメージに合わせた色を使用している
- 素敵だと思うウェブサイトのカラーリングを真似している
- 好きな色を使っている
といったように、さまざまな選び方、決め方があると思います。
ですが、実は色の選び方にもウェブアクセシビリティが関わってくるのを知っていますか？
この記事では、ウェブアクセシビリティに配慮した色の使い方についてご紹介します！
ウェブアクセシビリティに配慮した色使いとは？
ウェブアクセシビリティに配慮した色使いとはズバリ「どんな状況でも判別できる色使い」のことです。
日常でよく使われる配色の中には、視覚障がいや色覚特性を持つ人にとって「見づらい」「読めない」というものが存在します。
色使いに配慮せずウェブサイトを作ってしまうと、大切な情報が一部の人にとっては「見づらい」「読めない」事態になってしまう可能性があるのです。
また、カラーのウェブサイトやテキスト、グラフを白黒印刷したら
「色が薄くて見えない」「背景色が濃すぎて文字が読めない」「グラフの凡例がどれも同じ色でわからない」
なんてことになってしまった経験はありませんか？
今からご紹介する点に気を付けるとこういったことも避けることができます。
気を付けるべき4つのポイント
コントラストを高くする
コントラストとは、明るさや色の差のことです。
コントラストが高いと色の明暗がはっきりとするため、色の区別が付きやすくなります。
国際標準となっているウェブアクセシビリティガイドラインWCAG（Web Content Accessibility Guidelines）では、対応レベルによって文字やアイコンのコントラストに基準が設けられています。
【OK】
コントラストがWCAGで定められた基準をクリアしている
【NG】
コントラストが低く文字が読みづらい
補色の組み合わせを避ける
補色とは、色相環で正反対に位置する色の組み合わせのことです。
例として挙げると、赤と緑、青とオレンジ、黄色と紫などが補色の組み合わせになります。
補色の組み合わせはコントラストが低く、色の明暗がわかりにくいため避けた方が良いとされています。
また、目がチカチカするような強い対比効果を生み出すので、閲覧時に目が疲れやすいです。
これも補色を避けた方が良いとされる理由の一つです。
【NG】
赤と緑という補色の組み合わせなので目がチカチカする
濃い色と薄い色を組み合わせる
濃い色と薄い色を組み合わせることでコントラストが高くなり、視認性が上がります。
また、「重要な情報は濃い色で表現する」「同じグループの情報は同じ濃さの色にする」などの工夫をすることで、デザインやコンテンツの階層を明確にすることができ、ウェブサイトを訪れた人が情報を把握する手助けになります。
【NG】
濃い色と濃い色、薄い色と薄い色の組み合わせで読みづらい
色の明るさ、明度を揃える
色の明るさ、明度を揃えると、閲覧時の視覚的な疲労をおさえることができます。
それだけでなく、コンテンツに統一感を出すことができるため、わかりやすさの向上に繋がります。
【OK】
色の明るさが同じくらいなので読みやすく、統一感も感じられる
【NG】
色の明るさに差があり、目が疲れてしまう
便利なツールの紹介
最後に、コントラストなどを確認するために普段から使用している便利なツールをご紹介します！
GoogleChromeの拡張機能「Stark Accessibility Checker」です。
ウェブサイトのコントラストを計算してくれるだけでなく、色覚特性を持っている人の見え方のシュミレーション機能などが付いています。
こちらを使いながらウェブサイトを確認すると、思わぬところに見えづらい、読みづらい部分があることに気が付くと思います。
こういったツールは他にもありますので、ぜひ試しながら理解を深めてみてください！
まとめ
今回は「ウェブアクセシビリティに配慮した色の使い方」についてご紹介しました。
ウェブサイトのデザインはとても大切ですが、コンテンツ、情報が伝わらなければ本末転倒です。
どんなことに気を付ける必要があるのかをしっかり理解し、デザインとウェブアクセシビリティが両立できると理想的ですね。
ぜひ色々なウェブサイトを観察してみてください！
