目次
合理的配慮が企業にも義務化され、アクセシビリティ対応が意識されるようになってきました。そんななかでも、コーポレートカラーなどをすでに設定されている場合は特に、あまり重視されにくい背景の色と文字のコントラスト比。実は文字の読みやすさにかなり大きな影響があります。この記事では、実際に例をみてみながら、アクセシビリティにおけるコントラスト比についてみていきます。
大事なこと
コントラスト比については、アクセシビリティのガイドラインやJISの規格で数値の指定はありますが、あくまでも、「利用者のために見やすく使いやすいサイトを提供する」ことが大前提です。
どちらが読みやすいでしょう？
まずは、例AとBをご覧ください。どちらが読みやすいでしょうか。
例のAとBは、同じ背景色（#00ebdb）です。Bの、文字の色が白いほうが爽やかなイメージはつくかと思いますが、Aの、文字色が黒のほうが、文字を読み取りやすいと思います。
このように、背景の色と文字の色の組み合わせのコントラストが確保できていないと、せっかくの文字が読み取りにくくなります。
視力がある人でも読みにくいので、視力が弱い人や、色覚多様性の当事者のかたにとっては、もっと読みにくい状態になります。
そのため、コントラスト比というものは非常に重要になってきます。
たとえば、ブランディングでデザインのベースにする色が決まっていても、そのまま使うと主な対象者にとって読みにくくなってしまうのでは本末転倒になってしまいます。あらかじめ意識した設計にしておくことが重要です。
規格をみてみましょう
ウェブサイトのアクセシビリティの基準
世界的なアクセシビリティの基準である、WCAG（Web Content Accessibility Guidelines）があります。最新のW3Cの推奨バージョンは2.2です。
日本は、WCAGの内容をもとにしたJIS規格である「JIS 8341-3」がありますが、JISのほうは2016年の内容になっているので、見直しがあるかもしれません。JISのほうに見直しがあっても、WCAGの内容がベースなので、WCAGにあわせておくと今後見直しがあっても安心です。
アクセシビリティの原則は４つ
- 知覚可能
- 操作可能
- 理解可能
- 堅牢（robust）
の４つの原則が基本になっています。コントラスト比はこのなかの「知覚可能」の原則に基づいています。
原則＞ガイドライン＞達成基準＞達成方法
たとえば、1.知覚可能の原則の中の、ガイドライン1.3は以下の内容です。
＞ガイドライン 1.3: 情報、及び構造を損なうことなく、様々な方法 (例えば、よりシンプルなレイアウト) で提供できるようにコンテンツを制作すること。
1.3には6個の達成基準があります。
そのなかの1.3.1の基準には、
1.3.1 情報及び関係性: 何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。 (レベル A)
とありますが、この基準を達成するための方法は複数あります。
達成基準にはレベルが3段階あります。
A：アクセシビリティに対応しているというためには最低限必要なレベルの内容
AA：Aに比べると高度な内容。日本でも行政関連のウェブサイトはAA準拠が求められているそうです。
AAA：かなり高度な内容で、すべて満たすことは推奨されていません。まずはAAをすべて満たして、可能なら項目を一部対応するのがよいでしょう。
コントラスト比の基準
コントラスト比は、ガイドライン 1.4である、「コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む。」に規定されています。
1.4の達成基準には二段階あります。
最低限の基準（AA）としては、
- 小さい文字では少なくとも 4.5:1 のコントラスト比
- サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比
高度な基準（AAA）としては、
- 小さい文字では少なくとも7:1のコントラスト比
- サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 4.5:1 のコントラスト比
となります。これだけではわかりにくいですよね。
コントラスト比の例
例として３つパターンを用意しました。小さい文字を使う場合に合格できるのは、これらのなかではパターンBのみです。
パターンAのコントラスト比は、AAの基準なら大きい文字にのみ使用できます。
それでは、AAを達成したいとき、この枠の色の組み合わせは使えるでしょうか？
この組み合わせでは、コントラスト比が2.86:1になるので大きいテキストにも使用できません。
コントラスト比の確保には例外もあります！
たとえば、フォームに未入力の項目があってクリックできない送信ボタンや、ただの飾りのみの用途でテキストが入っているようなものは、コントラストの要件はありません。
便利なツールの紹介
ツールはさまざまありますが、Adobe Colorが使いやすくてお勧めです。
コントラスト比については文字サイズとあわせて合格かわかり、色覚多様性対応の場合は、色の組みあわせが適切か確認できます。
https://color.adobe.com/ja/create/color-contrast-analyzer
https://color.adobe.com/ja/create/color-accessibility
ウェブアクセシビリティ総合支援サービス【WEBLY】の紹介
さて、先駆では、ウェブアクセシビリティ対応に取り組む企業や法人様に向けた、包括的な支援サービスを提供しております。現状を知るための調査・方針策定からアクセシビリティ対応までしっかりサポートいたします。もちろんコントラスト比についても対応いたします。
アクセシビリティの必要性はわかるものの、どこから対応を進めるか決めかねているかたも、本格的に対応を進めたいかたも、ぜひご検討ください！