Web

Webサイトに使用されている色のコントラストをチェックする

投稿日:2019年4月22日 更新日:

1. はじめに

本ページでは、Webサイトで使用されている色のコントラストをチェックする方法について説明します。

2. Webコンテンツで推奨されるコントラスト比

Webコンテンツの使いやすいさについてのガイドラインである Web Content Accessibility Guidelines (WCAG) 2.1 では、推奨される「コントラスト比」の基準値が定められています。

コントラスト比というのは、2色(主に「文字の色」と「背景色」)の輝度 (Luminance) を使った比のことで、以下の値です。

コントラスト比 (contrast ratio)

(L1 + 0.05) / (L2 + 0.05)

  • L1 は、明るい方の色の輝度(0 から 1の値)
  • L2 は、暗い方の色の輝度(0 から 1の値)

(参照元:contrast ratio | WCAG 2.1

まず「輝度」についてですが、各色の輝度は HSL Color Picker といったサービスで確認することができます。例えばこの HSL Color Picker の左下にあるフィールドに、RGBの16進数表現で「#00a1ff」とセットすると、リアルタイムで右下のフィールドに「hsla(202, 100%, 50%, 1)」という値が出力されます。hsla とは「色相(Hue)」「彩度(Saturation)」「輝度(Lightness/Luminance)」「透明度(alpha)」を意味しているので、左から3番目が輝度になります。ここでは 50% になっていますが、コントラスト比の計算に使う際には 100 で割った値を使用します。つまりこの場合は、0.5 を L1 もしくは L2 として計算に用いることになります。

輝度を得る

では、コントラスト比の式に戻りますが、2つの色が同じであれば、コントラスト比は 1 になります。また、一番差があるはずの白と黒の場合は、L1 = 1, L2 = 0 となり、(1 + 0.05) / (0 + 0.05) = 21 となります。よって コントラスト比のとり得る範囲は、1 から 21 ということが分かります。

WCAG 2.1 では、最低限守らなければならないコントラスト比(Contrast (Minimum))と、拡張版(より厳しく設定された?)コントラスト比(Contrast (Enhanced))という2つのレベルがあり、それぞれ以下の値になっています。

 
レベル 求められるコントラスト比
Contrast (Minimum):Level AA 4.5 : 1
Contrast (Enhanced):Level AAA 7 : 1

できれば、両方の基準をクリアしておくとよいでしょう。

3. コントラスト比をチェックすることができるサービス

2つの色を指定して、WCAG で決められた コントラスト比をクリアできているかどうかチェックすることができるWebサービスがあります。

以下のサイトです。

Color Contrast Analyzer

🔗 Color Contrast Analyzer

以下のスクリーンショットを見ると分かると思いますが、使い方は簡単で以下の 3ステップです。

  1. 文字の色をセットする
  2. 背景色をセットする
  3. 結果が表示される

結果が、Level AA, Level AAA や Small Text, Large Text などに分かれています。

Color Contrast Analyzer
Color Contrast Analyzer

Colour Contrast Check – snook.ca というサービスもあります。

4. コントラスト比の問題を自動的に検知する

Webページにコントラスト比の問題があるかどうか自動的に検知するには、Chrome DevToolsAudits パネルが便利です。

使い方も簡単です。

(1) Chrome のシークレットウィンドウを開きます。

(2) Chrome のメニューから [その他のツール] – [デベロッパー ツール] を選択し、[Audits]パネルを開きます。

(3) 設定項目を調整して(デフォルトのままでもよいでしょう) [Run audits] ボタンを押します。

Chrome DevTools の Audits パネル
Chrome DevTools の Audits パネル

(4) 検査が終わったら、結果の中の [Color Contrast Is Satisfactory] のところに、「Background and foreground colors do not have a sufficient contrast ratio.」が表示されていたらコントラスト比に問題あります。

その下に問題のあった CSSセレクタが表示されますので、その部分の色がどうなっているか確認して修正しましょう。

[Learn more] のリンクをクリックすると、先程紹介した Color Contrast Analyzer のページが開きますので、その場で色を調整することができます。

コントラスト比の問題が指摘されます
コントラスト比の問題が指摘されます

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

cron-job.org を利用して特定のURLに定期的にアクセスさせる

cron-job.org というサービスの利用手順について説明します。

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。

Web Vitals

highlight.js のハイライト処理を Web Workers で実行する

highlight.js のハイライト処理を Web Workers で実行する方法を紹介します。

Web

Flexbox を使ってページ全体を中央寄せにする

目次1. はじめに2. やり方3. デモページ4. おわりに参考 1. はじめに CSS(スタイルシート) の Flexbox を使って ウェブページ全体を中央寄せにする例を紹介します。 2. やり方 …

no image

ドメインに関して気を付けること

目次TLS証明書ドメインの乗っ取り1. TLS証明書が発行されてしまうとまずい2. メールアドレスが利用されてしまう TLS証明書 証明書の期限を短くする。 ドメインの乗っ取り 1. TLS証明書が発 …