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

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

関連記事

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

Web

本サイトに、ココナラで出品してるサービスのウィジェットを表示しました

ココナラで出品してるサービスのウィジェットを、本サイトに表示しました。

Web

sizes属性のデフォルト値は 100vw である

sizes属性のデフォルト値は 100vw です。

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。

Web

テンプレートを使って無料でペラサイトが作成できる Strikingly

本ページでは、Strikingly というサービスを紹介します。 主に取り上げているのは 無料プラン です。 目次1. Strikingly とは?2. ウェブページの作成テンプレートを選ぶ雛形として …