ウェブコンテンツを魅力的に見せるためには、色を効果的に使用することが重要ですよね。
コーポレートカラーや、表現したいイメージに合わせて使用する色を決めていることが多いかと思います。
ウェブアクセシビリティにとっても色の扱いというのは重要です。
なぜなら、配色によってはそのコンテンツを利用できないユーザーが出てくるからです。
今回のお話は、ウェブアクセシビリティと色の関わりについてです。
どのような問題を引き起こしかねないのか、それはどう解決したら良いのかを具体的に解説します。
色の使い方に配慮してウェブアクセシビリティを向上させ、さらに魅力的なコンテンツを作っていきましょう。
1. 色とウェブアクセシビリティの関係
色とウェブアクセシビリティにはどのような関わりがあるのでしょうか？
それを理解するためには、どのようなユーザーが色に関して不便を感じる可能性があるのかを知る必要があります。
さっそく見ていきましょう。
1-1. 視覚障がい者
視覚障がい者の中でも特に色の影響を受けやすいのは、色覚特性がある人です。
見え方はさまざまですが、赤と緑、青と黄色がそれぞれ同じように見えたり、中にはほとんど白黒状態に見える場合もあります。
そのような場合、背景色と文字色に一定のコントラストを確保しておかないと、文章を認識できなくなる可能性があります。
下の画像を見てください。
どちらも背景は白で、その上に異なる文字色で「背景色と文字色のコントラストは、視認性の高さと深い関わりがあります。」と書かれています。
※コントラスト・・・色の明るさや鮮やかさの差のこと。
※視認性・・・目で見たときに認識しやすいかどうかの度合い。
同じ背景色でも、文字色によってコントラストは変わってきます。
1枚目はコントラストが低いため、人によっては見えない、または見えにくい可能性があります。
2枚目はコントラストが高くなっています。
こちらの方が、パッと見たときに文字が分かりやすいのではないでしょうか？
また、色のみで情報を提供している場合、色覚特性の程度によっては情報を見落としたり、正しい情報を得られない可能性があります。
なぜなら、色で判別しなければいけない部分が見えなかったり、見落としやすくなってしまうからです。
色のみで情報を提供している例を2つ挙げます。
1つ目は「必須項目の枠線が赤くなっているお問い合わせフォーム」です。
この場合、枠線が赤くなっている以外に必須項目であると示しているところがないので、色のみで情報提供をしていることになります。
どこが赤枠であるか判断できない場合、必須項目を特定できなくなってしまいます。
「お問い合わせをしようと思ったのにうまくできない」という事態につながりかねません。
もう1つの例は「色分けのみのグラフ」です。
下のグラフをご覧ください。
データ別に色が異なり、凡例も付いていて一見分かりやすいグラフのように思えます。
しかし、色を判別することができない、もしくは判別に時間がかかるなどの場合、これは分かりにくいグラフになってしまいます。
色覚特性の見え方をシミュレーションできるツールを使って、実際にこのグラフを見てみましょう。
今回はより分かりやすくするため、A型色覚でシミュレーションします。
A型色覚・・・多くの人が3種類持っている錐体という視細胞を、1種類しか持たない、もしくはまったく持たないため、色を明暗でしか感じることができない色覚。色覚特性の中でも、他のタイプに比べ発現頻度が低い。
こちらがシミュレーターで出力したグラフです。
いかがでしょうか？
上のグラフに比べると、だいぶ色の区別が付きづらくなったと思いませんか？
こういった場合、データの読み間違いが発生する可能性が考えられます。
上記の例から分かるように、配色次第では誤解を生んだり、正しい情報が得られない可能性があります。
また、視力が著しく弱い人やまぶしさを感じやすいという人も、コントラストをしっかり確保していないと文字を読むのが困難になる場合があります。
1-2. 精神障がい者
精神障がいの症状は非常に多岐に渡るため、一概に言うことは難しいです。
しかし、あらゆる精神障がいにおいて注意力、思考力の低下などが見られることが多々あるため、過剰な刺激はウェブコンテンツ利用の妨げになる可能性があります。
過剰な刺激の例として、鮮やかすぎる色使いや高すぎるコントラストが挙げられます。
こういった場合、「注意が逸れ、集中できない」「不安やストレスを感じる」という状況を引き起こすことが考えられます。
また、感覚過敏な人の場合、過剰な刺激が目の痛みや頭痛、めまいといった身体症状につながることがあります。
参考：NHK発達障害プロジェクト 視覚が過敏「光」「色」がストレス
1-3. 一時的な障がいがある人
アクセシビリティについて考えるときには、怪我や病気、機器の故障などで一時的になにかしらの制限を受ける人を「一時的な障がいがある人」として考えます。
色に関係した一時的な障がいとは、どのようなものがあるでしょうか？
例えば、目の怪我や病気で、一時的に視力が低下していたり疲労や不快感を感じやすくなっている人です。
こういったユーザーは、コントラストが低いと文字や画像の判別が難しい状況であることが考えられます。
反対にコントラストが高すぎる場合も目の負担となり、疲れや不快感を感じやすい可能性があります。
また、ウェブサイトに掲載しているデータなどを紙に印刷したときが考えられます。
その際、カラー印刷ではなく白黒印刷が使われることもあるでしょう。
コントラストに配慮していないコンテンツやグラフの場合、白黒印刷をしたら見づらくなる可能性が大いにあります。
みなさんも「カラー写真を白黒印刷したら、潰れてしまってなんの写真か分からなくなってしまった」といった経験が一度はあるのではないでしょうか？
1-4. 高齢者
人間は年齢が上がるにつれ色の識別が難しくなると言われています。
これは水晶体が濁ったり、目に光が入りづらくなるな
どの複合的な原因で起こると考えられています。
参考：参天製薬 目の病気百科 後天性色覚異常の解説
また、白内障などによる見え方の変化により、低すぎるコントラストだと文字などの識別が困難になることがあります。
白内障は加齢を原因とすることが多い病気で、70歳以上になると80％以上の人が発症するというデータもあるほどです。
参考：NHK健康チャンネル 40代から注意！白内障の原因や見え方、なりやすい人とは
高齢者のほとんどが、コントラストが低い文字を読むことに困難が伴うと言っても過言ではないかもしれません。
2. ウェブアクセシビリティから考える色の使い方
2-1. 色に関するWCAG基準
それでは、ウェブアクセシビリティに配慮した色の使い方には、一体どのようなことが求められるのでしょうか？
WCAG2.0の色に関わる項目の中から、JIS X 8341-3:2016における適合レベルAA、Aとなっている基準を見ていきましょう。
1.4.1 色の使用
下記は、WCAG2.0解説書 達成基準1.4.1を理解するの引用です。
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。（レベルA）
少し分かりづらいので噛み砕いてみましょう。
- 情報を伝える
- なにかをするように指示する
- ユーザーが反応するように促す
- 見た目の違いを表す
こういったことを色を用いて伝える場合、「色だけに頼らず他の方法も一緒に使うべきである」ということが書かれています。
1.4.3 コントラスト（最低限）
下記は、WCAG2.0解説書 達成基準1.4.3を理解するの引用です。
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)
大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェースコンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。
こちらも内容を整理してみましょう。
まず、テキストや文字画像は、背景色と文字色の間に4.5:1以上のコントラスト比が必要です。
ただし、4.5:1未満のコントラスト比でも良いとされる場合が3つあります。
1つ目は大きい文字のときで、このときは3:1以上のコントラスト比があれば良いとなっています。
2つ目は付随的なテキストや文字画像であるときで、コントラスト比の要件を満たしていなくても構いません。
3つ目はロゴやブランド名の一部であるときで、このときもコントラスト比の要件を満たしていなくても構いません。
2つ目の「付随的なテキストや文字画像であるとき」に関しては、さらに以下の4つが挙げられています。
- アクティブではないユーザインタフェースコンポーネントの一部
- 純粋な装飾
- 誰も視覚的に確認できないもの
- 重要な他の視覚的なコンテンツを含む写真の一部分
1つずつ見ていきましょう。
【アクティブではないユーザインタフェースコンポーネントの一部】
ユーザインタフェースコンポーネントとは、フォームやリンク、ボタンなどのことです。
アクティブではないということは、使える状況ではないということです。
具体例を挙げると、ある条件を満たさないと押せないボタンなどが該当します。
利用規約に同意しないと送信ボタンが押せない、というフォームを見かけたことはありませんか？
そういった場合、ボタンの操作ができない間はボタンのテキストに4.5:1以上のコントラスト比が要求されないということです。
【純粋な装飾】
たとえテキストであってもそれが装飾的な役割であり、情報提供のために存在しているわけではない場合は、最低限のコントラストの要件は適用されません。
チャコウェブ公式サイトに装飾のテキストが存在するので、具体例として見てみましょう。
こちらはトップページの見出しですが、「チャコウェブの特徴」が情報を提供しているテキストで「FEATURE」が装飾とみなされます。
この場合、「チャコウェブの特徴」は4.5:1以上のコントラスト比が求められますが、「FEATURE」はそれが求められません。
【誰も視覚的に確認できないもの】
誰にも見えないものは見えないままで良いので、コントラスト比に配慮する必要がありません。
【重要な他の視覚的なコンテンツを含む写真の一部分】
写真でなにかを伝えようとしたときに、その写真内に存在している文字が重要な情報ではない場合、コントラスト比が4.5:1を満たしていなくても構いません。
重要な情報ではない例としては
- 街の風景をメインにした写真に映り込んだ看板の文字
- 人物を中心とした写真の中で、その人物が着ている服に書かれた文字
などが挙げられます。
2-2. コントラスト比とは？
さて、さきほどから頻繁に出てくる「コントラスト比」という言葉について簡単にご説明しておきます。
ウェブアクセシビリティの文脈で出てくるコントラスト比とは、背景色と文字色の相対的な明るさ（相対輝度）の差を数値で表したものです。
1:1から21:1の範囲で表されます。
最小値の1:1は、背景色と文字色が同じでまったく区別がつかない状態です。
最大値の21:1は、文字が黒で背景が白のように最もコントラストが強い状態です。
コントラスト比を自分で計算するのは大変なので、自動で算出してくれるツールを使用するのがおすすめです。
Google Chromeの拡張機能やFigmaのプラグインとして使用できるものなど、色々なものがあります。
私はいつもStarkというものを使用しています。
コントラスト比のチェック以外に、視覚障がいでの見え方をシミュレーションすることもできて、大変便利です。
Stark公式ホームページ
2-3.色を使うときに配慮すること
さきほど確認したWCAG2.0の内容を元に、色を使うときに配慮することを2つ解説します。
色の付け方を工夫する
色の付け方を工夫する場合の大前提として、コントラスト比を確保することがあります。
例外事項を除き、4.5:1以上のコントラスト比を確保することが必須です。
ただ、コントラスト比を確保していたとしても見にくい配色になってしまうことがあります。
それは以下の2つのときです。
- コントラスト比が高すぎるとき
- 補色を組み合わせたとき
コントラスト比が高すぎるとき
コントラスト比を確保することは大切です。
しかし、コントラスト比が高くなりすぎてしまうと、目が疲れやすくなったり、感覚過敏な人が不快感を感じてしまう可能性があります。
そこで、適度なコントラスト比にすることが重要です。
例えば、白と黒の組み合わせについて考えてみましょう。
#FFFFFFと#000000だとコントラスト比は21:1です。
これを#FFFFFFと#333333に変更すると、コントラスト比は12.63:1となります。
実際にこちらの画像を見比べてみてください。
コントラスト比21:1の方は目がチカチカし、コントラスト比12.63:1の方が背景と文字がなじんでいるような気がしませんか？
いくつからいくつまでが適度と一概に言うのは難しいですが、極端に高くなりすぎないように注意する必要があります。
補色を組み合わせたとき
補色とは、色相環で正反対に位置する色の組み合わせのことです。
赤と緑、青とオレンジ、黄色と紫などが補色の組み合わせになります。
そもそも、補色はコントラスト比が低くなりがちなので避けた方が良いとされています。
また、目がチカチカするような強い対比効果を生み出すので閲覧時に目が疲れやすくなります。
これらの理由から、補色の組み合わせは避けた方が良いでしょう。
色以外でも情報を提供する
色だけで情報を提供した場合、「まったく伝わらない」「一部しか情報が伝わらず、誤解が生まれる」といった事態が予想されます。 そういった事態を防ぐ方法が「色以外でも情報を提供する」です。
色だけでなくマークやテキストも使用して、複数の手段で情報を提供すると良いでしょう。
視覚障がい者の項で挙げた色のみで情報を提供している例を、色以外でも情報を提供するように改善してみましょう。
必須項目の枠線が赤くなっているお問い合わせフォーム
以下のように変更を加えると、フォームの必須項目を特定しやすい作りにすることができます。
改善前：
- 枠線が赤くなっている以外に必須項目であると示しているところがない
- どこが赤枠であるか判断できない場合、必須項目を特定できない
改善後：
- 必須項目には（必須）と表記するように変更
- 任意項目には（任意）と表記するように変更
- 赤枠の位置が分からない場合でも、テキストから必須項目を特定できるようになった
色分けのみのグラフ
以下のように変更を加えると、データの内容を誤解しにくいグラフにすることができます。
改善前：
- 色以外にグラフデータと凡例をリンクさせるものがない
- 色を区別するのが難しい状況だと、凡例からデータの種別を判断できない
改善後：
- データを色だけではなく模様でも分けた
- 色が瞬時に分からない状況でも、模様から凡例とデータをリンクさせられるようになった
3. チャコウェブ公式サイトの色使い
チャコウェブ公式サイトはJIS X 8341-3:2016のAAに準拠するよう作られています。
チャコウェブ公式サイト 2023年ウェブアクセシビリティ試験結果
色に関わる基準をどのように達成しているのか見てみましょう。
3-1. テキストとボタンのコントラスト比
サイト上の情報を提供しているテキストは、すべてコントラスト比4.5:1以上になっています。
タイトルの英語部分など一部コントラスト比が低くなっているところがありますが、こちらは装飾的なテキストです。
上で解説した通り装飾的なテキストはコントラスト比の要件が適用されませんので、特に問題ないと考えられます。
また、テキストが黒の部分は#000000ではなく#333333を使用するようにしており、コントラスト比が高くなりすぎるのを防いでいます。
ボタンも濃いめの青と白でコントラスト比の要件を満たすようにしています。
ホバー時にボタンの色が変化しますが、変化後もコントラスト比を保つようになっています。
3-2. 各フォームの任意・必須表示
各フォームの項目には、任意か必須かを表示しています。
色分けだけではなく「任意」「必須」というテキストも併用して、下記のような表示を行っています。
4. まとめ
今回はウェブアクセシビリティと色の関係についてまとめました。
改めて、色を使用する場合に配慮すべきことは以下の2点です。
- 色の付け方を工夫する
- コントラスト比を極端に高くしすぎない
- 補色を組み合わせない
- 色以外でも情報を提供する
色はホームページを魅力的に見せる上で重要なものです。
また、情報やデータを分かりやすく伝える効果もあります。
ただ、ウェブアクセシビリティに配慮しない使い方をしてしまうと、一部の人にとっては分かりにくかったり、情報が得られないという事態になってしまいます。
あらゆる人に分かりやすく魅力的に伝わるよう、効果的に色を使っていきたいですね。
