サイトのコントラストをContrast Finderの自動的な配色で高める

サイトの表示速度を計測するPageSpeed Insightsにその他のパフォーマンスを判定する要素が盛り込まれて総合的に使い易さの指標が得られるようになった。コントラスト比の最低基準は4.5 : 1 PageSpeed Insightsのコントラストの項目に「背景色と前景色には十分なコントラスト比がありません」と表示されている

PageSpeed Insightsのコントラストの項目に「背景色と前景色には十分なコントラスト比がありません」と表示されている

PageSpeed Insights｜Google Developers

ブログで気がかりになったものの一つにコントラスト比があって「背景色と前景色には十分なコントラスト比がありません」という指摘と共にユーザー補助の項目も少し減点されてしまった。調べるとWCAG（Web Content Accessibility Guidlines／ウェブコンテントアクセシビリティガイドライン）が定める最低基準となるレベルAAの4.5を通常の文字サイズで越えなくてはならない。

テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く:

大きな文字
サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
付随的
テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェースコンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
ロゴタイプ
ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。

達成基準 1.4.3 コントラスト (最低限)｜Web Content Accessibility Guidelines (WCAG) 2.1 日本語訳｜ウェブアクセシビリティ基盤委員会

大きな文字はおよそ18pt（≒23.94px）と14pt（≒18.62px）の太字とCJK（中国語と日本語と韓国語）を超えるサイズなので、それ以下の文字サイズで4.5のコントラストが求められる。サイトの文字や背景の色は気に入って付けた以上、幾らかコントラストが低くて変えるのは悲しい。しかしコントラストをチェックしてなるべく近い色に変えることもできるので、試しにやったら、結構、良いと改めて見易さも含めた配色を気に入って変えた。Contrast Finderで配色を自動的に作る Contrast Finderのトップページ：タイトルと幾つかの入力欄など

Contrast Finder｜Contrast-Finder.org

自分でコントラストを加味して文字色と前景色の組み合わせを決めるのは大変そうなので、Webサービスで自動的にやってくれるものはないかと探した。Contrast Finderが簡単で、便利で、どれが良いかと提案される色も非常に近いものから離れ過ぎたものまてヴァリエーションが豊富で、高性能だから使うことにした。Contast Finderで設定する五つの項目Contrast Finderは無料のWebサービスで、アカウント登録も必要ないけど、しかし英語で、日本語に対応してないから使うときに注意を要する。

Text color（文字色）
文字名か文字コードかカラーピッカーで入力

Background color（背景色）
文字名か文字コードかカラーピッカーで入力

Minimum ratio（最低比率）
配色に加味するコントラスト

3（弱い）
4.5（最低基準）
7（強い）

Color to edit（編集する色）
コントラストに合わせて変える色

Edit the text color（文字色を編集する）
Edit the background color（背景色を編集する）

Gimme（下さい）
配色を決めるアルゴリズム

valid colors and very close to initial color（適格で元に非常に近い色）
a range of valid colors（適格な色の範囲）

※文字コードは通常のもの（先頭の#はなくても三桁でも大丈夫）とrgbが入力可能。
※アルゴリズムの二番目は一番目て納得できなかった場合のバックアップ。使い方は文字色と背景色を入力するとコントラストが直ぐに計算されて「Minimum ratio」の下に適格かどうかと数値が示されるので、もしも「✕」の不適格が出たら全ての項目を設定して「Find valid colors」（適格な色を探せ）のボタンを押すと適格な色の候補が下に表示される。最初に「✓」の適格だと「Find valid colors」を押しても新しい色の組み合わせは得られない。注意点としては文字色と背景色のどちらを編集するかで結果が変わる。Contrast Finderは変えたい色が濃ければもっと濃くして薄ければもっと薄くするように働く。コントラストは明暗などによる色調の差なので、高めるにはそれを大きく広げなくてはならないためだ。すると最初から白っぽかったり、黒っぽかったりする色は、それ以上、濃くしたり、薄くしたりすることが難しくもなる。Contrast Finderは「Minimum ratio」に対して色の濃さが十分に変えられない場合には反転して雰囲気が入れ替わったり、新しい色の候補が出なくなったりするので、変えるのは文字色でも背景色でもなるべく濃さを変え易い方、白や黒に近くない方の色を選んで編集すると上手く行く。Contast Finderで提案される配色の選び方 Contrast Finderの自動的な配色：古いコントラストのものと新しいコントラストのものが上下に分かれている

Contrast Finderの自動的な配色：古いコントラストのものと新しいコントラストのものが上下に分かれている

Contrast Finder｜Contrast-Finder.org

コントラストを加味した配色の候補があれば「Find valid colors」を押した後、下に表示される。最初に「Old contrast」（古いコントラスト）という元の配色が示されて次の「New contrast」で、設定した文字色か背景色の新しいものが並んでいる。スクロールで「Old contrast」は画面上部に固定されて「New contrast」の配色を次々と比較することができる。どれを選ぶかで重要なのが「New contrast」の上段のメニューの右端の「Ratio」（比率／コントラスト）と「Distance」（距離／色の相違）なんだ。どちらもボタンになっていて候補の先頭と末尾を入れ替えることができる。大体、数値が小さい方が元の色に似ているけど、ただし色自体はRGBという光の三原色で決まっていてそれぞれの値が近くても組み合わせによって表示される色が大きく異なる場合もあるので、必ずしも「ratio」や「distance」の数値が小さいから元と似た色が得られるとはかぎらない。見た目が同じような色、全体的に近い色にしたい場合は数値だけではなくて実際に見て確かめて選んだ方が良いと思う。気に入りの配色がなかったら設定を変えてやり直すか同じ設定でも、毎回、同じ候補が出て来るわけではないから微調整ならばそのままで、もう一回、繰り返すと見付かるかも知れない。どうしても無理だったり、または自分の好みで細かく決めるには手動でコントラストを加味した配色を作ることになる。