Wrong HTML - カラー・コントラスト・アナライザー(CCA)

カラー・コントラスト・アナライザーの概要

背景色と前景色の組み合わせが十分なコントラストを確保しているかどうかをチェックするツールです。"色のコントラスト" の判断基準は、W3C(World Wide Web Consortium)が提案している アルゴリズムに基づいています。

"2つの色は、その明度差および色差が基準値を上回っていれば、コントラストが十分に確保されていると考えます。" W3C が提案している基準値は、明度差が125以上、色差が500以上です。 注意: ヒューレット・パッカード社がオンラインで提供している colour contrast verification tool も W3C のアルゴリズムを採用していますが、色差の基準値を400以上としており、より広範囲におよぶ背景色と前景色の組み合わせを許容しています。

明度差の計算式

色の明度差は以下の計算式で算出されます。:
((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)1.0 のチェックポイント 2.2 への適合性評価

WCAG 1.0チェックポイント 2.2は、"前景色と背景色の組み合わせは、色覚に特性のあるユーザーが見たとき、あるいは白黒の画面で見たときにコントラストが十分であること"としています。このCCAを使って、"コントラストが十分" かどうかを W3C が提案しているアルゴリズムで検証してください。

このページの先頭へ

CCAの使い方

ユーザー・インターフェースは、以下の4つから構成されています。

  1. 色選択
  2. 結果
  3. 色覚特性による結果
  4. オプション & ヘルプ

1. 色選択

色の選択は2箇所(前景色 / 背景色)に分かれており、検証する色の選択方法は3つあります。

色選択のユーザー・インターフェース

  1. セレクトボックスからカラーパレットを使えます。色の組み合わせを検討する際に使うと便利です。

    カラーパレット

    下にある(小さいほうの)カラーパレットは、左上で選択されているベースカラーの透明度の異なる10種類のバリエーションです。上段は背景色が白の場合、下段は背景色が黒の場合です。それぞれの不透明度は、上段が100%、75%、50%、25%、10% の順、下段は最初が100% ではなく 85% になっています。

    このパレットは、検討している色の組み合わせの視認性を改善するために、段階的に明るくしたり暗くしたりしながらチェックするのに便利です。注意:この機能はColor Palette Creatorからヒントを得ています。

  2. 色の値(16進数形式)をテキストボックスに入力します。チェックしたい色の値が分かっている際に使うと便利です。

    色の値入力

  3. スポイトのアイコンの拡大カラーピッカーを使って、Web ページ(あるいは、画面上のどこか)から色をサンプリングできます。カラーピッカーのボタン

    色を手早くサンプリングして、その値でチェックするのに便利です。カラーピッカーのボタンを押すと、マウスカーソル付近を拡大した小さな画面が現れます。マウスカーソルの先にある色がカラーパレットのセレクトボックスに出ます。 (左マウスをクリック、あるいは Enter キーを使って)カラーピッカーで色が選択されると、hex値のテキストボックスにその色の値が入り、その時点で選択されている色の組み合わせに合わせて、色の明度差および色差の結果が更新されます。

    注意:マウスカーソルをうまく動かすには、矢印キーを使ってください。

    カラーピッカーが起動したときのマウスカーソル付近の拡大画面の例。マウスカーソルの先端にある色がカラーパレットのセレクトボックスに表示されます。

2. 結果

結果表示は、サマリー(要約)と詳細とに分かれています。'サマリー結果' は、明度差と色差の両方の値を示します。

サマリー結果

もし両方とも基準値をクリアしていれば、チェックマークが表示されます。どちらか一方だけでもクリアしていなければ、×印が表示されます。 '詳細結果' は、それぞれのチェックの値と基準値が表示され、そのコントラストが十分かどうかが示されます。

注意:サマリーおよび詳細結果のテキストは、選択してコピーすることが可能です。

カラー・コントラスト・アナライザーの結果表示部分

3. 色覚特性による結果

'色覚特性ごとの結果も表示する' のチェックボックスを選択すると、'標準的な見え方' および3タイプの色覚特性(第一色覚:赤、第二色覚:緑、第三色覚:青)による結果が表示されます。

色覚特性による結果表示

注意:3タイプの色覚特性における値の変換方法は、Journal of the Optical Society of America V14, #10 pp2647 にある、Hans Brettel、Francoise Vienot、そしてJohn Mollonによるアルゴリズムを参考にしています。謝辞:Brettel のアルゴリズムを実装しているVischeckの皆さんにそのソースコードを公開していただきました。

4. オプション

オプションのメニュー類

'常に最前面に表示' のメニューを選択すると、CCA のウィンドウを他に開いている全てのウィンドウよりも前面に常に表示します。'フォント' メニューを押すと、CCAの画面で使われている文字の書体を変更することができます。

注意: 選択した書体や文字サイズによっては、きちんと表示されない場合があります。

"ヘルプ" メニュを押すと、CCAのヘルプページをブラウザ画面で開きます。

注意:このヘルプを利用するには、インターネット接続環境が必要です。

このページの先頭へ

キーボードによる使用

カラー・コントラスト・アナライザーのアクセスキー
機能 キー
前景色パレットを開く F9
背景色パレットを開く F10
カラーパレット間を移動する 矢印キーまたはTabキー
前景色カラーピッカーを起動 F11
背景色カラーピッカーを起動 F12
カラーピッカーの移動 矢印キー
選択する色の決定 Enterキー

利用条件

カラー・コントラスト・アナライザーはフリーウェアです。

カラー・コントラスト・アナライザーを使った時点で、あなたがカラー・コントラスト・アナライザーの以下の使用許諾契約書を読んで、その内容を理解して同意したものとみなされます。

このソフトウェアは、何の保証もなく "現状" のまま提供されるものです。特に、NATIONAL INFORMATION AND LIBRARY SERVICE (NILS) は、このソフトウェアの信頼性、品質、あるいは商業性に関して、また利用目的への適合性に関して、いかなる責任も負いません。加えて、NILS はこのソフトウェアを使用することであなたの Web サイトのアクセシビリティを何ら保証するものではありません。また、あなたの Web コンテンツがある特定の Web アクセシビリティの規格やガイドラインに準拠することを保証するものでもありません。

クリエイティブ・コモンズのライセンス

このソフトウェアは、クリエイティブ・コモンズのライセンスの下に提供されています。

このページの先頭へ

ダウンロードおよびインストール方法

注意:カラー・コントラスト・アナライザーは、いかなるアドウェアあるいはスパイウェアを含んでいません。

システム要件: Windows 2000 & XP で動作検証済

ダウンロードしたら、解凍して CCA フォルダを好きなところに置いてください。Colour_Contrast_Analyser.exe ファイルを起動すると、そのままご利用になれます。

また、アンインストールはフォルダを削除するだけです。

日本語版: カラー・コントラスト・アナライザー日本語版 (zip形式、193 kb

開発者

カラー・コントラスト・アナライザーは、Junが開発しました。
共同開発:Steve Faulkner(NILS)

コンテンツ提供:Gez lemon(Juicy Studio)カラー・コントラスト・アナライザー(オンライン版:英語)よりコンテンツ提供。
アドバイス・監修:Andrew ArchSofia Celic(ともに、NILS)
日本語版翻訳:植木 真株式会社インフォアクシア

カラー・コントラスト・アナライザーに関するご意見・ご要望: