こんにちは！パブリテック事業部のデザイン担当の中村です。
今回は、配色設定におけるウェブアクセシビリティ改善のポイントをご紹介します。
WEBフォーム作成ツール「LoGoフォーム」では、WEBフォームの文字色と背景色の設定を変えることができます。
「みんなの公共サイト運用ガイドライン」に基づいたウェブアクセシビリティに配慮した設定にすることで、誰から見ても見やすいWEBフォームを作りましょう！
そもそもウェブアクセシビリティや公共サイト運用ガイドラインとは、いったい何なのでしょうか？
ウェブアクセシビリティとは
ウェブアクセシビリティとは、高齢者や障害者を含めて、誰もがホームページ等で提供される情報や機能を支障なく利用できることを意味します。
※みんなの公共サイト運用ガイドライン（2016 年版）より抜粋
みんなの公共サイト運用ガイドラインとは
国及び地方公共団体等公的機関の「ウェブアクセシビリティ」対応を支援するために総務省が作成したガイドラインです。公的機関でウェブアクセシビリティへの対応が求められる背景や、JIS X 8341-3:2016に基づき実施すべき取組項目と手順、重視すべき考え方等を解説します。
※みんなの公共サイト運用ガイドライン（2016 年版）より抜粋
見る人によって情報や機能に偏りが出ないように、誰にでも使いやすいWEBサイトを作ることが求められており、その改善ポイントをまとめたものが、日本工業規格 JIS X 8341-3：2016 に基づいた「みんなの公共サイト運用ガイドライン」ということですね。
それでは、色に関する項目を具体的に見てみましょう。
- 1.4.1
色の使用: 色が、情報を伝える、動作を示す、反応を促す、
又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 (レベル A)
※ JIS X 8341-3：2016 より抜粋
例えば、WEBフォーム上で入力任意の質問を黒色、入力必須の項目を赤色にし、「赤色は必須項目です」と表示したとします。
この場合、ディスプレイをモノトーン表示にしている方や、色味を認識しづらい方にとっては入力任意の項目と入力必須の項目の区別がつかなくなってしまいますので、色以外の手段でも2つの質問の違いを表示しましょうということですね。
LoGoフォームでも最近「必須」の表示を改善しました！
次の項目を見てみましょう。
- 1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)
- 1.4.6 コントラスト (高度) : テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。 (レベル AAA)
※ JIS X 8341-3：2016 より抜粋
次の文字色と背景色の組み合わせの例をご覧ください。
どれも同じ「赤色と緑色」の組み合わせですが、①と②がくっきりと見えるのに対して、③はとても見えづらいですね。この差を作るのが文字色と背景色のコントラストです。
項目にはコントラスト比について4.5:1 （適合レベルAA）もしくは7:1（適合レベルAAA）が必要とあるので、文字色と背景色のコントラスト比を調べます。
コントラスト・コントラスト比とは
コントラストとは明暗の差のことを指します。
コントラスト比とは２色を比較したときの明暗の差の比率のことで、コントラスト比が高ければ高いほど2色の区別がつきやすくなります。
コントラスト比を確認するには
コントラスト比の確認にはWEBツールやフリーソフトを使います。
＊今回はこちらのWEBページで計算させていただきました。
色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
どれも「赤色と緑色」の組み合わせですが、見えやすい配色とは、コントラスト比に比例することがわかりました。
コントラストが十分にあれば、ディスプレイをモノトーン表示していたり、色味を認識しづらかったとしても、文字色と背景色の違いを明暗の差で認識することができます。
①では適合レベルAAA（コントラスト比7以上）を達成できるコントラスト比が確保できますので、この中で利用するなら①がベスト！ということになります。
いかがでしたでしょうか？
LoGoフォームで文字色と背景色を任意の色に設定する場合にも、コントラスト比を調べて、アクセシビリティに考慮した配色を心がけてみてくださいね。
