ウェブサイトの色のコントラストがガイドラインを満たしているか確認する方法

概要

  • ウェブコンテンツの背景色と文字の色のコントラストには、ガイドラインが存在する
  • 基準を満たしているか確認するためには、各種ツールでチェックするとよい

ブログの記事を書いたので、アイキャッチ画像を作ろうとしていた。
最近、配色の色見本を買ってみたので、その中から色を選んで作ってみることにした。

ある配色の黄色い色がきれいだったので、これを文字の色にすることに決めた。
背景には青系の色を選んで……っと。

f:id:soratokimitonoaidani:20190327231446p:plain

おや。これはまずい気がする。ハレーションを起こしているので、チカチカして見づらい組み合わせになってしまった。

色の組み合わせの良し悪しはどうやって判断すれば良いんだろう。
……と思って調べてみたら、以下の記事を見つけた。この記事をもとにしらべてみた

Webサイト・スマホアプリの制作者がカラーとアクセシビリティについて知っておくべきこと | コリス

色のコントラストに関するWeb Content Accessibility Guidelines

背景色と文字色のコントラストについては、WCAGというものに記述されている。正式名称はWeb Content Accessibility Guidelinesで、「ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項」である。
Web Content Accessibility Guidelines (WCAG) 2.0
これはガイドラインなので、これに反しているから罰則があるというわけではないが、見やすいウェブサイトを作るための指針としては良いだろう。
WCAGの1.4.3に「コントラスト(最低限)」、1.4.6に「コントラスト(高度)」という項目がある。

2つの色(背景色と文字色)を指定すると、コントラスト比という値を求めることができる。
コントラストは1~21の値で表される。
真っ白(#FFFFFF)と真っ黒(#000000)の場合がコントラスト比が最高となり、21である。2つの色が全く同じ場合は、コントラスト比が1である。絶対に判別できないので視認性が最悪である。
この極端な例から分かるように、コントラスト比が大きいほうが視認性が良くなる。で、その値が一定以上ならば良いらしい。

基準値は以下の通り。

- コントラスト(最低限) コントラスト(高度)
一般の場合 4.5 7
大きな文字の場合 3 4.5

大きな文字の場合は多少基準が緩くなるらしい。(「大きな文字」の定義や、その他の例外については割愛。元のガイドラインを参照)

最低限の基準と高度な基準があるというのは、成績の「可」「良」みたいな感じだろうか(あまりよく分かっていない)。
サイトを製作する上でどれくらい厳格にした方が良いか、を考えて選べばよいのだろう。

コントラストをチェックするcolor.review

Webサイト・スマホアプリの制作者がカラーとアクセシビリティについて知っておくべきこと | コリス
には、コントラストがWCAGを満たしているかどうかを確認するためのサイトが紹介されている。

color.review
Color.review - Colors that look and work great for everyone

実際にさっきの2つの色を設定してみると、コントラスト比と適合有無が表示される。そして下の方にある説明文が指定した色に変わり、実際に文章を見た感じをすぐに確認できる。これは地味に嬉しい点である。
早速やってみよう。上の画像の色を入力した結果は以下のとおりである。

https://color.review/check/EEE260-B4C9C9

f:id:soratokimitonoaidani:20190327231449p:plain

コントラスト比は左上に表示された値だ。コントラスト比、1.2。アウト。超アウトだ。 個人の感覚としても「何かダメな気がする」と思っていたが、数値で基準が出るので分かりやすい。

文字として明るい黄色を使いたいので、背景は暗くないといけないんだな。配色見本から別の色を使うことにした。

https://color.review/check/EEE260-555f66

f:id:soratokimitonoaidani:20190327231502p:plain

これだとコントラスト比は4.8になった。アイキャッチ画像のような大きな文字の場合、「コントラスト(高度)」の基準は4.5なので、この基準を満たしている。


「color contrast check」で検索すると、他にも同様のサイトが見つかる(が、紹介したcolor.reviewが一番見やすいと思う)。

上記のcolor.reviewと少し毛色の違うものだと、
Color Safe - accessible web color combinations
があった。最初に背景色を指定すると、基準に適合する文字色を多数提案してくれる。
「この背景色で、文字に青系の色を使いたいけど、どの色が良いんだろう」というときに便利。

それでは。