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

Material の Icons (アイコン)を導入する手順

2020年8月:Material design icons 側に変更があり、手順が変わってしまったようです。 目次1. はじめに2. Icons の導入手順2-1. Google Web Fonts …

Web

Firefox で DNS-over-HTTPS (DoH) を有効にする方法

Firefox で DNS-over-HTTPS (DoH) を有効にする方法について説明しています。

Web

閲覧しているウェブページで利用されている HTTP のバージョンを確認する方法

ウェブブラウザで ウェブサイトを閲覧している際、HTTP のどのバージョンが使われているのか確かめる方法を紹介します。 目次Chrome の場合FirefoxEdge Chrome の場合 (1) ウ …

Web

Web Components: CSS Shadow Parts の使い方

CSS Shadow Parts の使い方を説明します。

DokuWiki

DokuWiki で閲覧専用ユーザーを作る手順

DokuWiki において、閲覧専用ユーザーを作成する手順を紹介します。 目次DokuWiki で、閲覧専用ユーザーを作成する手順1. 閲覧専用グループを追加する。2. ユーザーにグループを指定するお …