カラー・コントラスト・アナライザー 2.2 日本語版
カラー・コントラスト・アナライザーの概要
背景色と前景色の組み合わせが十分なコントラストを確保しているかどうかをチェックするツールです。"色のコントラスト" の判断基準は、W3C（World Wide Web Consortium）のアクセシビリティ・ガイドライン "WCAG 2.0" が達成基準としているコントラスト比を用いています。
W3C がかつて提案していた色差と明度差による基準値でのチェックも可能で、色差が500以上、明度差が125以上というのがその基準値です。 注意: ヒューレット・パッカード社がオンラインで提供している colour contrast verification tool も W3C のアルゴリズムを採用していますが、色差の基準値を400以上としており、より広範囲におよぶ背景色と前景色の組み合わせを許容しています。
コントラスト比（contrast ratio）
- コントラスト比の計算式： (L1 + 0.05) / (L2 + 0.05)
- L1 は、明るいほうの色の相対輝度。L2は、暗いほうの色の相対輝度である。
- 注記 1：コントラスト比は、1～21の範囲になりうる（通常は、1:1～21:1と記述される）。
- 注記 2：コンテンツ制作者は、テキストのレンダリング（例：フォントのスムージングやアンチエイリアス）に関するユーザーの設定を制御できないため、テキストのコントラスト比はアンチエイリアスをオフにした状態で評価される。
- 注記 3:達成基準 1.4.3 および 1.4.6 の目的上、コントラストは通常の使用においてテキストがレンダリングされる際に指定されている背景色に対して測定される。もし背景色の指定がない場合は、背景色には白を想定することになる。
- 注記 4：背景色は、テキストが通常の使用においてレンダリングされる際に背景となるコンテンツの指定された色である。テキストの色が指定されている際に背景色が指定されていない場合は問題がある。なぜなら、ユーザーのデフォルトの背景色は未知であり、コントラストが十分かどうかを評価することができないからである。同じ理由で、背景色が指定されている際にテキストの色が指定されていない場合も問題ありということになる。
- 注記 5：文字の周囲に縁取りがある際、その縁取りがコントラストを強めることもあり、文字とその背景色におけるコントラストの計算に用いられる。ただし、文字の周囲の細い縁取りは文字として扱われる。文字の周囲の太い縁取りが、かさ（暈：ハロー、後光）のようになって、文字の細かい字画を埋めていれば、背景色として考慮されることになる。
- 注記 6：WCAG への適合は、典型的な表現において隣接すると制作者が想定してコンテンツで指定した色の組み合わせに対して評価されるべきである。制作者は、ユーザーエージェントによる色の変更などのように通常とは異なる表現を考慮する必要はない。ただし、それが制作者のソースコードによって起こる場合は除く。
明度差の計算式
色の明度差は以下の計算式で算出されます。:
((Rの値 X 299) + (Gの値 X 587) + (Bの値 X 114)) / 1000
背景色の明度と前景色の明度との差は、125以上あるべきだとされています。
注意: このアルゴリズムは、RGB値をYIQ値に変換するための計算式が元になっています。この明度の値は、識別可能な色の明度を示します。
色差の計算式
色差は以下の計算式で算出されます。:
(最大 (Rの値 1, Rの値 2) - 最小 (Rの値 1, Rの値 2)) + (最大 (Gの値 1, Gの値 2) - 最小 (Gの値 1, Gの値 2)) + (最大 (Bの値 1, Bの値 2) - 最小 (Bの値 1, Bの値 2))
背景色と前景色の色差は、500以上あるべきだとされています。
用途
カラー・コントラスト・アナライザー（CCA）は、特に Web ページ上のテキストの判読性および画像上の文字の判読性を判断するのに役立つツールです。
W3C / WCAG（Web Content Accessibility Guidelines）2.0 の達成基準 1.4.3（レベル AA）および1.4.6（レベル AAA）への適合性評価
WCAG 2.0の達成基準 1.4.3および達成基準 1.4.6は、前景色と背景色の組み合わせは、コントラスト比の基準値を上回ることとしています。このCCAを使って、"コントラストが十分" かどうかを WCAG 2.0 の達成基準で検証してください。
CCAの使い方
色の選択方法
色の選択は2箇所（前景色 / 背景色）に分かれており、検証する色の選択方法は3つあります。
- セレクトボックスからカラーパレットを使えます。色の組み合わせを検討する際に使うと便利です。
下にある（小さいほうの）カラーパレットは、左上で選択されているベースカラーの透明度の異なる10種類のバリエーションです。上段は背景色が白の場合、下段は背景色が黒の場合です。それぞれの不透明度は、上段が100%、75%、50%、25%、10% の順、下段は最初が100% ではなく 85% になっています。
このパレットは、検討している色の組み合わせの視認性を改善するために、段階的に明るくしたり暗くしたりしながらチェックするのに便利です。注意：この機能はColor Palette Creatorからヒントを得ています。
-
色の値（16進数形式）をテキストボックスに入力します。チェックしたい色の値が分かっている際に使うと便利です。
-
スポイトのアイコンの拡大カラーピッカーを使って、Web ページ（あるいは、画面上のどこか）から色をサンプリングできます。
色を手早くサンプリングして、その値でチェックするのに便利です。カラーピッカーのボタンを押すと、マウスカーソル付近を拡大した小さな画面が現れます。マウスカーソルの先にある色がカラーパレットのセレクトボックスに出ます。（左マウスをクリック、あるいは Enter キーを使って）カラーピッカーで色が選択されると、hex値のテキストボックスにその色の値が入り、その時点で選択されている色の組み合わせに合わせて、色の明度差および色差の結果が更新されます。
注意:マウスカーソルをうまく動かすには、矢印キーを使ってください。
キーボードによる使用
| 機能 | キー |
|---|---|
| 前景色パレットを開く | F9 |
| 背景色パレットを開く | F10 |
| カラーパレット間を移動する | 矢印キーまたはTabキー |
| 前景色カラーピッカーを起動 | F11 |
| 背景色カラーピッカーを起動 | F12 |
| カラーピッカーの移動 | 矢印キー |
| 選択する色の決定 | Enterキー |
利用条件
カラー・コントラスト・アナライザーはフリーウェアです。
カラー・コントラスト・アナライザーを使った時点で、あなたがカラー・コントラスト・アナライザーの以下の使用許諾契約書を読んで、その内容を理解して同意したものとみなされます。
このソフトウェアは、何の保証もなく "現状" のまま提供されるものです。特に、NATIONAL INFORMATION AND LIBRARY SERVICE (NILS) は、このソフトウェアの信頼性、品質、あるいは商業性に関して、また利用目的への適合性に関して、いかなる責任も負いません。加えて、NILS はこのソフトウェアを使用することであなたの Web サイトのアクセシビリティを何ら保証するものではありません。また、あなたの Web コンテンツがある特定の Web アクセシビリティの規格やガイドラインに準拠することを保証するものでもありません。
このソフトウェアは、クリエイティブ・コモンズのライセンスの下に提供されています。
ダウンロードおよびインストール方法
注意:カラー・コントラスト・アナライザーは、いかなるアドウェアあるいはスパイウェアを含んでいません。
システム要件: Windows XP & Vista で動作検証済
ダウンロードしたら、解凍して CCA フォルダにある、Colour_Contrast_Analyser.exe ファイルを起動すると、そのままご利用になれます。また、Web Accessibility Toolbar をインストール済の方は、解凍した CCA フォルダの中にある3つのファイルを全て、Accessibility_Toolbar フォルダ内に置くと、Web Accessibility Toolbar の[画像と色]-[色]-[カラー･コントラスト・アナライザーを起動]を選択することで起動できます。
また、アンインストールはフォルダを削除するだけです。
日本語版: カラー・コントラスト・アナライザー 2.2 日本語版 （zip形式、394 kb）
開発者
- Jun(Wrong HTML)
- 共同開発：Steve Faulkner（The Paciello Group）
- コンテンツ提供：Gez lemon（The Paciello Group / Juicy Studio）
カラー・コントラスト・アナライザー（オンライン版：英語）よりコンテンツ提供。 - 日本語版翻訳：植木 真（株式会社インフォアクシア）
カラー・コントラスト・アナライザーに関するご意見・ご要望:
- Steven Faulkner (英語版): steven.faulkner@nils.org.au
- インフォアクシア (日本語版): info@infoaxia.com
Windows IE用
Windows 2000 & XP 用