Colour Contrast Analyser (WCAG 2.1 対応)

2019年6月9日追記 : この記事でご紹介している Colour Contrast Analyser は、その後マイナーアップデート (バージョン 1.1.2) によって UI が一部変更されました。下記「感想と改善案」で提起した UI 改善案を反映していただいた形になっています。詳しくは「Colour Contrast Analyser (WCAG 2.1 対応) の UI 改善」をご参照ください。

ウェブアクセシビリティを担保するうえで重要な前景色と背景色のコントラスト比について、チェックするツールはいろいろありますが、私自身は、Mac および Windows の両方で使える (プロジェクト関係者で共有しやすい)、使いかたが簡単 (スポイトで調べたい色の部分をクリックするだけでよく、16進数を知らなくても使える)、無料、という理由で、The Paciello Group が公開している Colour Contrast Analyser (以下、CCA) を長年愛用しています。

この CCA ですが、最近バージョンアップされて WCAG 2.1 対応になった (新しく追加された達成基準 1.4.11 非テキストのコントラスト についても検証できるようになった) ので、ご紹介します。

ちなみに、バージョンアップを機に、バージョン番号が 1.0.0 にリセットされています (本記事執筆時点での最新版は 1.1.1)。Electron というフレームワークを新たに採用したとのことで、UI も大きく変わっています。

新旧の Colour Contrast Analyser。左が旧版で右が新版。
新旧の Colour Contrast Analyser

使いかた

バージョンアップした CCA の使いかたは、以下のとおりです。

Colour Contrast Analyser のスクリーンショット。UI に振られている各番号は、下記の説明文に対応しています。
Colour Contrast Analyser のスクリーンショット

前景色と背景色の調整

Foreground colour (前景色) / Background colour (背景色) のエリア (上のスクリーンショットの (1) 部分) に、16進数 (HEX) または RGB / HSL 値を入力します。お手軽に、スポイトで画面の任意の場所をクリックして色の値を入力することもできます。

RGB では Red (赤) / Green (緑) / Blue (青) の値を入れます。Synchronize colour values にチェックを入れると、Red / Green / Blue 3つのスライダーを連動させて動かす (明度を調整する) ことができます (上のスクリーンショットの (2) 部分)。また、HSL では Hue (色相) / Saturation (彩度) / Lightness (明度) を調整できます。

Foreground colour エリアにある上下矢印のアイコンを押すと、前景色と背景色を瞬時に入れ替えることができます。

コントラストの判定結果表示

CCA のウィンドウの最上部に、前景色と背景色のコントラスト比が表示されます (上のスクリーンショットの (3) 部分)。同時に、WCAG 2.1 results (スクリーンショットの (4) 部分) として、達成基準 1.4.3 コントラスト (最低限) / 1.4.6 コントラスト (高度) / 1.4.11 非テキストのコントラストをそれぞれ満たしているかの判定が表示されます。

Sample preview エリア (スクリーンショットの (5) 部分) に、前景色 (テキスト / アイコン) と背景色との組み合わせ表示例が表示されます。テキスト (デフォルトでは「example text showing contrast」) は任意のものを入力することができます。

感想と改善案

UI は旧版から大きく変わったものの、概ね従来どおりの使いかたで簡単にコントラスト比のチェックができます。そのうえで WCAG 2.1 の新達成基準対応したのは、順当な進化かと思います。

Windows と Mac の両方に対応しているアプリケーションなので、プロジェクトの共通ツールとして導入しやすいですが、それだけに日本語対応が望まれます。既にインフォアクシアの植木さんが GitHub で issue を登録して開発元に伝えているので、今後の展開に期待しています。

機能的には順当な進化ですが、以下のように UI デザイン面では若干改善の余地があるかな、という印象です。

上記を勘案して、ラフですが UI 改善案を描いてみました。これらの改善案は、開発元の GitHub に issue 登録してディスカッションしているので、今後に期待したいところです。

Colour Contrast Analyser の UI 改善案 (1)。Contrast ratio の位置を WCAG 2.1 results のすぐ手前に移動することで、「コントラスト比がいくつ。ゆえに WCAG 2.1 の達成基準に適合 / 不適合である。」という流れで見やすくしている。また旧版の CCA と同様に、Sample preview の表示を WCAG 2.1 results の中に組み込むことで、上記箇条書きの2つ目以降の解決を試みている。
Colour Contrast Analyser の UI 改善案 (1)
Colour Contrast Analyser の UI 改善案 (2)。Foreground colour / Background colour エリアの色見本表示を小さくして、代わりに Sample preview の色見本表示 (背景の塗り) を大きくしている。また、WCAG 2.1 results の成否判定表示を改善し、コントラスト比がいくつであっても、達成基準 1.4.3 および 1.4.6 においては必ず2つの結果 (regular text 用と large text 用) が表示される形にして一貫性を保つようにしている。
Colour Contrast Analyser の UI 改善案 (2)