JIS X8341-3 5.5c/5.6c 背景色と前景色のコントラストを調べるツール

JIS X8341-3 5.5c

画像などの背景色と前景色には、十分なコントラストを取り、識別しやすい配色することが望ましい。

JIS X8341-3 5.6c

フォントの色には、背景色などを考慮し見やすい色を指定することが望ましい。

背景色と前景色のコントラストは取った方がいい･･･というのはわかっているものの、では実際どのくらいのコントラストを取ればいいのかは、ツールなどを使わないと俗人的になりがちです。 そこで色のコントラストを測れるツールをいくつか紹介します。

カラー・コントラスト・アナライザー日本語版（Win）

インフォアクシアが提供する文字色と背景色のコントラストが確保されているかをチェックしてくれるツール。
スポイトを使ってPCの画面上の色をピックアップすることができ、明度差・色差がW3Cの基準（明度差125以上、色差500以上）を満たしているかどうかも判定してくれます。また、色覚特性（第一色覚：赤、第二色覚：緑、第三色覚：青）の状態での明度差・色差も表示してくれます。

ColorContrastChecker

アイ・クリエイツが提供する文字色と背景色の組み合わせをチェックできるWebサイト。
入力欄に背景色と文字色を16進数で入力（もしくはカラーパレットから選択）すると、一般の方、色覚特性の方がそれぞれどのように見えるかを確認することができます。さらに明度差・色差がW3Cの基準を満たしているかどうかも判定してくれます。

ColorSelector 5.0（Win&Mac）

富士通が提供する文字色と背景色の組み合わせを○×でチェックしてくれるツール。
スポイトを使ってPCの画面上の色をピックアップすることができ、一般、白内障、色覚特性での見やすさを○×で表示してくれます。

ColorDoctor 2.0（Win）

富士通が提供する色覚特性での見え方をシミュレートして表示してくれるツール。
ブラウザに限らず、PCの画面に表示されるすべてのもの（動画も含む）をシュミレートできます。

W3Cが提案している色のコントラストに関する計算式（アルゴリズム）については、インフォアクシアでも解説されていますが、The rage for color brightness difference is 125. The range for color difference is 500.つまり明度差が125以上、色差が500以上と示されています。また、現在策定中のWCAG2.0では輝度コントラスト比によって基準が設けらるそうです。