ウェブデザインのカラー コントラストのテスト

デザインのユーザー補助に適した色のコントラストをテストして検証するための 3 つのツールと手法の概要。

Adam Argyle
Charlie Gleason

次のような明るい背景にテキストがあるとします。

「The quick brown fox jumps over the lazy dog again」というフレーズが表示されます。各単語または 2 つの単語が明るい青色で表示されます。段階的に色が薄くなる単語のセクションの上に、コントラスト比スコアが表示されます。最後のいくつかの単語はコントラストが低いため、非常に読みにくくなっています。

すべての例が読みやすいとは限りません。

ユーザー補助の色のコントラストは、すべてのユーザーがテキストを読み取れるようにする手法です。コントラストをテストするのは簡単なこともあれば、非常に難しいこともあります。この投稿の最後まで読めば、ウェブデザインのコントラストを検査、修正、検証するための 3 つの新しいツールと手法がわかり、最も難しいシナリオにも対応できるようになります。

WCAG と色のコントラスト

W3C のウェブ アクセシビリティ イニシアチブでは、できるだけ多くの人がインターネットを利用できるようにするための戦略、標準、リソースが提供されています。これらの基準の基盤となるガイドラインは、ウェブ コンテンツ アクセシビリティ ガイドライン（WCAG）と呼ばれます。最新の安定版である WCAG 2.1 には、重要なユーザー補助要件である最小コントラストが含まれています。

WCAG 2.1 では、2 つの色の関係はコントラスト比で表されます。コントラスト比とは、2 つの色の輝度を比較したときに得られる数値です。輝度は、色が黒（0%）または白（100%）にどの程度近いかを表します。WCAG では、ウェブがユーザー補助の条件を満たすために必要なコントラスト比に関するルールと計算アルゴリズムが定義されています。ただし、この計算には既知の問題があります。最終的には、より信頼性の高い方法が採用される予定ですが、現時点では WCAG が最善の方法です。

ルール

AA AAA
本文（24 ピクセル未満） 4.5 7
大きなテキスト（24 ピクセル超） 3 4.5
UI（アイコン、グラフなど） 3 未定義

コントラスト比が高いほど、スコアは 3 ではなく 4.5 や 7 などの大きな数値になります。スコア テーブルについて詳しくは、Polypane のコントラスト チェッカーをご覧ください。

テキストは紫色で表示されます。一方のペアは紫の上に黒のテキスト、もう一方のペアは紫の上に白のテキストを表示します。
次の色の組み合わせのうち、コントラストが強いと思うものはどれですか。

色のコントラストのテスト

では、求めているものがわかったところで、これをどのようにテストすればよいでしょうか。ウェブサイトのコントラストの検査、修正、測定に役立つ無料のツールを 3 つご紹介します。それぞれの長所と短所を概説し、サイトの色とコンテンツのユーザー補助機能をさまざまな方法で自信を持ってテストできるようにします。

  1. Pika
    画面全体の色、グラデーションの色、透明な色などのコントラストを表示できる、独自の MacOS アプリです。ユーザーが比較するピクセルを明示的に選択します。自動化は少し低下しますが、特徴量は大幅に増加します。
  2. VisBug
    クロスブラウザ拡張機能。一度に複数のコントラスト オーバーレイを表示できますが、DevTools と同様に、インテントを検出できないことがあります。
  3. Chrome DevTools
    DevTools は Chrome に組み込まれており、色の問題を検査、修正、デバッグするためのさまざまな方法が用意されています。ただし、グラデーションや半透明の色を検査する際の欠点があり、インテントを検出できないことがあります。

Pika（macOS アプリケーション）

ブラウザの外部で色をテストする必要がある場合や、透明度やグラデーションを使用する場合など、DevTools や VisBug でコントラストを適切に評価できない場合は、Pika が役に立ちます。Pika はウェブツールではなくシステム ツールであるため、画面上のすべてのピクセルにアクセスできます。

Pika をダウンロード

