動機

ウェブコンテンツのパフォーマンス測定をLighthouseで行うと「Accessibility」の項目がある。

頻繁に注意される項目が「Contrast」。これは背景と文字の色のコントラストが低すぎて見にくいことを言及されている。

何をもって見やすい・見やすくないコントラストと判断しているのか？

その答えは、W3Cが定めたWebアクセシビリティの基準(WCAG2.1)に適合しているかどうかだ。

WCAG2.1によれば

1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)
大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
...

1.4.6 コントラスト (高度) : テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AAA)
大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 4.5:1 のコントラスト比がある。
...

とのことである。
なるほど、ではコントラスト比を求めてみよう。

ということで、コントラスト確認ツールを探してみるといろいろ見つかるが、カラーコードがHEXにしか対応していないなど今一つなものが多かった。

コントラスト確認ツールを作った

実際に作ったものがこちらのコントラストチェッカー。

色を探すときに色相を固定して彩度や輝度を調整する方法が私にはしっくりきているので対応させた。

デザインサイトなどでHEXしか提供されていない場合も、とりあえず入力欄にコピペすればRGBやHSL形式の値が手に入るようにした。

これでわざわざ形式変換サイトを訪れなくて良くなる。

コントラスト確認ツールにはサンプル文章が用意されているが、文章が短い気がする。

本ツールではWCAGの説明を含めた長いサンプルを用意した。

取り急ぎ作ったので、こういう機能もつけてほしいなどの要望があったらコメントにてお知らせください。