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

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

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

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

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

WCAG と色のコントラスト

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

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

ルール

コントラスト比が高いほど、スコアは 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 色を比較する

テキストと背景色を比較します。

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

透明度のある色の比較

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

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

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

VisBug

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

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

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

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

ユーザー補助検査ツールをクリックすると、ユーザーが指で示した要素やキーボードで移動した要素のユーザー補助情報がツールチップに表示されます。このツールチップには、検出された前景色と背景色の色の比較が表示されます。

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

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

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

Chrome DevTools

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

• カラー選択ツール
• 検査ツールチップ
• CSS の概要
• 灯台
• JS コンソール
• 色覚障がい者向けのエミュレーション ツール
• システムの色のコントラスト設定の模倣
• WCAG 3.0 APCA テスト

Chrome DevTools のカラー選択ツール

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

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

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

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

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

検査のツールチップ

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

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

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

合格するまでぶつかる 🎶?

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

手順は次のとおりです。順番を厳守してください。

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

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

CSS の概要

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

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

灯台

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

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

JS コンソール

これまでに紹介したツールが、ご利用の環境で利用できない場合があります。たとえば、JavaScript を扱う業務が一日中続く場合、試すことができるテストをご紹介します。コンソールの [問題] ペインでは、作成時に色のコントラストに関するユーザー補助の問題が常に報告されます。次の手順に沿って、[設定] > [試験運用版] でこの機能を有効にします。

次に、[問題] ペインを開いて、検出された問題がないかどうかを確認します。次のような表示になります。

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

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

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

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

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

WCAG 3.0 APCA を試す

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

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

まとめ

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