2019/04/03
Webサイトにおけるアクセシビリティに配慮したカラーコントラストを簡単に見つけよう！
Webサイトのアクセシビリティやカラーコントラストは意識して制作する必要があります。
でも、カラーコントラストといっても基準はどうなっているのか？また、簡単に見つけることはできないのかと探していたときに見つけたオンラインサービスをご紹介します！
そもそもアクセシビリティの基準とは？
Web Content Accessibility Guidelines (WCAG) 2.0 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。 このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、学習障害、認知障害、運動制限、発話困難、光過敏性発作及びこれらの組合せ等を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。又、このガイドラインに従うと、多くの場合、ほとんどの利用者にとってウェブコンテンツがより使いやすくなる。
出典：W3C
「Web Content Accessibility Guidelines (WCAG) 2.0 」に基づいた一定の基準を設けたガイドラインになり、これに従うことで人々にとって利用しやすいWebサイトとなります。
達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。
| 文字の種類 | AA | AAA |
|---|---|---|
| 通常文字 (22px未満) | 4.5 以上 | 7 以上 |
| 巨大文字 (22px以上) | 3 以上 | 4.5 以上 |
| 太文字 (14px以上) | 3 以上 | 4.5 以上 |
達成レベルに関しては調べてみないと実際に何をどんな風に変えていけばいいかが悩みどころですよね。
そんなとき、デザインとコーディングどちらでも使える便利なオンラインサービスがこちらになります。
color.review
color.reviewの使い方は右パネルの前景、または背景をクリックし、ベースのカラーを設定します。あとは、スライダーでAAA、AAに収まるように調整するだけです。
レベルはこの部分に表示がされます。
コントラストが十分なら、AAAまたはAA
コントラストが足りてないなら、FAILになります。ひと目で確認できるので非常に便利ですね。
まとめ
アクセシビリティを意識したWebサイト制作をする際、正しい知識とこういったサービスを活用して、誰もが使いやすいサイト制作を心がけていきましょう！
ボーンデジタル (2015-07-27)
売り上げランキング: 104,496
コーディング業務のご依頼、ご相談の詳細についてはこちらから
最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。
| 次の記事へ | 前の記事へ |
関連記事
よろしければこちらの記事もお読みください。
WEB業界ならqam！qam（カム）はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ（コーディング）、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。
