【アクセシビリティ】多くの人が使いやすい配色を考える

最近「アクセシビリティ」という言葉を聞く機会が多くありました。

デザインをする上で見た目だけではなく使いやすさを意識しなければいけないのは常かとは思いますが、今回は「WEBデザインにおける配色」についてまとめてみました。

色のコントラスト

WEBデザインにおいては、Webコンテンツアクセシビリティガイドライン(WCAG)という基準があります。
テキストやテキスト画像のコントラスト比は少なくとも4.5:1であるべきとされていて、以下の参考サイトなどでコントラストチェックができます。
文字サイズや太さによって推奨される比は変わりますが、そちらも確認できます。

参考：色のコントラストチェッカー

色覚異常のあるユーザーへの配慮

色の見え方は人によって多少の差異がありますが、大きく違って見えている色覚異常者は約20人に1人と多くの人が存在しています。

色覚異常には赤への感度が低い、緑への感度が低いなど様々なタイプがあり、それぞれどのように見えているのか確認する方法があります。

Photoshop、Illustratorでの確認

1. ドキュメントをRGBカラーモードに変換
2. 「表示」＞「校正設定」を選択し、「P型(1型)色覚」または「D型(2型)色覚」を選択。

WEBページがどのように見えているか確認

Colorblind Web Page Filter
こちらのページに確認したいページのURLを入力すれば、画像のように確認することができます。

参考

アクセシビリティデザインの基礎: 色コントラストに関する考慮点 | アドビUX道場 #UXDojo