Webサイトのコントラストを改善する方法
公開日：こんにちは、ゆきまるです。
Webサイトの文字のコントラストをWebコンテンツアクセシビリティガイドライン（WCAG）に沿って改善する方法をご紹介いたします。
必要なコントラスト比
W3CのWebコンテンツアクセシビリティガイドラインにて、テキストと背景のコントラスト比の基準は4.5:1以上と定められています。
（ロゴや大きいテキストなどは例外です。）
上記のガイドラインは障害を持つ人々がWebサイトにアクセスしやすくするための基準が定められたものです。
Webサイトを作る際の色の選定の要件のひとつとして取り入れるとよいでしょう。
要件を満たしているか確認する方法
Google Chromeの開発者ツールを使えば、上記のコントラスト比の要件を満たしているか確認することができます。
まず開発者ツール（デベロッパーツール、検証ツール）を立ち上げます。
F12キーで立ち上げられます。
そして、Elements、Consoleなどがあるタブから、Auditsを選択してください。
設定項目がでてきます。
- Device
-
モバイル端末かデスクトップかを選べます。
ユーザーエージェント文字列や、ビューポートサイズが選んだ方で設定されるようです。 - Audits
-
なにを計測するか選択できます。
今回のコントラストはAccessibilityに含まれるので、最低限Accessibilityにはチェックを入れておいてください。
他は任意でおっけー。 - Throttling
-
モバイルデバイスの回線をシミュレート、アプライできるようです。
好きなのを選べます。 - Clear Storage
-
始めてそのサイトを訪れた状況を再現するかどうかです。
キャッシュなどがクリアされるということだと思います。
参考サイト：
Lighthouseの計測結果を見ていく
Chrome DevToolsでウェブサイトの速度を最適化する
Run auditsを選択して少し待機。
計測が完了したら、Accessibilityの項目からコントラスト比の基準をクリアしているか確認できます。
「Background and foreground colors do not have a sufficient contrast ratio.」と出ていればアウトです。
上記をクリックすると中身が展開されます。
基準に達していない要素への参照が表示されるので、どのテキストや画像がアウトだったか確認しましょう。
これで基準に達していない要素は確認できました。
これらの、文字と背景のコントラスト比を4.5:1以上にしたいわけですが、
テキストと背景のコントラスト比を確認しながら色を調節する方法を次でご紹介します。
開発者ツールで色を調整
開発者ツールで、コントラスト比を確認しながら色を調整するということもできます。
開発者ツール万能ですね（笑）
まず該当の要素を選択しておきます。
CSSのcolorを指定している箇所が表示されるかと思います。
（親要素に指定したのが引き継がれている場合は、colorを指定している親要素を選択しておいてください。）
このサイトの場合テキストの色は、水色なので水色の四角形が表示されています。この四角形をクリックすると編集画面が出てきます。
真ん中よりちょっと下に、Contrast ratioという項目があります。これがテキストと背景のコントラスト比になっています。
基準を満たしていない場合、右に赤い警告っぽいマークが表示されるので、これが消えるように色を調節しましょう。
基本的に、
地が白の場合は、パレットの下に、
地が黒の場合は、パレットの左に移動させるとコントラスト比は高くなってはっきり見える色になっていくと思います。
サイトの雰囲気を壊さないように、実際に確認しながら調整できるので、個人的にこの機能はすごくありがたい。
16進数形式だけでなく、rgbやrgba、hslなどの形式にも変更できます。
色の調整が終わったら、コピペしてCSSファイルなどに張り付けることも忘れないように。
以上です。
ご覧いただきありがとうございました。
