ウェブアクセシビリティ対応における「コントラスト比」とは？定義や基準、確認方法をわかりやすく紹介

ウェブアクセシビリティ対応において、コントラスト比の理解は重要です。障害者や高齢者など誰もが見やすく読みやすいWebコンテンツにするために、ウェブアクセシビリティの規格「JIS X 8341-3」にもコントラスト比についての基準が設けられています。しかし「コントラスト」という言葉は聞いたことがあっても、「コントラスト比とはどういうものなの？」「どうやってコントラスト比を確認すればいいの？」といった疑問を持つ担当者も多いのではないでしょうか。本記事では、ウェブアクセシビリティ対応におけるコントラスト比とは何か、その達成基準や確認方法について解説します。

ウェブアクセシビリティ対応におけるコントラスト比とは、テキストや文字画像の「文字サイズ」と「文字の色」「背景色」「輝度」の差のことです。障害者や高齢者をはじめ様々な状況の人がWebサイトのコンテンツを見やすく、利用しやすいようにする施策の一つとして、達成基準が定められており、ウェブアクセシビリティ対応には基準達成が欠かせません。

ウェブアクセシビリティの基本事項については、「ウェブアクセシビリティって何？企業のWeb担当者が最低限押さえておきたい基礎知識」にて詳しく解説していますので、あわせてご覧ください。

そもそもコントラストとは、対象や対比という広い意味を持つ言葉です。たとえば画像であれば、明るい部分と暗い部分の差の「明暗の差」を表し、コントラスト比とは対象となる色構成において、最も明るい部分と、最も暗い部分について、色を数値化し比率にしたものです。「コントラスト比が高い」なとど表現する場合は、明暗の差が大きいという意味になり、その境界がはっきりと認識できます。逆に、コントラスト比が低いということは、境界の視認がしにくい（ぼやけた）ものになります。

したがって、Webサイトの文字情報では、コントラスト比が低いよりも、高いほうが「読みやすい」と感じます。ただし、Webサイトでは様々な色や写真が装飾として使われる関係上、コントラスト比が低くなってしまうケースがあります。そこで、ウェブアクセシビリティに対応する上で「認識しやすい」最低限のコントラスト比が定められています。
 

ウェブアクセシビリティに配慮したコントラスト比は、国際基準の「WCAG（Web Content Accessibility Guidelines）」にて推奨される基準が定められています。
そもそもWCAGは、「WCAG 2.0」として、Webサイトのコンテンツをアクセシビリティに配慮するための推奨事項が記された国際基準です。その内容には、様々な障害のある人に対する配慮基準が示されています。コントラスト比もその一つです。

WCAG 2.0は、「原則「ガイドライン」「達成基準」の3つで構成されています。そして、これら構成に沿ってウェブアクセシビリティに関するJIS規格の「JIS X 8341-3:2016」が改定されています。

「JIS X 8341-3」については、「企業サイトが対応すべき適合レベルは？「JIS X 8341-3」における適合レベルの違いと評価方法について解説」にて詳しく解説していますので、あわせてご覧ください。

障害者や高齢者などを含めた様々なユーザーに対して見やすく読みやすいWebサイトを作成するために、文字サイズや色のコントラスト比を意識することが重要です。

たとえば、読みにくい小さな文字や、画像とテキストのコントラスト比が低く認識しにくいコンテンツは、障害者や高齢者が利用しにくいことはもちろん、健常者も含めて閲覧上のストレスを生み、サイトからの離脱率を上げてしまう要因にもなり得ます。

Webサイトにおける「文字」は、あらゆる情報の中で最も基本的な構成要素です。企業にとっては、コントラスト比を意識したサイト構築を行うことが、より多くのユーザーに自社の取り組みやサービスを届けることに繋がる、といっても過言ではないでしょう。

ウェブアクセシビリティに対応したコントラスト比の基準は、ウェブアクセシビリティ基盤委員会のJIS X 8341-3の達成基準で明示されています。

最低限要求されている達成基準は「4.5:1以上」です。これは、視覚に障害を受けて見えにくい、あるいは眩しいなど、日常生活に不自由を感じる中度のロービジョンの人がテキストを読めるようにするためのコントラスト比です。

この達成基準の意図として、「WCAG 2.0　解説書」で以下のように解説されています。

総務省は、公的機関に求めるウェブアクセシビリティ確保レベルとして「適応レベルAA」への準拠を推進しています。達成基準「AA」で求められる達成基準が「4.5:1以上」ですから、公的機関に習って「適応レベルAA」を目標とするならば、このコントラスト比を最低限として対応する必要がある、ということになります。

法律上、民間事業者のウェブアクセシビリティ対応は努力義務とされていますが、コントラスト比を意識することで、自社のWebサイトで発信する情報やサービスを、障害者も含めたより多くのユーザーへ届けられます。
ウェブアクセシビリティの努力義務については「【2024年改正法施行】企業Web担当者は、"努力義務"のウェブアクセシビリティにどう向き合うべきか」にて詳しく解説していますので、あわせてご覧ください。

コントラスト比が基準を満たしているか否かを肉眼で確認することは困難です。適合レベルに準拠していることを確認する方法として、オンラインツールやブラウザにインストールできる拡張機能の活用が便利です。

コントラスト比をチェックするツールを利用することで、Webサイトで利用しているカラーコントラストなどを数値で確認できます。
オンラインツールは様々なものがありますが、ここでは一部をご紹介します。

• WebAIM Color Contrast Checker：文字と背景色のコントラスト比を確認
• Colorable：カラーコードを入力、またはスライダーで変化させながら確認
   

特定のWebサイトのコントラスト比を確認する場合は、ブラウザの拡張機能を使うと便利です。たとえば、以下のような拡張機能をインストールして、Webページのコントラスト比を確認できます。

※Webサイトによっては正しく確認できないケースもあるため、オンラインツールによるコントラスト比のチェックも併用することをおすすめします。

• axe DevTools：Webページにおいて、色のコントラスト比の不足箇所を発見できるツール。ChromeやEdge、Firefoxの拡張機能としてインストールできる
• Lighthouse：Googleが提供しているツール。Chromeの拡張機能としてインストールすることで、Webページに対してテストを実行し、パフォーマンスや品質などを解析する

以上のような方法で、Webサイトのコントラスト比をチェックできますが、コントラスト比を確認して既存のWebサイトを修正するには、調査や修正に大きな手間やコストがかかるため、適合レベルAAに準拠させる作業はハードルが高いかもしれません。

そのようなときは、導入するだけでWebサイトを適合レベルAAに準拠させることができる、クラウドCMSの「ShareWith」を導入する方法もあります。

ShareWithのウェブアクセシビリティ対応に関する詳細は、こちらをご覧ください。