Google is committed to advancing racial equity for Black communities. See how.

Chrome DevTools を使用して低コントラストのテキストを検出して修正する

低コントラストはウェブ アクセシビリティにおける最大の問題です。ここでは、DevTools を使用してこの問題を理解し、検出、修正する方法を学習します。

学習内容

  • 低コントラストの問題について理解する
  • 低コントラストのテキストを検出する方法
  • 低コントラストのテキストを修正する方法

必要なもの

  • 動作するパソコンと安定した Wi-Fi 接続
  • Chrome 87 以降

演習内容

ウェブページの低コントラストの問題を修正します。

次のリンクをクリックすると、低コントラストのテキストを含むページが開きます。

ページを開く

次に、開いたページで Chrome DevTools を起動します。

およそ 20 人に 1 人は色覚特性(より正確でない別の名称として「色盲」)を持っています。色覚特性がある場合、色の違いを識別することが難しくなり、コントラストの問題による影響を大きく受けます。

たとえば、次のページのテキストは、色覚特性のないデベロッパーにとっては問題に感じないかもしれません。

低コントラストのテキスト

色覚特性がなければ低コントラストのテキストでも読める場合がありますが、色覚特性があるユーザーにはそうしたことはできません。

DevTools を使用すると、ウェブアプリで色覚特性がある場合の見え方をシミュレーションして、こうした特性の理解に役立てることができます。

コマンド メニューを開きます。まず「Rendering」と入力して [Show Rendering] を選択します。[Rendering(レンダリング)] タブで、[Emlate vision disifficiency(視覚特性をエミュレート)] まで下にスクロールします。

DevTools では、Blurred vision(ぼやけ)と次の種類の色覚特性をエミュレートできます。

  • Protanopia(第 1 色覚): 赤色の光の識別が難しい状態。
  • Deuteranopia(第 2 色覚): 緑色の光の識別が難しい状態。
  • Tritanopia(第 3 色覚): 青色の光の識別が難しい状態。
  • Achromatopsia(全色覚): グレーを除くすべての光の識別が難しい状態(非常にまれです)。

これらのオプションを順に選択してページを確認してみてください。たとえば、[Protanopia] を選択すると、テキストの色のコントラストがさらに低くなり、ほとんど判読できなくなります。

低コントラストのテキストを検出する方法はいくつかあります。

検証モードのツールチップ

ウェブページの上部に表示される検証モードのツールチップで、テキスト要素のコントラスト比を確認できます。

たとえば、DevTools の左上隅にある Inspect(検証)アイコンをクリックして、「very」という単語を検証すると、そのテキストのコントラスト比がツールチップに表示されます。比率の横の感嘆符アイコンは、コントラスト比が低いことを示します。

.

カラー選択ツールのコントラスト比

別の方法として、カラー選択ツールでコントラスト比を確認することもできます。

「very」という単語を検証し、[Styles(スタイル)] ペインで CSS プロパティ color のカラー プレビューをクリックします。コントラスト比がカラー選択ツールに表示されます。赤色の禁止アイコンは、コントラスト比が低いことを示します。

.

[試験運用版] [CSS Overview(CSS の概要)] パネルでページ全体の低コントラストの問題を検出する

ページ上の要素ごとにコントラスト比を確認するのは手間がかかります。[CSS Overview] パネルを使うと、ページ上の低コントラストのテキストをすべて検出できます。

[CSS Overview] を読み込んだら、[Colors(色)] セクションまで下にスクロールして、コントラストの問題をすべて確認します。いずれかの色(黄色の背景のライム色のテキストなど)をクリックすると、問題のある要素のリストが表示されます。リストの要素をクリックすると、[Elements(要素)] パネルにその要素が表示されます。

DevTools では、低コントラストのテキストに対して色の候補が提示されます。

「very」という単語を検証し、[Styles(スタイル)] ペインで CSS プロパティ color のカラー プレビューをクリックして、[Contrast ratio(コントラスト比)] セクションを展開します。

カラー選択ツール

DevTools では、AA と AAA の基準について色のコントラスト比が評価されます。

上記の例では、カラー選択ツールの上部にあるビジュアル ピッカーに 2 本のラインが引かれています。これらのラインはそれぞれ次の基準を表しています。

  • 上のライン: AA。最低限の推奨基準を満たすには、このラインより下の色を選択します。
  • 下のライン: AAA。より望ましい推奨基準を満たすには、このラインより下の色を選択します。

色をクリックして手動で修正します。

  • チェックマーク 1 個は、要素が最低限の推奨基準を満たしていることを意味します。
  • チェックマーク 2 個は、要素がより望ましい推奨基準を満たしていることを意味します。

色のコントラスト チェックマーク

.

アクセシブルな色の候補

DevTools では、AA と AAA の各基準についてアクセシブルな色も提示されるので、クリックするだけで修正できます。

コントラスト比の横に表示される色の候補をクリックすると、テキストの色が修正されます。

色の候補

.

それでは、ページ上の低コントラストのテキストをすべて修正し、[CSS Overview] をもう一度読み込んで、コントラストの問題が解消されたか確認してみましょう。

以上で、この Codelab は終了です。

この Codelab の感想をお聞かせください。

面白くありませんでした。 気に入りました。