これは、Pika を使用するための UX が DevTools や VisBug とは異なることを意味します。DevTools と VisBug は、ブラウザ DOM のテキストと背景の色を表示するよう最善を尽くしますが、Pika が比較する色は、画面上の任意の場所から手動で選択されます。これにより、Pika の制御力が向上し、次のユースケースが追加されます。

  • ブラウザに表示されているかどうかにかかわらず、任意の 2 つの色を比較します。画面に色が表示されている場合はテストできます。
  • 透明度のある色の比較。
  • グラデーション内の色の比較。
  • CSS の mix-blend-mode など、ブレンドモードを使用している色の比較。

任意の 2 色を比較する

テキストと背景色を比較する:

2 つのグレーが並べて比較されています。コントラスト比は 13.01 で、AA と AAA のターゲットを満たしています。

ベクター グラフィックのストロークと塗りつぶしの色を比較します。

2 つの紫色がデュオトーンのアイコンから比較されています。コントラスト比は 1.63 で、WCAG のターゲットには達していません。

透明度のある色の比較

テキストの色をさまざまな背景サンプル ピクセルと比較します。ここでは、フロストガラス効果で最も明るいグレーが、背景の比較色として使用されます。

グレーのように見えますが、実際には非常に彩度が低い紫色の 2 色が、ぼやけた半透明のキャプションを含む画像から比較されています。コントラスト比は 4.65 で、AA の目標を満たしています。

グラデーションと色の比較

グラデーションまたは画像上のテキストを比較します。ここでは、「Lasso」の L が画像のライトブルーと比較されています。

テレビ番組のスクリーンショット。番組のタイトルが上に表示され、L は白色で、その背後の青色と比較されています。コントラスト比は 8 で、AA と AAA のターゲットを満たしています。

VisBug

VisBug は、FireBug を基に作られたツールで、デザイナーやデベロッパーがウェブサイトのデザインを視覚的に検査、デバッグ、操作するためのものです。使い慣れたデザイン ツールの UI と UX をエミュレートすることで、Chrome DevTools よりも導入のハードルを下げています。

VisBug を試すか、Chrome、Firefox、Edge、Brave、Safari にインストールします。

そのツールの一つが、ユーザー補助検査ツールです。

空白のページの左側にある VisBug ツールバーのスクリーンショット。ユーザー補助ツールのアイコンがピンク色で、ツールの説明を示すポップオーバーが表示されています。

ブラウザ（モバイルでも）全体で検査する

ユーザー補助機能検査ツールをクリックすると、ユーザーがポイントまたはキーボードで移動したすべてのユーザー補助機能の情報がツールチップに表示されます。このツールチップには、検出された前景色と背景色の色の比較が表示されます。

タイトルとアイコンを含むコンポーネントが、その周りをピンク色の境界ボックスで囲まれている。VisBug のユーザー補助のツールチップでは、テキストの色と背景の色比較レポートを含むピンク色のボックスが示されている。比率は 13.86 で、AA と AAA の両方の目標を達成しています。

1 つまたは複数を検査する

DevTools では、単一の色の組み合わせを確認することも、ページ内のすべての色の組み合わせのレポートを取得することもできますが、VisBug では複数の色の組み合わせを許可することで、その中間的な方法を提供しています。要素をクリックすると、ツールチップはそのまま表示されます。Shift キーを押しながら他の要素をクリックすると、すべてのツールチップが保持されます。

ウェブページ上のリンクのリストが複数の VisBug ユーザー補助機能オーバーレイとともに表示され、それぞれのコンテキストが参照され、検出されたテキストと背景色のコントラストが報告されます。

これは、コンポーネントの複数の部分がコントラスト比スコアを満たす必要があるコンポーネント ベースの設計で特に重要です。この方法では、これらのコンポーネント部分をすべて一度に確認できます。デザイン レビューにも最適です。

Chrome DevTools

Chrome がインストールされている場合は、すでに多くのコントラスト テストツールが用意されています。

Chrome DevTools のカラー選択ツール

