今月の4月1日をもって民間企業にもアクセシビリティ対応が適用されることになりました。

弊社では以前から「ウェブアクセシビリティ」に関する取り組みを行っていたこともあり、
海外でウェブアクセシビリティに関する訴訟があったウェブサイトのご相談を頂き、
検査を実施し問題箇所を洗い出し、改善/対応を行ったことで訴訟を取り下げた実績もございます。

私はwebサイトのデザインを担当しているので、
デザイン設計時にはUI（テキストやボタンのサイズ感等）や配色のコントラスト比など
アクセシビリティに配慮してデザインを行っているため見た目のエラーは基本的には出ません。
ただ「miChecker」のロービジョン検査をした際に「重要なエラー」としてよく出るエラーが1つあり、
コーディング時に対策しておく必要があるのでご紹介します。

2024年5月現在でも様々なWEBサイトで「miChecker」のロービジョン検査するとほとんどのサイトでこのエラーが見受けられます。

コンテンツに背景画像を設定した時のコントラスト

エラー内容

文字色と背景色のコントラスト比が3：1未満です。（もし背景画像が非表示にされた場合、文字色と背景色のコントラスト比に問題がある可能性があります。）

コンテンツ内に背景画像を設定していた場合に対策しておかないと必ず表示されるエラーです。
背景画像はエリア内いっぱいに設定することが一般的かと思いますが、
「背景画像が表示されなくなった場合」背景色と文字色のコントラスト比が弱いとNGです。
私は勘違いして背景画像と文字色のコントラスト比のことを言っていると思って試行錯誤していました。。（私のようにエラー内容の（）内に書いてあるので見落とす方も多いかもしれません）

例えば、下記イメージのようにコンテンツ内の背景画像が暗めなので白テキストにしているが
親要素(body等)の背景色が白だと「背景画像が表示されなかった場合」背景色が白でテキストも白なので
コントラスト比が基準値に満たさなくなりエラーとなるようです。

対策

背景画像を指定する際に、合わせてコントラスト比が高い背景色も指定します。

例）コンテンツ背景画像が暗めでテキストが白の場合
background-image: url(◯◯◯◯◯);
background-color: #000;
または
background: url(◯◯◯◯◯)　#000; ※背景画像が表示されなくても黒ベタ背景に白テキストならコントラスト比がクリア

コントラスト比を検証できるサイトもありますので、目視ではなくこういったチェッカーを使用しましょう。
色のコントラストチェッカー

パララックスなど疑似要素で背景画像を表示している場合は、
親要素に透過色（background: rgba(0, 0, 0, 0.6);等）を設定すればエラーを回避することができます。

備考（注意事項）

miChecker等の検証ツールでは、背景画像の配色が判断できないため、背景画像と文字色のコントラスト比を算出（検査）できません。
背景画像のコントラスト比は「要判断箇所」としてピップアップされるので目視チェックする必要があります。

J10NETでは、Webコンサルティングや企画/提案から、サイト制作までをオールインワンで対応し、運用まで承っています。
アクセシビリティ対応だけのご依頼やサイト制作と合わせてアクセシビリティ対応までご依頼頂くお客様も増えています。

ウェブアクセシビリティ対応にお困りの方は、ぜひお問い合わせください。

ウェブアクセシビリティの必要性や、具体的な取り組みについては、
過去記事に詳細がありますので、是非あわせてお読みください！
ウェブアクセシビリティ（Web Accessibility）対策の必要性