コントラスト比について(ウェブコンテントアクセシビリティ)

先日パソコンを新調したので、これまで使っていたのと同じような環境にするためのセットアップを行いました。
インストールされていたWindows10を最新のものにアップデートして、エディタなどのアプリケーションをインストール。ウェブブラウザもGoogle ChromeとFirefoxをダウンロードして追加・・・・・・

見にくい文字

あれっ!Firefox(https://www.mozilla.org/ja/firefox/)をダウンロードするページへのリンクが見にくいぞ。
Firefoxトップページ
使っているディスプレイの設定にも左右されますが、黄緑色の背景に白の文字(あるいはその逆)というの決して見やすくはないと思います。

2017年12月のページでは見にくい色使いでしたが2020年10月現在では見やすい色遣いに変更されています。

最低限のコントラスト※1

Web技術の標準化団体であるW3Cでは、ウェブコンテンツ(インターネットで見る情報)をよりアクセシブル(だれもが見やすいように)するためのガイドライン(基準)を示しています。
Web Content Accessibility Guidelines (WCAG) 2.0(https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast)

その中に、誰もがテキストを読めるように、テキストとその背景との間に十分なコントラストを提供するための達成基準があります。
コントラスト (最低限) (https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
背景と文字の色とのコントラスト比を計算して以下のように基準を定めています。
●通常文字(22px未満)は、4.5 以上(高度の場合7 以上)
●巨大文字(22px以上)は、3 以上(高度の場合4.5 以上)
●太文字(14px以上)は、3 以上(高度の場合4.5 以上)
最低でも3以上のコントラスト比が必要とされています。
※1 コントラスト比は1~21の範囲(1:1~21:1 と記述)

コントラスト比を計算してみる※2

Firefox(https://www.mozilla.org/ja/firefox/)の例(2017年12月)でコントラスト比を計算してみると約1.9(1.9:1)となり基準に達していませんでした。
2020年10月のページではコントラスト比は5.62と向上しており、WCAG20の基準を満たしています。

また、インテルHDグラフィクス設定ウィンドウのヘルプダイアログも非常に読みにくくなっていました。
インテルHDグラフィクス設定画面
こちらのコントラスト比は約2.5(2.5:1)で、これも基準に達していません。

※2 コントラスト比を自分で計算するのは大変なので
〇 カラー・コントラスト・アナライザー
https://weba11y.jp/tools/cca/
〇 色のコントラストチェッカー(オンラインツール)
https://lab.syncer.jp/Tool/Color-Contrast-Checker/
などを利用

● 配色のコントラスト:ウェブアクセシビリティ
https://recipes.mediadesign.jp/color-contrast-ratio/
メディアデザインでは、表計算ソフトのExcelを使って文字と背景の塗りつぶしの色のコントラスト比を求めるシートを作成しました。

好きな色を使う、というだけでなく、好きな色がどのように見える(見られる)のかも注意ですね。