Chrome DevTools の [Elements] パネルの [Styles] ペインでは、色値の横に小さな正方形の色見本が表示されます。色見本をクリックすると カラー選択ツールが表示されます可能であれば、ツールの中央に、前景または背景に対する色のコントラストが表示されます。

次の例では、カスタム プロパティの色値のカラー選択ツールが開いています。コントラスト比スコアは 15.79 と報告され、2 つの緑色のチェックマークが付いています。これは、スコアが WCAG 2.1 の AA と AAA の要件を満たしていることを示しています。

DevTools の [要素] パネルのスクリーンショット。スタイルにカラー選択ツールが表示され、中央に色のコントラスト比 4.98 が報告されています。

カラー選択ツールの自動修正

色を選択する際にスコアを確認するのは便利ですが、Chrome DevTools には自動修正機能もあります。カラー選択ツールで、アクセス可能なカラー コントラスト スコアの失敗が報告された場合、展開して AA スコアと AAA スコアのターゲットとスポイト ツールを表示できます。AA と AAA の横には、色見本と更新アイコンがあります。更新アイコンをクリックすると、最も近い合格色が見つかります。

色にこだわらない場合は、自動補正機能を使用してユーザー補助のガイドラインに準拠し、作業を楽に進めることができます。

検査のツールチップ

要素選択ツールには、ページにカーソルを合わせたときに、一般的なフォント、色、ユーザー補助情報を報告する特別な機能があります。要素選択ツールは、次のスクリーンショットの左側にあるアイコンです。右下隅に矢印カーソルがあるボックスです。ホットキー Control+Shift+C（macOS では Command+Shift+C）を使用して選択することもできます。

要素選択ツールを呼び出す DevTools のボックスと矢印アイコンのスクリーンショット。

有効にすると、アイコンが青色に変わり、ページ内の任意の要素にカーソルを合わせると、次のクイック検査ツールチップが表示されます。

VisBug と非常によく似たオーバーレイのスクリーンショット。スタイル情報と、AA の目標を満たす 15.79 のコントラスト スコアが表示されているユーザー補助セクションが表示されています。

スタイルペインで色見本を見つける必要がある色選択ツールとは異なり、このツールでは、ページ上で任意の場所を指すだけでコントラスト スコアを確認できます。カラー選択ツールと同様に、一度に表示できるコントラスト スコアは 1 つだけです。

合格するまでぶつかる 🎶

このクイック検査ツールで色の組み合わせを検査すると、必要な比率を満たしていないことがよくあります。今回はカラー選択ツールの自動修正機能を使用するのではなく、CSS でカラーチャネルを調整し、必要な比率に達するまで観察します。私はこのプロセスを「合格するまでバンプバンプ」と呼んでいます。これは、カラーチャネル番号が WCAG 2.1 に合格するまで優先度を上げるためです。

手順は次のとおりです。順番に行う必要があります。

  1. スタイルパネルで色内にキーボード フォーカスを設定します。
  2. キーボード ショートカット Control+Shift+C（macOS では Command+Shift+C）を使用して、要素の検査ツールを有効にします。
  3. ターゲットにカーソルを合わせます。
  4. キーボードの上または下矢印を押して、色の値の数値を変更します。

これは、CSS スタイル値が引き続きキーボードのフォーカスを保持し、マウスでターゲットを指すことができるからです。ターゲットをクリックしないようにしてください。クリックすると、色の値の領域からフォーカスが移動し、フォーカスを再び合わせるまで値を調整できなくなります。

CSS の概要

これまで、Chrome DevTools では、一度に 1 つの色の組み合わせを確認する方法が提供されていましたが、CSS の概要ではページ全体をクロールし、アクセスできないすべての組み合わせを一度に表示できます。

CSS の概要取得ツールを実行した際の概要の概要のスクリーンショット。7 件のコントラストの問題が表示され、検出された色の組み合わせとその不合格結果を確認できます。

