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

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

見にくい文字

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

最低限のコントラスト※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/)の例でコントラスト比を計算してみると約1.9(1.9:1)となり基準に達していませんでした。
 
また、インテルHDグラフィクス設定ウィンドウのヘルプダイアログも非常に読みにくくなっていました。
インテルHDグラフィクス設定画面
こちらのコントラスト比は約2.5(2.5:1)で、これも基準に達していません。
 
※2 コントラスト比を自分で計算するのは大変なので
〇カラー・コントラスト・アナライザー
https://weba11y.jp/tools/cca/
〇色のコントラストチェッカー(オンラインツール)
https://lab.syncer.jp/Tool/Color-Contrast-Checker/
などを利用
 
好きな色を使う、というだけでなく、好きな色がどのように見える(見られる)のかも注意ですね。