LoginSignup
3
1

More than 3 years have passed since last update.

見やすいウェブコンテンツのためのコントラスト確認ツールを作った

Last updated at Posted at 2020-05-06

動機

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

診断結果.png

頻繁に注意される項目が「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にしか対応していないなど今一つなものが多かった。

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

実際に作ったものがこちらのコントラストチェッカー
contrast-checker.png

カラーコードはHEX, RGB(A)、HSL(A)、キーワードに対応

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

入力した形式以外のカラーコードも表示

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

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

長めのサンプル文章でみやすさを確認可能

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

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

おわりに

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1