この機能の詳細については、CSS の概要: CSS の潜在的な改善点を特定するをご覧ください。また、YouTube の Jecelyn Yeen の DevTools のヒントシリーズで、CSS の概要パネルで CSS の潜在的な改善点を特定する方法をご確認ください。

灯台

Lighthouse も Chrome DevTools の監査ツールです。ページをクロールし、アクセスできない色の組み合わせを報告できます。各色の組み合わせの小さなスクリーンショットが表示され、合格と不合格を確認できます。失敗した組み合わせは Lighthouse スコアに悪影響を及ぼします。

結果は次のようになります。

2 つの単語の色の組み合わせによる低コントラストのテキストの結果を示した Lighthouse 評価のスクリーンショット。

JS コンソール

これまでに紹介したすべてのツールが、現在の状況に合っていないかもしれません。もしかしたら（一日中）JavaScript が原因かもしれません。試すことができるテストをご紹介します。コンソールの [問題] ペインでは、作成時に色のコントラストに関するユーザー補助の問題が常に報告されます。次に示すように、[設定] > [テスト] でこの機能を有効にします。

有効になっているチェックボックスのスクリーンショット: [問題] パネルでコントラストに関する問題の自動レポートを有効にする

次に、[問題] ペインを開き、なんらかの問題があるかどうかを確認します。次のような表示になります。

コンソール内の [問題] パネルのスクリーンショット。コントラストに関する 6 件のエラーが報告されています。

色覚特性エミュレーション

カラー コントラストとアクセス可能な色の組み合わせについて説明する際に、視覚障害エミュレーション ツールについて説明することも重要です。これにより、デザインの色や外観が変化し、さまざまな色覚障害の結果が示されます。これにより、UX がユーザーに伝える手段が色だけにならないように、デザインを変更できます。

色覚異常をエミュレートするための DevTools エミュレーション オプションのスクリーンショット: エミュレーションなし、ぼやけた視界、1 型 2 色覚、2 型 2 色覚、3 型 2 色覚、全色盲。

赤は悪い、緑は良いなど、色のみを使用して情報を表すことは、ユーザー補助の観点から安全な方法ではありません。このエミュレーション ツールを使えば、緑色と赤色を同じように見ることができません。

色のコントラストのシステム設定のエミュレーション

ユーザーがオペレーティング システムのコントラスト設定を変更し、UI のコントラストを増減するパーソナライズをリクエストするケースが増えています。CSS は、ライトモードまたはダークモードの設定と同様に、この設定を利用できます。Chrome DevTools には、この設定をエミュレートする機能が用意されているため、システムから設定を切り替えることなく、デザインをテストしてユーザー リクエストに適応させることができます。

CSS メディアクエリ prefers-contrast をエミュレートするためのエミュレーション DevTools のオプションのスクリーンショット: エミュレーションなし、より大きい、より小さい、カスタム。

WCAG 3.0 APCA を試す

テストするもう 1 つの方法は、試験運用版の APCA 色比スコアリング システムで色の組み合わせをテストすることです。[設定] > [試験運用版] で有効にすると、WCAG 2.1 の比率システムが、より新しく改善されたコントラスト チェッカー アルゴリズムに置き換えられます。このアルゴリズムは、標準化に向けて提案されているもので、結果をプレビューできます。

有効になっているチェックボックスのスクリーンショット: [以前のコントラスト比と AA/AAA ガイドラインに代わる新しい Advanced Perceptual Contrast Algorithm（APCA）を有効にする] チェックボックス

有効にしたら、ポイント検査ツールチップまたはカラー選択ツールを使用して、色のペア設定スコアを確認し、合格かどうかを確認します。

Devtools の検証要素ツールチップに、dd 要素のコントラスト スコアが -100.2% と表示されます。

まとめ

色のコントラストは、ウェブのユーザー補助にとって重要な要素です。コントラストに準拠することで、さまざまな状況で多くのユーザーがウェブをより使いやすくすることができます。これらの 3 つのツールが、優れた色を選択するうえで役立つことを願っています。