macOS でテキストのコントラスト比を評価するツール。ウェブアクセシビリティ達成基準のメモ。

ウェブサイトで表示されるテキストについてのアクセシビリティ確保について、WCAG 2.0 ではコントラスト比の達成基準1.4.3が設けられています。

で、その達成基準1.4.3について、チェックするためのツールも含めてちょいと調べたのでメモ。

コントラスト比をチェックするソフトウェア

調べてみるとブラウザのアドオン/拡張機能とかでもあるみたいなのですが、利用させていただいた下記ColorTesterがシンプル且つわかりやすく非常に良かったです。(他のツールも使用した上での感想ではありませんが、最初に ColorTester を利用させていただき、特に他のものを試そうと思いませんでした。)

アクセシビリティ テキストコントラスト比チェックツール  ColorTester 画面

参考:ColorTester – JIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づき背景色と前景色のコントラストのチェックを行うソフトウェア – アルファサード株式会社

※ Windows 版も提供されています。

アルファサードさんって PowerCMS を開発なさっている会社さんですね。

代表の野田純生さんのブログを何気なく拝見させていただいたのですが、ColorTester について触れられている記事がありました。

ColorTesterの色の比較メソッドは W3Cのページにある計算式のそのまま、ほぼコピペです。

(中略)

ColorTesterでは「OS標準のカラーピッカーを使う」という設定が選択できます。スポイトアイコンをクリックする「ひと手間」が余分にかかるのですが、より正確に色を拾いたい場合、こちらの設定も試してみてください。

米大統領選挙の速報サイトに見る「色で表現したらわかりやすくね?」問題。 – Junnama Online

コントラスト比をチェックするツールで測定結果にバラツキがあるので注意してくださいなんて話を何回か目にしたことがありますので、それはチーム内で共通のツールを使うなどプロジェクト開始時に定義等しておけば良いと思いますが、そもそも評価対象の色の抽出精度が低いのは困った問題になりそうです。

ですので、ColorTester を使う際は OS 標準のカラーピッカーを使う設定の方が良さそうですね。ま、macOS 版で確認したところデフォルトでその設定になっているようですので安心なんですけど。

アクセシビリティ テキストコントラスト比チェックツール  ColorTester 設定画面

「小さな文字・大きな文字」とは?達成基準が違う。

チェックした結果、小さな文字は不適合、大きな文字は適合、という評価になる場合がありますが、そもそも「小さな文字・大きな文字」とは具体的にどのサイズなのでしょうか。

アクセシビリティ テキストコントラスト比チェックツール  ColorTester 画面

WCAG 2.0解説書を見る限り、達成基準 1.4.3(※レベルAA)には、サイズの大きなテキストの場合は、3:1 のコントラスト比があれば良いといった旨の記述があります。

ここで言う「大きな文字」のサイズについての記述を見てみると

少なくとも18ポイント、又は14ポイントの太字。あるいは、中国語、日本語、及び韓国語 (CJK) のフォントは、それと同等の文字サイズ。

(中略)

訳注: 日本語の全角文字の場合は、拡大教科書普及推進会議 第一次報告「第2章 拡大教科書の標準的な規格について」に基づき、22ポイント又は18ポイントの太字を「同等な」サイズとみなすのが妥当である。

達成基準 1.4.3 を理解する | WCAG 2.0解説書 サイズの大きな (テキスト) (large scale (text))

となっています。

WEB 方面の私としてはポイント表示だとサイズがイマイチピンと来ません。ですので、ポイント表示をピクセルにして整理しました。

画像文字を含む、テキストのコントラスト比は 4.5:1 必要。

ただし、下記に記載のサイズ以上のテキストはコントラスト比 3:1 でも達成基準(レベルAA)適合とされる。

pt表記 px換算
英数字 18pt 24px
英数字(Bold) 14pt 18.67px
日本語文字 22pt 29.34px
日本語文字(Bold) 18pt 24px

ということでいいでしょうか。

ただ、装飾的なフォント、線の細いフォントの利用においては、設定上この基準を達成しているからといって読みやすさが担保されると必ずしも言えないので注意。

pt → px 変換はこちらを利用させていただきました。
参考:[ JavaScript ] フォントサイズ変換(pt↔px)

参考:達成基準 1.4.3 を理解する | WCAG 2.0解説書

※ macOS Sierra 10.12.2
※ Color Tester 1.0

 コメントをどうぞ

  • 入力いただいたメールアドレスは公開されませんが、このブログが置いてあるサーバーに保存されます。
  • 入力いただいた情報の他に、WordPress の機能により IPアドレス を取得させていただきます。取得した IPアドレス はスパムコメントの対処ために利用され、公開することはありません。
  • 個人情報などを記入された場合、投稿いただいたコメントを表示しないか、該当箇所を編集して公開する可能性があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。