top of page
検索

色覚異常者に配慮したウェブサイトとは？ウェブアクセシビリティにおける色・コントラストの考え方

ウェブアクセシビリティにおける色


ウェブアクセシビリティとは？


ウェブアクセシビリティとは、障害を持つ方にとって配慮されたウェブサイトを作成することです。


例えば、目の見えない人のために読み上げ機能を実装したり、ご高齢の方のために文字を大きくして実装したりなどする取り組みが挙げられます。


ウェブアクセシビリティと色の関係性


日本では、男性の約5％、女性の約0.2％が色弱と言われています。

日本国内で、およそ320万人の方が色弱者だということになります。


特に、男性は、20人に1人は色弱者となるため、高い割合で、見える色に障害を抱えている人がいると言えるでしょう。



ウェブサイトにはさまざまな配色が使われています。

しかし、これらの色弱者に伝わらないウェブサイトになっていては、ビジネスの機会損失を生んでしまいます。


このため、色が見えづらい人や色の違いがわかりづらい人に配慮されたウェブサイトを作成する必要があるのです。


色覚異常者（色覚障害者）の例


色覚異常者とは、正常とされる人とは色が異なって見えるという症状があります。


そのため、日常生活においても、色の区別がつきにくい場合があり、生活に支障をきたしてしまうのです。


実際に色覚異常を持つ人の困ってしまう例


・カレンダーで、本来は休日が赤字で記載されているものの、黒字と見分けづらく、平日との識別ができない ・円グラフで示されているデータがあるものの、同系色で作成されているため、境目がわからず、正しいデータが不明である


ウェブデザインとカラースキーム


ウェブデザインにおける色


Webサイトに関わらず、日常生活においても、色にはさまざまなメッセージがあり、情報をわかりやすく伝える手助けとなります。


例えば、信号では、危険な色に赤、注意に黄色を用いています。


注意喚起のデザインには、赤や黄色が使われることが多く、これは、直感的に赤や黄色には、注目を促す効果があるので、その機能を用いているのです。


カラーは、メッセージを伝えるときに、非常に効果のある手段なのです。


カラースキームのサンプル


緑-------正常、 このまま進む（CTAボタン） 赤-------エラー、注意 黄-------警告、異常、注意


アクセシビリティガイドラインについて


良いアクセシビリティを実現することの重要性


例えば、色覚タイプの1つであるP型色覚の方は、赤みを認識することができません。

このため、「赤」で警告を示しても、上記の方には、警告を伝えることができないのです。

補足テキストを用意するなどの対応が必要です。


WCAG（ウェブコンテンツアクセシビリティガイドライン）などの主要なガイドライン


WCAG は大きく 4 つの原則に分割されます。

・知覚可能である ユーザーは、1 つ以上の感覚を使って、何らかの方法でそれを知覚できなければならない。 ・操作可能である

ユーザーは、UI 要素を制御できなければならない

（例：ボタンは、マウスだけではなく、キーボードや音声コマンドなど、クリック以外の何らかの方法で操作ができなければならない）。 ・理解可能

コンテンツが、そのユーザーにとって理解可能でなければならない。 ・堅牢

現在から将来にわたり、さまざまなブラウザで機能し、標準的なウェブ基準を使用して開発する必要がある。


色の使い方のベストプラクティス


色合い、コントラスト、テキストの読みやすさなど、色の使用に関するベストプラクティスがあります。


最近では、ライトカラーやかすみがかった色もトレンドではありますが、コントラストの観点からは、良くないクリエイティブということができます。


WebAIM Contrast Checker Toolのような色やコントラストについて、アクセシビリティ評価をツール上で行ってくれるサービスがあります。このウェブサイトは無料で使用可能です。


実際に現在ウェブサイトで使用している色やこれから使用する予定の色はこれを使ってチェックしてみましょう。


ウェブアクセシビリティで色に配慮した成功事例


配色を少なくする


有名なメッセージツール『Slack』は、もともと130色というかなり多くの配色を使って作成されていました。


さらに、青系の色が多く、色覚異常者にとっては、見えづらくなってしまっており、これもネガティブなポイントでした。


その後、アクセシビリティ基準を満たす色のみに修正し、現在、カラーパレットはわずか計18色に縮小しています。


ウェブアクセシビリティに配慮されたプラットフォームになり、さらに『Slack』を使う人は増加しました。


コントラストをはっきりとさせる


キリンホールディングス株式会社の商品・サービス情報Webサイトは、2021年10月に、公益社団法人日本アドバタイザーズ協会デジタルマーケティング研究機構が行うWebグランプリにおいて、アクセシビリティ賞を取得しています。


配色がシンプルであり、鮮やかなコントラストで見やすいサイトです。


文字色と背景色のコントラスト比があることは重要です。


色覚異常者のためにウェブアクセシビリティに配慮したウェブサイトを簡単につくろう


ウェブアクセシビリティに配慮したウェブサイトをつくることは重要ですが、そのためにサイトをゼロから改修するのは大変です。


ウェブアクセシビリティAIであれば、スクリームをサイト内にインストールするのみで、ウェブアクセシビリティに配慮されたウェブサイトを実現できます。


気になる人はぜひチェックしてみてください。

https://www.webaccessibility-ai.org/

 
 
bottom of page